May 26, 2012

Compress images to improve performance

Lately, I have been working on improving the performance of the website. Going through the site, I notice that there are 30+ images with many of them over 50KB+, few over 100+KB and couple over 500+KB. Most of these are images are not really doing much and I so tried to compress the images using Photoshop and save them using the "Save for web" option.

With the images, I saved the images in the size needed rather scaling down. This reduces the file size of the images. Also, I saved the images by lowering the quality of the images. Depending on the image, reducing the quality of the images may not reduce the visible quality. However, reducing the quality can greatly decrease the file sizes. With some images, I tried converting from png to jpg format and vice versa. I notice that with some images, file sizes are greatly reduced when converted from png to jpg. This is great as it reduced the data size needed to be downloaded to load the page.

In the site I worked, I reduce the total size from around 2MB to just under 1MB just by compressing the images which greatly improved the performance of the site.
Reference: Shahed Kazi at AspNetify.com