Optimizing Images for Web (Speedy Loading Tips)

By Sam Deering

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:

  • Reducing image size using lossless compression
  • Optimise your images using Sprites
  • Why optimising images is important
  • Optimising images using Photoshop
  • Other tips an tricks for optimising images

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:

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 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 is using.

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

  • Anil Kumar

    nice one!

  • Jose Ramon Diaz Ramos

    Don’t forget to trim exif data!!!, for example with ExifTool.

    You can save 1 or 2 kb on each image. Not a big save on a 50Kb picture, but a GREAT enhance to small icons. You can reduce a 1.5Kb gif to 300 bytes or less!!!

  • Barajas Fierros

    If you want less weight, you can change the format color of the image, of RGB color to Indexed color… but it only in extreme cases…

  • sevenboy

    nice !

  • Leo Ari Wibowo

    If I use ImageOptim, it trims the images file size created by Photoshop around 30 – 45%. So I don’t think Photoshop is a good tool to optimize images, even if we ticked the Optimized option.

    • jQuery4u

      Cool nice find Leo, here is the link: it looks like it’s only for the Mac?

      • Leo Ari Wibowo

        Yes, unfortunately it’s Mac only. But if you use Windows, you can use RIOT.

  • Lukas Bijaminas

    Thanks, this is something I will find the use for!

  • Arnie

    Discovered SmushIt here. Thanks!!!

  • ambreen11

    I really appreciate your input. A search engine assigns extra weight to the topic of the image, guessing that the image accurately describes the subject matter of the post.Assuming you use tons of images in your blog, it’s absolutely essential to help Google understand your images. Otherwise that extra weight will be assigned to nothing and hurt your chances of ranking.



Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in JavaScript, once a week, for free.