Производительность загрузки изображения

Question

Я работаю над сайтом, который использует Wordpress и много изображений. Эти изображения имеют разрешение от 1000 до 800 пикселей [Ш Х В] и должны быть уменьшены вручную до больших пальцев для страницы входа. Большие пальцы имеют размер около 12 КБ каждый. Для страницы входа необходимо загрузить 45 изображений.

Мой вопрос: каков наилучший способ загрузки этих изображений с максимальной производительностью? Должно ли это быть реализовано с помощью jQuery, загружая изображения после открытия сайта? Или вы бы предпочли другое решение?

Все изображения в простой HTML-разметке:

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

Answer 1

использование ленивая загрузка плагин:

Задерживает загрузку изображений на длинных веб-страницах.Изображения вне области просмотра (видимая часть веб-страницы) не будут загружаться до того, как пользователь их прокрутит.

Reference

Answer 2

Вы также можете использовать файл манифеста HTML5 для кэширования всех ваших css, js и изображений для более быстрого просмотра.

Answer 3

для меня это как создать два изображения для каждого изображения, одно с фактическим размером, а второе с миниатюрой, показать все миниатюрные изображения после загрузки страницы с событием .load(), чтобы все изображения выглядели точно без каких-либо конфликтов, и на любом мероприятии покажите реальное изображение ..