5

I am working on optimizing a page's loading speed. Here are some analytics:

enter image description here enter image description here

Notice how the images, although only accounting for 65% of the total size (1.1MB), are by far the slowest loading assets: 96% of time.

I'd like to know which are the recommended practices on optimizing loading speed, only taking images into account.

Some of the techniques we are already applying:

  • image compression
  • images hosted on cookieless domain and CDN
  • spriting everything that can be sprited
  • http headers: keep alive and Expires to one year.

Disclaimer: I have gone through the available documentation, I think by focusing on image loading optimization I am not creating a duplicate or a subjective question.

Improve this question
5
  • If you use .pngs you can use pmt.sourceforge.net/pngcrush to remove unneeded info.
    – PeeHaa
    Commented Dec 14, 2011 at 17:29
  • 1
    What did you use to generate those graphs?
    – Scott Keck-Warren
    Commented Dec 15, 2011 at 2:37
  • tools.pingdom.com
    – Naoise Golden
    Commented Dec 15, 2011 at 10:58
  • 1
    I use PNGSlim, its crazy, crazily slow but result amazing.
    – Eric Yin
    Commented Jan 11, 2012 at 13:55
  • +1 for adding a Command Line tool ;) Link to PNGSlim: people.bath.ac.uk/ea2aced/tech/png/pngslim.zip ... As Eric already mentioned: Crazily slow, but the results are indeed amazing! You may even shave off a couple of bytes by manually updating the included libraries (links are in the readme.txt).
    – David K.
    Commented Apr 18, 2012 at 15:36

3 Answers 3

Reset to default
2

Serve only scaled images. Images could be scaled down to multiple sizes on server side and then serving the scaled image according to the need. WordPress is a well known example for this type of image handling.

Improve this answer
1

Although the tools at pingdom.com gives you somewhat pretty accurate data, you have to remember that the tests pingdom performs wont give you accurate data, as it in the end boils down to the end-users browser. Browsers just handle this stuff differently.

To address the question directly; You leave out details regarding where and how your images are stored. I have experienced that if images are stored on a CDN, your test results will improve dramatically. Like really really much.

I must admit that i fail to understand why your images are 1MB in total, what kind of insane website is this? With a properly optimized and compressed png file averaging at around 20kb, you must have a shitload (pardon my french) of images that you need loaded.

A very common mistake, when it comes to images on websites, is that designers have this belief that the images absolutely must be saved with a minimum of compression (think FLAC for music). Let me illustrate with images.

This image is saved at "100% quality" being 171KB in size. This image is a optimized version saved at "60%" quality being 42KB in size.

Personally, i cant see any differences, but yet you save 75% of the bandwidth by using a proper optimized+compressed version. These images are in jpg, but it is pretty much the same across all formats.

You can, within 5 minutes find at least 10 websites that have this issue. It is said that the danish newspaper BT.dk improved their loading times by 50% by optimizing their images (and they have loooooads)

If you are interested further in this topic, heres a great article about it.

Improve this answer
2
  • it is the home of a news website and social network, so lots of photos and user profile pics. Thank you for pointing out compression, but this is already had into account. In fact it is so obvious I didn't think of mentioning it. We are also using a CDN, I forgot to mention, but this only speeds things for users far away from the datacenters, which is not the case. I edited the quesion to take into account those things.
    – Naoise Golden
    Commented Dec 16, 2011 at 15:00
  • 1
    Although it is obvious, many still forget it. Also the big guys also forget stuff like this, hence the long post about it.
    – Jan Dragsbaek
    Commented Dec 16, 2011 at 15:15
0

1st: optimize images: decrease size, combine them, or remove them if possible

2nd: server images from CDN

3rd: server images from multiple domains, better not the subdomain of the site to avoid cookie

4th: use "lazy loader", load images on scroll

Improve this answer
1
  • Thank you for your insight with "lazy downloader". The rest of the options though are some of the mentioned we already apply.
    – Naoise Golden
    Commented Jan 11, 2012 at 20:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.