Compress your images!

If your site uses a lot of images, they can start to drive up the load time of your pages. Yahoo! – as part of their campaign for website optimization, has created an awesome utility for lossless optimization of images. This isn’t a replacement for saving at the appropriate quality and resolution for the web, but something to run on your images after that.

The set up

First, get yourself Firefox, Firebug and the Yslow plugin, which comes with the Smush.it utility.

Next, if you don’t already have it, download and install the soo_image plugin, which also requires the so_txp_obj library plugin (available on the same download page).

Create a dedicated image-smushing page, where you can output all your content images. I called mine images. You don’t need any styles or meta info in this page template, it is just a utility page for your own use.

Use the soo_image plugin to output your images and thumbnails on this page like so:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<txp:soo_image_select category="chef-profile">
    <txp:soo_image thumbnail="0" />
    <txp:soo_image thumbnail="1" />
</txp:soo_image_select>

</body>
</html> 

Note: I did each category on the site I’m working on individually, because there are a lot of images.

Lastly, set up a section just for smushing images. I called mine smush-images. Select the image page you created and set everything to “no”.

The Smushing

Now visit your image smushing section in a browser (you should see a bunch of images and their thumbnails), and open the YSlow plugin. It takes a moment to “catalog” your page. Click on “Tools” and then click on “All Smush.it”. This takes you to a page where your images are processed. You can then download a zip of the resulting images.

Your downloaded zip will contain the compressed images, with their original names. You can then upload them to your TXP images directory.

Done! Now your site is a little bit speedier!

comments powered by Disqus