CODEWITHSUNDEEP
htmlimageperformance
user20072008
user20072008

Reputation: 379

HTML :: How to improve performance of loading images on the web page

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 ?

Upvotes: 0

Views: 1096

Answers (1)

James Davies
James Davies

Reputation: 114

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/

Upvotes: 2

Related Questions