Картинки — половина веса страницы и половина её проблем

Реальный размер вместо исходного

Браузер честно скачивает файл целиком, даже если показывает его в блоке 300 пикселей шириной. Приведите изображения к тем размерам, в которых они действительно показываются, — и вес страницы упадёт раньше, чем вы дойдёте до форматов.

Современные форматы и отложенная загрузка

WebP и AVIF дают тот же вид при заметно меньшем весе. Отложенная загрузка не даёт скачивать то, что находится далеко внизу страницы и, возможно, не будет просмотрено вовсе.

Зачем нужен alt

Подпись читают программы чтения с экрана и поисковые роботы. Описывайте, что изображено, а не как называется файл: «синий диван в интерьере гостиной», а не «IMG_20240517». Для декоративных картинок правильный alt — пустой: он говорит «здесь нет содержания», и это верное сообщение.

Как это выглядит в разметке

Элемент picture отдаёт современный формат тем браузерам, которые его понимают, и обычный JPEG остальным. Атрибут loading="lazy" ставится всем изображениям, кроме первого экрана: их откладывать не надо, иначе главная картинка появится позже, чем могла бы.

<picture>
  <source srcset="/img/divan.avif" type="image/avif">
  <source srcset="/img/divan.webp" type="image/webp">
  <img src="/img/divan.jpg" alt="Синий диван в интерьере гостиной"
       width="800" height="600" loading="lazy">
</picture>

Зачем указывать width и height

Размеры в разметке позволяют браузеру заранее занять место под изображение. Без них страница «прыгает» при загрузке: текст, который человек начал читать, уезжает вниз, когда картинка наконец появилась. Это ровно то, что измеряет CLS — одна из метрик Core Web Vitals. Это одна из самых раздражающих вещей на мобильном и одновременно одна из самых простых в исправлении — что ещё ломается на телефоне.

Что делать с уже загруженными картинками

Совет «загружайте правильно» бесполезен для сайта, где тысяча фотографий уже лежит. Порядок работы обратный: сначала найдите самые тяжёлые — обычно два десятка файлов дают половину лишнего веса, и отдача с них максимальная. Дальше решайте по месту: фотографии товаров пересохранить в современном формате, баннеры привести к реальному размеру блока, декоративные подложки нередко заменяются фоном без картинки вовсе. Массовую пересборку удобно делать средствами самой платформы — у большинства движков есть автоматическое создание размеров под разные экраны. Руками остаётся только первый экран, где важно и качество, и то, что картинка не откладывается.