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).

Welcome to the Purple Noir Blog

Purple Noir blog is finally here and I’m delighted to introduce you to it. :)

Here, you’ll be able to read updates about the Purple Noir website, personal views on random topics and coding and web development techniques. Some of the old blog articles will be edited and reposted but, in the main, the old blog is officially now retired. ;)

New CMS: New Purple Noir Blog

The old Purple Noir blog was hosted on Blogger but it was time for a change: Purple Noir has therefore migrated the blog to¬†WordPress CMS. WordPress is great fun to work with because it is so powerful and customisable. It’s also a good choice for most bloggers, as it has a small learning curve and high security. Installation is a breeze, as the Purple Noir webhost, 123-Reg, supports one-click installation. And, of course, there is a whole slew of fantastic plugins and widgets that can be tailored to suit any blog.

Fiona x