A regular reader of this blog, Shivaranjan, asked me earlier today on how to optimize images to speed up his site. I decided to write a post on it as I feel there are many people who do not know on how to reduce their image size and as a result slow down their site.

Images are one of the reasons behind a slow loading site and hence is necessary to optimize them before you place them on your site or blog. Photoshop includes a feature called ‘Save for Web’ which you can use to reduce the image size.

If you do not have Photoshop, you can use other image editing softwares that have a similar feature to the ’save for web’ that Photoshop provides or you can also use an online image optimizer.

To access the ‘Save for Web’ feature in Photoshop, hit Alt+Shift+Ctrl+S after opening an image. Now select the image format that you wish to use.

For JPG format you should set the quality of the image as 50 for optimal results and make the image progressive so that your visitors will have something to look at when the image is loading.

For GIF format reduce the maximum number of colors to reduce the image size and make the image interlaced so that your visitors will have something to look at when the image is loading.

Also use the height and width tags when you place images on your site, otherwise the browser will have to determine the size of the image and then load the image and then the rest of the page which means the content will not load until all the images load. Your visitors land on your site to read the content, so making them wait for the images to load first will just annoy them and they may leave.

When you set the height and width tags, the browser will automatically know the size of the image and will be able to hold a place for the image and load the rest of the page at the same time. So while the images are loading, your visitors get to read the content.

Example of image code with height and width tags included

<img src="http://www.example.com/mycar.jpg" title="My Car" alt="my car" border="0" height="465" width="550" />

Image Formats you can use

JPEG (Joint Photographic Experts Group): Support millions of colors. You can use this format for photographs and screenshots that you take.

GIF (Graphics Interchange Format): Supports a maximum of 256 colors. You can use this format for logos and buttons and when you need transparent and animated images.

PNG (Portable  Graphics): Supports 24-bit colors and better transparency than the GIF format. The GIF format may still be the better option as not all browsers display PNG images well.