Optimize Images to Save Bandwidth and Speed Page Load

A few weeks ago I mentioned the wesley.pl script from GitHub to optimize images, and how I had modified it to keep (or discard) the EXIF / XMP information. Making sure images are as small as possible is important to save bandwidth and improve page load times (and google rank), so I think it’s worth discussing my image optimization process in more detail.

There several plugins available for WordPress that will optimize images as they are uploaded to the Media Library or NextGEN Gallery:

Any one of these plugins will optimize images as they are uploaded, but they will not optimize NextGEN Gallery re-sized images (in the gallery/cache/ folder), or take care of other images that come with themes, plugins, backgrounds, icons, etc.

To use the wesley.pl script I mentioned a few weeks ago (download the patched version here) and optimize images manually, you will need a few basic image tools:

jpegtran from libjpeg
libjpeg is a widely-used free software library written in C which implements JPEG decoding and encoding functions alongside various utilities for handling JPEG images. libjpeg can be installed on most rpm-based Linux distributions as `yum install libjpeg`.
pngcrush
pngcrush is a free, open source command-line utility for optimizing PNG image files. It reduces the size of image files losslessly — that is, the resulting “crushed” image will have the same quality as the source image. pngcrush can be downloaded from the sourceforge homepage for pngcrush or, if you have the rpmforge / repoforge enabled in your distribution (usually under /etc/yum.repos.d/), you can install it using the `yum install pngcrush` command.
gifsicle
gifsicle is a command-line tool for creating, editing, and getting information about GIF images and animations. gifsicle is available from the official gifsicle website, or if you have the rpmforge / repoforge enabled, you can install it using `yum install gifsicle`.
convert and identify from ImageMagick
ImageMagick is a software suite to create, edit, compose, or convert bitmap images. It’s available on most Linux distributions, and can be installed (on rpm-based distros) using the `yum install ImageMagick` command.

After making a backup, you can run the wesley.pl script against your website’s root folder, as wesley.pl /var/www for example, and if you’re using the patched version, you can specify whether or not to keep EXIF / XMP information as wesley --copy=all /var/www.

You could run wesley.pl nightly, for example, on all new images:

0 3 * * * find /var/www/ -mtime -1 -regextype posix-egrep -regex '^.*\.(jpg|png|gif)

I prefer to keep EXIF / XMP information on larger images, and remove it from thumbnail sized-images, so wrote an exif-res.sh script to report image sizes and a smushit.sh script to optimize images differently based on their size. The exif-res.sh script uses exiftool, which can be installed using the `yum install perl-Image-ExifTool` if you have the rpmforge / repoforge yum repo enabled.

Here’s an example of the smushit.sh script output:

$ smushit.sh -h 1 gallery/cache/
gallery/cache/1_crop_300x300_20080525-223308-jsmoriss-1320.jpg (300x300, copy none) Total bytes saved: 2788 (orig 34497, saved 8.08%)
gallery/cache/1__800x800_20080525-223308-jsmoriss-1320.jpg (533x800, copy all) Total bytes saved: 11244 (orig 141863, saved 7.92%)
gallery/cache/1__600x600_20080525-223308-jsmoriss-1320.jpg (399x600, copy all) Total bytes saved: 5849 (orig 77981, saved 7.5%)
Find this content useful? Share it with your friends!