Compressing Images (JPEGs and PNGs) For the Web

When designing high traffic websites, it is important to ensure the pages load quickly and not make excessive use of server resources. One of the biggest culprets to slow page loads and exessive use of server resources is images. There are many instances where images used for design and layout purposes could be replaced with CSS styling, however for the necessary graphics, it is important to consider the file size.

Many designers create their images in Photoshop, GIMP, or some other graphics packages and export them for the web. What many don’t realize is that Photoshop doesn’t do the greatest job compressing these images for the web. There are, however, online tools that allow you to upload images and compress them.

There may be more tools out there, but the two I primarily use are PunyPNG and Yahoo! Smush.it. Both of these use lossless compression and do not dimish the quality of your images at all.

Orginal: 8,689 bytes	Compressed: 8,359 bytes
Savings – 330 bytes (4%)

The compressed FireFox logo (PNG format) above (taken from Mozilla’s website) would save 314.7 Megabytes of bandwidth per million hits. The savings of bandwidth could quickly and easy add up if all images were sized and compressed properly.

In addition to compressing images with tools such as PunyPNG and Yahoo! Smush.it, you may also want to consider the image quality of your JPEGs. When exporting JPEGs from Photoshop, you have the option to reduce the quality of the image to reduce the size. Saving at 75%, 50%, or even 25% quality will greatly reduce the size of the image and may not affect the visible quality of the image very much. When exporting JPEGs, I make it a habit of selecting the lowest image quality possible that retains enough quality to accurately display the image.

100% Quality: 7,956 bytes	25% Quality: 1,915 bytes
Savings – 6,041 bytes (76%)

The compessed FireFox logo (JPEG format) above would save 5.63 Gigabytes of bandwidth per million hits. Though it has a slight loss of quality, the savings could far outweight having a pixel perfect image. When designing sites with images, be sure to compress all your images and be sure to adjust the quality of JPEGs to minimize the file size.

John Chapman

Hello, I'm John Chapman. I am a SharePoint developer living in Mesa, Arizona. I develop solutions using ASP.NET, C#, jQuery, SQL, SharePoint, etc, and I thrive on the challenge of writing code to overcome the impossible, annoying, or otherwise difficult obstacles.

Website - Twitter - More Posts