One of the most important factors in business website design is the speed at which the pages download to the user’s browser. Large image files are the main cause of slow page loading times, so it is essential to optimize images to provide the user with the responsiveness they expect. When updating your website, you are typically adding photographs and full color images. These images should be saved in the .JPG format, reading on will show you how to turn a 1.7MB photo into a 2.2KB jpg image for your website.

Studies have shown that visitors do not tolerate pages that load too slowly. They may even leave the page before it has fully loaded if images and other content are taking too long to appear. Because of this tendency, you should limit the size of images displayed on a page, and the number of images displayed. If you are going to display large images, it is usually better to display a thumbnail or a smaller preview first with the option of clicking through to the full size image.

Cropping an image in MS Paint

Images can be optimized by cropping, resizing and adjusting picture quality. For our example we used the image to the left, starting out as a 1.7MB jpg image. Our aim is to have an Australian flag image for our website design. All image editing software from MS paint, free with Microsoft Windows, to professional web design software like Adobe Photoshop will allow you to crop images.

In MS paint, cropping images for websites is done by holding down the right mouse button, and dragging to select the area to be cropped. Then select "crop" from the image menu. Make sure that irrelevant parts of the picture are edited out and the image only contains what you are trying to express. After cropping the example image to remove everything around the flag, the file size is now 49.5KB, a huge difference.

Image editing software will also allow you to scale down or resize your image to further reduce the file size. Scaling down does not result in loss of resolution, but the more you scale down the more detail you will lose in the picture. In MS Paint the resize option is in the image menu. Adjust the zoom to 100% to see the real size of the image. Resizing our cropped web image results in a file size of 14.8KB, looking good, but we can do better!

The final step is to adjust the jpg image quality. This reduces the file size by compressing information about the image, like repetitive data. The image quality or compression is set to a scale from 1 to 100. Not all image editing software allows users to adjust the jpg quality. If you are updating your website there are several cheap or free image editing tools like the Shrink-o-matic, recommended for its ease of use. Combing the cropping and resizing of MS Paint with Shrink-o-matic file compression is the easiest was to get results for free. ClickWebDesign customers adding images to their website do not need to worry about this step, as the ClickWebDesign CMS automatically adjusts jpg image quality!

So what should the jpg image quality be? Well the sweet spot is generally between 40 and 70. Too low and the image appears distorted, too high and the file size suffers, as shown below. Try experimenting with different settings with your own images.

Quality:10
File Size: 1.7KB

Quality:40
File Size: 2.2KB

Quality:60
File Size: 4.4KB

Quality:100
File Size: 14.8KB

There is no standard rule for the number and size of images for professional web design, you need to find a balance between content and load time. If a web page is too large after optimizing images, you may need to split it into two pages or more. After making any updates to your website check that it fully loads at an acceptable pace.  For our Australian flag example, we reduced the load time from 74 seconds to 0.26 seconds (for a 128 Kb Internet connection). Optimize your images for fast downloads to be sure your visitors spend their time hearing what you have to say, rather than waiting (or not) for pages to load.