HTML ::如何提高在网页上加载图像的性能

Question

I have a web page which loads almost 70-80 images on the web page. I already have implemented lazy loading. Should I keep these images on local server or on some image site like picasa and reference it from there ? or is there any better option ? What would be the best way to load these many images without loosing performance and efficiency ?

Please suggest.

One more question - is it good idea to add css animation effect to those images ?

Answer 1

There are a number of things you can do.

1. Use a tool like smushit - www.smushit.com to optimise images and reduce loading times.
2. Make sure that you are not resizing large images by setting incorrect widths and heights.
3. Call images from a subdomain on your server.
4. Combine images used as backgrounds/display elements into a single image (known as a sprite), and use css to only call specific areas of the single image - this means it will only be loaded once, reducing HTTP requests.

You can get some advice on using Sprites here: http://css-tricks.com/css-sprites/

You can also get some more info on page loading times, and things you can do to optimise by using GTMetrix tools at http://gtmetrix.com/