Optimize the Images on Your Website

One quick and easy way to eek some extra performance out of your website is to optimize your site’s images. The idea is to retain image quality but reduce image size by stripping out unnecessary data from the images, making your images smaller and faster-loading.

Image Optimization Utilities

The main tools I’ve used in the past to do that have been:

• Command Line
  • pngcrush – open source command line PNG optimizer. Capable of attempting various compression levels/filter methods automatically.
  • PNGOUT – Converts GIF, BMP, JPG to PNG (and optimizes PNGs). Claims to produce even smaller files than pngcrush but does not automate the testing of different algorithms/tools.
• GUI
  • PNGGauntlet – For Windows. Drag and drop UI, capable of converting multiple images simultaneously. Converts JPG, GIF, TIFF, and BMP to PNG.
  • ImageOptim – For Mac. Another with a drag and drop UI and multiple image conversion. Handles JPG, PNG, and GIFs. Uses various different tools behind the scenes (PNGOUT, AdvPNG, Pngcrush, extended OptiPNG, JpegOptim, jpegrescan, jpegtran, and Gifsicle), trying different options to produce optimal results.
  • Photoshop – Photoshop’s “Save for Web & Devices” option produces some pretty decent results.
• Web
  • smush.it – online image optimizer (JPG, PNG, GIF) from Yahoo. Also uses various different optimization tools behind the scenes.

Blog Image Testing

I recently took development ownership of a blog site that’s been around for a little while. The owner was complaining about the site having performance issues, so I started taking a look at things.

The first issue was the web host – it’s hosted using GoDaddy’s shared hosting service. Shared hosting (your account resides on the same hardware as who knows how many other accounts, sharing the same resources), although dirt cheap these days, is a roll of the dice to begin with, and GoDaddy doesn’t have a great reputation in that area. According to DomainTools’ reverse IP lookup, there are 6880 domains on the same IP address, which seems pretty excessive. We’re considering moving the site to a different hosting company, although sticking with shared hosting unless the site’s traffic gets too crazy.

The next thing I looked at was a site analysis using another Yahoo tool, YSlow, a browser plugin which suggests ways to improve a site’s performance based a different rulesets. Some of its suggestions are easy to implement – enabling gzip compression, minifying JavaScript and CSS, etc. Some are not – using a CDN, making fewer HTTP requests (especially with WordPress – the more plugins, the more requests), etc.

Properly-Sized Images

The analysis recognized that the bulk of the data being transferred was in images. As a blog site, there were a lot of additional images that have been uploaded by blog authors. I speculated that bloggers may not be uploading optimized images and that this could also be dragging the site’s performance down. Fortunately, violations of YSlow’s “Do not scale images in HTML” rule (i.e., do not upload huge images then scale the images down to smaller resolutions using HTML attributes) were not the problem. Bloggers were usually resizing their images before uploading them, instead of uploading crazy large resolution images.

In the past, when I’ve wanted to do a batch resizing of images for upload to a site (e.g., a picture gallery), I’ve used Photoshop to handle it. Photoshop’s ability to record and play back actions lends itself perfectly to batch resizing images and saving them for the web. It also includes a built-in Image Processor script that can be useful.

Theme Image Optimization

I decided to run an optimization on the site theme’s image files (files used to display the overall UI of the site) first. Here were the results using PNGGauntlet:

• Original size: 102 KB
• New size: 36 KB
• Savings: 65%

Uploaded Content Optimization

Next, I wanted to analyze all of the blogger-uploaded content. I made a local copy of all of the blogger-uploaded images and decided to create some Windows batch scripts to optimize the PNG and JPG files. These were the scripts I used – one for PNGs using pngcrush and one for JPGs using jpegtran. The batch scripts recursively search the main image directory, executing the optimization utility against all files of the desired filetype, generating an optimized version, deleting the original, then renaming the optimized version to the original filename:

Batch JPG Optimization Using jpegtran

pushd "C:\Users\noxad\Documents\src\blog\images"
for /r %%x in (*.jpg) do (
	"C:\utils\jpegtran.exe" -copy none -optimize "%%x" "%%x".opt
	del "%%x"
	move "%%x.opt" "%%x"
	)	
popd

Batch PNG Optimization Using pngcrush

pushd "C:\Users\noxad\Documents\src\blog\images"
for /r %%x in (*.png) do (
	"C:\utils\pngcrush.exe" -rem allb -brute -reduce "%%x" "%%x".opt
	del "%%x"
	move "%%x.opt" "%%x"
	)	
popd

Results

• Original size: 483 MB
• New size: 465: MB
• Savings: ~4%

In this case, image optimization of the uploaded content didn’t buy us a whole lot. A 4% reduction is something, but not nearly as significant savings-wise as I’ve seen in the past, which has been more along the lines of 20-30%. Many of the images in WordPress’ uploaded content have been optimized because WordPress generates various sizes of images (thumbnails, etc.). But at least it was a fun little exercise and I’ve now got some handy little batch scripts for future use.