Effective Image Optimisation Tricks for Your Website
Images are one of the most important key factors to do with website loading speed. Text itself isn’t a problem, but all those accompanying images can be a real problem. But what can we do about it, short of removing them altogether?
Well, don’t panic. You don’t need to remove them. Simply adjusting some habits is about the most it would take. I’ve written about the benefits before, but this time I’m going to expand on them and tell you how I do it.
First, decide if you really need that image. If it has a repeating colour or gradients, why not split it up. Have a 1×1 pixel image for your one colour and repeat it. Actually, using Cascading Style Sheets (CSS) will accomplish the same thing, without the extra download penalty. Get the bare minimum of an image that you want to use, and fake the rest.
Next, check out the high colour most image editing programs automatically apply to images. I bet that a good major portion of your audience wont be able to see it. We don’t ALL have 16.5 million true colour displays on a 19″ LCD screen. Try to stick with a simple 256 colour resolution. It will accommodate to a wider audience and dramatically shrinks the file size of the image too! Quicker image downloads! I use the excellent and free IrfanView program available from http://www.irfanview.com/ to do all my image conversion and resolution tweaking.
Don’t use BMP. I’ve seen some websites use BMP images their website. It’s rare, but unfortunately, I have seen it. Please don’t do that. Use common formats like JPEG or PNG and try to avoid BMP and GIFs. My plain recommendation is to use the open standard format of PNG as much as you can, and then use JPG for the rest. Your website visitors will thank you for it.
Sometimes webmasters will put their email address as an image to help prevent spam bots from picking it up. A tip of my hat goes to them. Whatever helps get the volume of spam down. Just remember though, when making that image, use an image selector tool to get to the very edge of the letters and save that, then if you want to use filler on your page, use standard HTML colour tweaks like tables to fill in background (if you’re using, say, a white email image on a darkish background), or style sheets.
These are the techniques and procedures that I follow when optimising pictures and images for a website. It makes it much smaller and I find it loads quite quickly, with no noticeable degradation in image quality at all! You’d have to be a keen artist and graphics designer to be able to pick the differences, but thankfully, unless you’re specifically targeting that market, your customers wont even notice. Happy tweaking!
Martin Coleman is a freelance writer and fan of computer technologies. Contact him via http://www.martincoleman.com to ask him how his knowledge of computing and his skills of translating the technical into laymen’s english can help your website and business.
