Optimizing Images for Web (Speedy Loading Tips)

There are quite a few ways you can optimise your images for speedy loading. The best ways include creating a sprite which contains all your images and then using CSS to adjust an offset position aligned to your image on the sprite. Other techniques include lossless compression, specifying dimensions and using the correct dimensions/format for the image as required.

Topics covered in this post:

Optimise your images using compression techniques

You can check your site using various online tools like GTMetrix which reports image optimisations suggestions and losslessly compressing reductions. Using GTMetrix you can click “see optimised version” from which you can then save if you wish to replace the current image. Here is an example of a compressed image reduction.

The image was detected in GTMetrix ad a candidate for compression.

The images look pretty much the same so no loss in quality (the white areas are the white versions of the images when you hover the image is switched to it’s white version).

The proof of speedier loading! :)

Optimise your images using Sprites

Create a sprite using an online sprite tool – the best sprite tool out of these is called stitches. Very simple to use you simple add your images and you get the sprite and the matching CSS.

Why optimising images is important

There are plenty of reasons for this, here i’ll give you 1 reason for optimising your images, that should be enough to convince you.

1. Page Loading Speed – Images play a vital part in the size of your web page and how fast it loads (on average 45% of total size – based on top 10 websites). Google Likes Fast Sites – 500 ms slower could lead to a 20% drop in traffic! Not good. Also if you use sprites it can reduce your http requests and offer less image flickering especially with animations. And obviously if your images are smaller, your bandwidth will be less and the lower your hosting costs will be!

Optimising images using Photoshop

You can also use Photoshop to compress your image optimised for web. From my experience JPG format achieves the best quality for size ratio so this is the format I tend to use unless I need some transparency then I go for PNG. Let’s take a quick look at the same image in the different formats – looking at size and quality. I won’t go into how to do this but here are some posts which will assist:

• Optimizing images for web
• Seeing The Difference With JPEG Compression In Photoshop
• Speed Up Your Website with Better Image Optimization in Photoshop

Other tips an tricks for optimising images

This is a good post to learn about the different formats: When and how to use internet image formats.

There is a tool by Yahoo called Smush.it which uploads and converts your images in batches.

Another technique I’ve seen is to strip metadata which is held on some JPEGS.

Crushing PNGS with PNGCRUSH I’m pretty sure this is one of the tools/algorithms that Yahoo’s Smush.it is using.

Make it a habit to resize, optimize and rename every image you put on the web.