Оптимизация по загрузке картинок

Отложенная загрузка картинок

1. Картинки можно загружать не сразу, а после выполнения JS, для этого указываем путь к файлу в data-src.

<img src="//:0" data-src="{path}">

 В этом случае загрузка картинки не мешает загрузке страницы, стилей и скриптов. 

2. Используйте //:0 для пустых src (но он не считается валидным значением для W3 Validator). Если указать пустое значение или #, это может вызывать повторную загрузку страницы (она не будет видна в браузере, но фактически браузер направит запрос к серверу). 

либо - src="data:," (считается валидным для W3 Validator).

Не используйте javascript:void(0) - иначе будут ошибки в Console и картинка будет показываться как битая на странице. 

https://stackoverflow.com/questions/19126185/setting-an-image-src-to-empty/19126281

https://stackoverflow.com/questions/5775469/whats-the-valid-way-to-include-an-image-with-no-src

Установка размера картинкам

У картинок желательно ставить размер (этого требует PageSpeed). Можно это делать следующим образом: 

Ставим у картинки реальные размеры через width, height атрибуты. 

И создаем такое правило CSS: 

img {
   max-width: 100%;
  height: auto;
}

Использование Webp формата

Если вы хотите улучшить показатели Pagespeed, то имеет смысл задействовать формат webp. 

Используйте сервис для ручной конвертации картинок в webp https://products.aspose.app/imaging/conversion/jpeg-to-webp

Затем на странице вы указывается следующую разметку для вывода картинки: 

 <picture>
          <source srcset="/uploads/rs/landImages/5/mainphoto.webp" type="image/webp" loading="lazy" alt="">
          <img src="/uploads/rs/landimages/5/mainphoto.png" alt="" width="900" height="625">
</picture>

Для современных браузеров будет использован вариант с webp, а для остальных браузеров будет подгружаться картинка в png или jpg.