Speeding up websites with image optimization

How fast your websites load has always been crucial. I don’t think many people realize just how quickly a lot of potential readers will back away from a site because it’s not loading fast enough. Every second you can shave off means a few more people sticking around. But Google has said it will be considered as a ranking factor, so now everyone’s in a panic about lowering the time it takes to load their webpages.

What I’m about to say will be so obvious to some of you that you’ll have trouble believing I’m saying it. But I am, because I see so many people not bothering with it. I don’t know if they’re all newbies or some of them just don’t realize it matters, or what, but here it is: you need to optimize your images.

The importance of small images

How much bandwidth your images take up has nothing to do with how big they look. It has everything to do with how big they are in bytes or kilobytes. Shrinking all your images as much as possible (without losing clarity) can take a few seconds off your load time (and that’s worth doing). This shrinking is what we mean by optimization.

How to optimize images in WordPress

In a WordPress installation, there are two types of images you’ll be dealing with: the images within your theme, and the images you put into posts. You’ll probably want to handle these in two different ways.

Theme images only need to be optimized once, so we’re going to go to a bit more trouble with them than we will with the post images. And yet, this is incredibly simple:

• Take each image in your theme to Dynamic Drive’s optimizer. Yes, there are other free optimizers, but this one is extremely reliable and full-service, and some I’ve tested don’t do much.
• There, you can enter either the image’s URL or upload it from your computer.
• Generally, I ignore the “convert to” drop down window, click the “show all results” box, and hit “Optimize.” If for some reason (I can’t imagine what) it matters that all your images be in a particular format, you can select that format to avoid seeing a lot of options you can’t use.
• It’ll present you with the image in all major formats, at several levels of reduced size. Look at them and choose the smallest version that looks good.
• Download that version and upload it to your site.
• If you selected a new file format, be sure to change your stylesheet where it references the image name.

That’s it! It’s really very simple and doesn’t even take all that long to do.

Post images are another story. If you can be bothered to feed each one of them into Dynamic Drive’s tool to get the best optimization, do so. But if you run 20 blogs or something, who’s got the time? Fortunately, there’s a plugin that will optimize your images decently on the fly: WP-Smushit. This plugin will automatically send images uploaded to your Media Library to Yahoo’s Smushit service for image compression, retrieve the results, and post that instead of the less compressed version you uploaded. It’s like magic!

Note: You can use Smushit for theme images too, rather than Dynamic Drive’s tool. But Smushit won’t give you the option of changing formats (.gif, .jpg. or .png) like Dynamic Drive will. This is just what I was talking about when I said DD’s version is more full-service than most. And for those one-time theme images you want to squeeze every last byte out of, it’s worth using the very best tool.

Tweak your Media Library settings

It’s also important to tweak your Media Library options, which can be found under your sidebar “Settings” at “Media.” From here, you can tell WordPress the various sizes you want it to automatically render images in. Scaling images also slows sites down, so you don’t want to be generating 150×150 thumbnails if your theme is going to make them 66×66 on the front page.

• Set the thumbnail size to whatever you’re actually using.
• If you use a different size within your post (I do – usually “Medium”), then also set that size to what looks good in your posts.

These settings are maximums, so it won’t stretch images and make them look strange – it will shrink whichever side needs shrunk to fit within that maximum.

Photoshop and similar tools

Yes, Photoshop and Fireworks and lots of other graphics editing tools will also do the optimization for you, if you have them. Look for that feature in your documentation and follow the instructions.