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

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

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.

Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Насколько полезной была статья?

Google поиск по нашей документации

Выгода от использования Falcon Space

В 2-3 раза экономнее и быстрее, чем заказная разработка
Более гибкая, чем коробочные решения и облачные сервисы
Используйте готовые решения и изменяйте под свои потребности
Нужна бесплатная консультация?
Получить оценку проекта
Создайте концепцию проекта на основе нашего шаблона и получите оценку проекта в виде КП.
Демо-сайт решений
Базисные решения, которые можно гибко адаптировать под себя: менять внешний вид, бизнес-логику и даже структуру базы данных.
Сайт использует Cookie. Правила конфиденциальности OK