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

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

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

Это снижение стоимости владения

за счет меньшего количества людей для поддержки и узкого стека разработки. Про снижение стоимости владения продуктом

Это быстрое внесение изменений

по ходу эксплуатации программы. Как создается функционал на платформе

Это простой удобный интерфейс

адаптация под мобильные устройства. Про юзабилити платформы

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