Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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.

share|improve this question
    
If you use .pngs you can use pmt.sourceforge.net/pngcrush to remove unneeded info. –  PeeHaa Dec 14 '11 at 17:29
1  
What did you use to generate those graphs? –  Scott Warren Dec 15 '11 at 2:37
    
tools.pingdom.com –  Naoise Golden Dec 15 '11 at 10:58
1  
I use PNGSlim, its crazy, crazily slow but result amazing. –  Eric Yin Jan 11 '12 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). –  DKOATED Apr 18 '12 at 15:36
add comment

3 Answers 3

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.

share|improve this answer
    
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 Dec 16 '11 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 Dec 16 '11 at 15:15
add comment

Serve Scaled Images.images should be scaled down o server side rather than user side so try to implement that it will drastically reduce your Image load.

share|improve this answer
add comment

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

share|improve this answer
    
Thank you for your insight with "lazy downloader". The rest of the options though are some of the mentioned we already apply. –  Naoise Golden Jan 11 '12 at 20:56
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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