iBCScorp™ is a web development company. Over the last 15 years, the staff at iBCScorp.com (Internet Business Services Consulting Company) have observed may changes in the way websites are built.
One major change has been the increased ability for customers to dynamically manage their content on a website. In the last several years, content management systems, web galleries, posts, blogs, news articles, and almost any kind of media content management systems have made it increasingly easy for customers to self-edit their websites.
As an Internet Business Consulting Services Company, iBCScorp™ likes this change. Putting control of a website into the hands of our clients makes it easier, faster, and cheaper for them to make changes to their site. For this reason, we sell a lot of content management systems to our clients. CMS systems like Joomla, Magento, SilverStripe, Drupal, Dolphin, and WordPress, to name a few, have made it very easy for people to manage their own content.
We like this change, however, giving the wheel to people who have little experience with web development or how the internet or webpages work, can sometimes be frustrating for those people. One issue that comes up quite often is: how do I load images to my website consistently so they look correct every time?
While the exact method to do this may change depending on the tool, the basic concepts are the same.
This post is to explain to Content Management System (CMS) Users how to prepare for loading images into Joomla, loading images into Drupal, loading images into SilverStripe, loading images into WordPress, loading images into Dolphin, and, in fact, loading images into any webpage - custom or otherwise.
The concept is the same; the logistics of how to get the image onto the page differs depending on how the page is edited.
This tutorial covers the concepts of how to edit the images. These concepts will apply no matter what software program you are using to edit them. We will give you one example of editing images using Microsoft Paint for your website, since it is a common and free application, but the same principles apply anywhere.
You want to keep the file sizes of your image small without sacrificing the quality of your image. For a large image (approximately 600px by 600px), file size should be about 50k - 60k For a Medium image (approximately 300px by 500px), file size should be about 25k - 50k. For a small/thumbnail image (approximately 100px by 100px), file size should be about 10k.
For reference, when you upload images from a camera, most images are approximately 1400px by 1400px, if not larger.
By resizing your images, you can reduce the file size.
Depending on what you are using your images for, they will need to be different sizes.
Thumbnails - no bigger then 150px by 150px
Bio Image - approximately 300px by 300px
Galley Image - no bigger then 700px by 700px
Product Image - approximately 500px by 500px
Most Content Management System's (CMS's) will adjust the size that your image will display, however, your image may still be too large and cause your site to run slowly.
By reducing the file size, your website will load the images faster and increase the speed of your website.
You should resize your images to the size that you would like them to display on your website. When you upload an image from a camera, most images are approximately 1400px by 1400px, if not larger.
Images get distorted when your website is displaying the image larger then what the original image was.
When you resize an image, you should only decrease the size from the original.
Images will become fuzzy when your image proportions are incorrect. This can happen when the website is displaying the image in a different size then what the image is. This can also happen when you resize the image. i.e. reduce height by 30% and width by 50%, or taking a thumbnail sized image and displaying it really large.
Make sure that when you resize an image you keep the image proportion the same.
Images can be large files, which can cause your website to take a long time to load and make your website run slow.
By reducing the file size of the image, you can increase the speed the your website will load.
There is a lot of image editing software out there for you to use. Some of the best ones we have found are:
Click on Start > All Programs > Accessories > Paint
Click on File (in the top left) > Open. Navigate to your image and click open
Click on Image (in the top left) > then on Stretch/Skew and a new window will appear, into which you can type the new width and height, as a percentage of the current size. Change both on them to the same number i.e. 50% height, 50% width to keep the picture quality high