Производительность веб-сайта: изображения

Изображения составляют около 50% пропускной способности сайта (ссылка), поэтому в этой статье мы поговорим именно о них.

Давайте рассмотрим некоторые моменты, о которых следует помнить.

Вам действительно нужно изображение?

Фотография стоит тысячи слов. Наверняка вы слышали эту фразу, и это большая правда, как и то, что простой и конкретный дизайн лучше передает то, что мы хотим сказать, и лучше работает 😉.

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

Может быть, это изображение можно заменить плоским цветом или градиентом, и в обоих случаях мы можем сгенерировать это с помощью CSS и сэкономить много байт этого изображения.

Я не говорю, что вы должны удалить все изображения со своего сайта, но вы должны найти баланс между использованием изображений и других ресурсов.

Если после анализа альтернативных вариантов вы придете к выводу, что вам нужно изображение, отлично, вам предстоит большая работа!

Форматы

Когда мы решаем работать с изображениями, очень важно определить формат изображения. Давайте рассмотрим некоторые форматы и их характеристики:

• JPG: это оптимизированный формат изображений. При этом происходит потеря качества.
• PNG: это формат, который, помимо поддержки прозрачности, сохраняет качество изображения, но это обычно очень тяжелые файлы.
• WebP: это относительно современный формат, который был продвинут компанией Google. Этот формат допускает использование прозрачности, не теряет качества и имеет очень маленькие файлы. Это наиболее рекомендуемый формат, и большинство браузеров уже используют его. См. совместимость.

Чтобы убедиться, что все ваши пользователи будут видеть изображения правильно, даже те, кто посещает сайт из старых браузеров, вы можете указать браузеру параметры загрузки с помощью тега <picture> следующим образом:

<picture>
  <source
    srcset="gatitos.webp"
    type="image/webp"
  />
  <source
    srcset="gatitos.jpg"
    type="image/jpg"
  />
  <img
    src="gatitos.jpg"
    alt="Gatitos jugando con una pelota."
    {* ¡SPOILER ALERT! *}
    loading="lazy" 
  />
</picture>

Размеры

Поскольку изображения загружаются асинхронно и продолжают загружаться после первого рисования DOM, если их размеры не определены до загрузки, они могут вызвать скачки или «перетекания» в содержимом страницы. Это имеет два негативных последствия:

• Браузер должен перерисовать DOM и пересчитать элементы, следующие за загруженным изображением.
• Такие скачки раздражают пользователя и создают неприятные впечатления.

Примеры:

Изображение без определенных размеров создает «перетекание» в контенте.

Изображение с определенными размерами не создает перетекания.

Задержка загрузки

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

Тогда изображения, находящиеся в компонентах, которые отображаются только при прокрутке, пользователь никогда не видел, но он все равно должен был их загрузить, верно? Хм 🤔.

Чтобы решить эту проблему, мы должны использовать отложенную загрузку изображений, то есть сказать браузеру, чтобы он загружал изображения только тогда, когда они нужны пользователю. Как это сделать? У нас есть два пути:

• В современных браузерах (см. совместимость) встроена отложенная загрузка изображений, и для этого мы должны использовать атрибут <img loading="lazy" src="kittens.jpg" alt="Котята играют с мячиком" />. Таким образом, браузер будет загружать изображение только тогда, когда пользователь будет находиться рядом с ним.
• Использование браузерного API Interserction Observer, который позволяет нам сделать то же самое, что и в предыдущем пункте, но «программно». Я оставляю ссылку, чтобы вы могли посмотреть документацию по этому API.

CSS

Много раз мы используем изображения в качестве фона в CSS. В этом нет ничего плохого, совсем нет, но вот некоторые рекомендации, которые следует иметь в виду, когда вы это делаете:

• Браузер присваивает более высокий приоритет загрузки изображениям, на которые ссылаются элементы <img>, чем изображениям, на которые ссылается CSS.
• Изображения, на которые ссылается CSS, невидимы для устройств чтения с экрана, поэтому для некоторых пользователей такие изображения не будут существовать.
• Если браузер определил, что правило CSS, связанное с внешним ресурсом, не применимо к документу в его текущем виде, браузер не запрашивает его. То есть, если вы определите изображение в медиа-запросе, оно будет загружаться только при применении этого правила.

На этом пока все, до скорой встречи 👋🏻.