Need for Speed; Image Optimisation

In the immortal words of Maverick and Goose, “I feel the need… the need for speed!” It’s a major issue for all websites: the need for speed. There’s a whole slew of tricks you can do but the most basic web design tricks are simply to reduce file sizes.

When it comes to code, all that gorgeous whitespace is simply there to make it more legible to humans. Computers don’t really care about extravagant formatting, so minifying (removing whitespace) can bump down the size of your HTML, CSS and JavaScript files. As far as your web server is concerned,

style="height; 100px; width: 100px;"

is exactly the same as

style="height:100px;width:100px;"

even though it’s less legible to you. The equivalent for graphics is to make them physically small (fewer pixels) and to reduce file size (image compression or image¬†optimisation).

Instead of making your images smaller with code, e.g.

style="height: 150px; width: 150px;"

when your image is actually 300 by 300 pixels, you should crop or scale your image in your favourite graphics editor so it’s actually the size you want to use. Next, you should compress your image to make the file size even smaller. Some graphics programs will have that option built-in but you can also do it online; a couple of very good free image compression sites are Kraken and Smush.it.

Kraken is currently in public beta and will eventually introduce subscription plans. However, they promise to always support free access to the tune of 50 images per day, of up to 500 kb each. That sounds like a good deal for most small websites. ;)

Smush.it is a YSlow tool; it’s an open source project, created by Yahoo! and released under the BSD Open Source license. Put another way, that means that in some form it will always be free. :) Smush.it also has the advantage that it can process images up to 1 mb in size.

Whether you use Kraken or Smush.it or an alternative program for your image optimisation, remember to save your compressed image files and upload them to your server. Hotlinking is a major ethical crime (don’t do it, unless permission is explicitly granted, because it hogs other people’s bandwidth) and services like Kraken and Smush.it only provide temporary files that disappear into the cyber-ether after an hour.

Source: “I feel the need… the need for speed,” is a quote from Top Gun (1986), a film directed by Tony Scott that starred Tom Cruise (Maverick) and Anthony Edwards (Goose).

Leave a Reply