CODEWITHSUNDEEP
jquerycssimage
Jannis M
Jannis M

Reputation: 745

Image loading performance

I'm working on a site which uses Wordpress and a lot of images. These images have a resolution of 1000px to 800px [W X H] and need to be scaled down manually to thumbs for the entry page. The thumbs have a size of around 12KB each. For the entry page there are 45 images that need to be loaded.

My question is: What is the best method to load these images with maximum performance? Shall it be realized with jQuery, loading the images after the site is brought up? Or would you prefer some other solution?

All images are simple HTML markup: 

   <img src="image.jpg" width="200" height="150" alt="" class="thumb" />

Upvotes: 0

Views: 201

Answers (3)

Abhidev
Abhidev

Reputation: 7273

you can also make use of HTML5 manifest file to cache all your css,js and images for faster browsing.

Upvotes: 1

jogesh_pi
jogesh_pi

Reputation: 9782

for me its like make two images of per image, one with actual size and the second is with thumbnail, show all the thumbnail image after page load with .load() event so that all the images looks exactly without any conflict, and on any event show the real image ..

Upvotes: 1

xkeshav
xkeshav

Reputation: 54084

use lazy loading plugin:

It delays loading of images in long web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them.

Reference

Upvotes: 4

Related Questions