Картинки на сайте: форматы, размеры и ленивая загрузка

Почему картинки — главная проблема веса страницы

Вес страницы складывается из нескольких компонентов: HTML, CSS, JavaScript и медиафайлов. Первые три обычно занимают килобайты или десятки килобайт, но изображения могут весить мегабайты. Причина в том, что текстовые форматы хорошо поддаются сжатию, а изображения — нет. Даже после сжатия фотография высокого разрешения может весить в десятки раз больше, чем весь остальной код страницы.

Это не значит, что изображения нужно убирать. Они делают контент наглядным, привлекают внимание и улучшают восприятие. Но если их не оптимизировать, страница будет загружаться медленно, особенно на мобильных устройствах с медленным интернетом. Есть три основных способа сократить вес изображений без потери качества:

1. Подобрать размер под место показа. Нет смысла загружать картинку в высоком разрешении, если она будет отображаться на маленьком экране.
2. Использовать современные форматы. WebP и AVIF сжимают лучше, чем JPEG и PNG, при том же визуальном качестве.
3. Отложить загрузку того, что не видно сразу. Если картинка находится ниже первого экрана, её можно загрузить позже.

Разберём каждый из этих способов подробно.

Как выбрать размеры картинок под разные экраны

Браузер не знает заранее, на каком устройстве откроют страницу. Экран может быть узким (мобильный телефон) или широким (большой монитор). Если загружать одну и ту же картинку для всех устройств, на мобильном она будет занимать слишком много места, а на большом экране — выглядеть размытой.

Решение — предоставить браузеру несколько вариантов картинки и подсказать, какой выбрать. Для этого используют атрибут srcset в теге <img>:

<img
  src="image-800.jpg"
  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Описание картинки"
>

Здесь:

• srcset перечисляет доступные варианты картинки с указанием их ширины в пикселях (400w, 800w).
• sizes подсказывает браузеру, какой размер картинки нужен в зависимости от ширины экрана. В примере: на экранах до 600 пикселей картинка займёт всю ширину (100vw), на больших — половину (50vw).

Браузер выберет подходящий вариант автоматически, исходя из разрешения экрана и ширины области показа. Это работает даже на экранах с высокой плотностью пикселей (ретина): если экран имеет плотность 2x, браузер возьмёт картинку в два раза шире, чтобы она выглядела чётко.

Почему нельзя откладывать главную картинку первого экрана

Главная картинка первого экрана должна загружаться сразу. Если её загрузку отложить, страница будет выглядеть пустой, пока картинка не появится. Это ухудшает восприятие и увеличивает вероятность, что пользователь уйдёт.

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

Ленивая загрузка: когда и как откладывать загрузку

Ленивая загрузка (lazy loading) — это механизм, который откладывает загрузку картинок, пока они не появятся в области видимости. Браузер загружает только те картинки, которые пользователь видит или скоро увидит, а остальные — по мере прокрутки.

Для этого достаточно добавить атрибут loading="lazy" к тегу <img>:

<img src="image.jpg" loading="lazy" alt="Описание картинки">

Браузер сам определит, когда загружать картинку. Это работает без JavaScript и поддерживается всеми современными браузерами.

Зачем резервировать место под картинку

Если не зарезервировать место под картинку заранее, текст на странице будет прыгать при загрузке. Это происходит потому, что браузер сначала отрисовывает страницу без картинок, а потом, когда они загружаются, сдвигает контент вниз. Чтобы избежать этого, нужно указать размеры картинки в атрибутах width и height:

<img
  src="image.jpg"
  width="800"
  height="600"
  loading="lazy"
  alt="Описание картинки"
>

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

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

Доступность: описание для незрячих пользователей

Картинки должны быть доступны не только для тех, кто их видит, но и для пользователей скринридеров. Для этого используется атрибут alt:

<img src="image.jpg" alt="Человек читает книгу в парке">

Описание должно быть кратким и содержательным. Если картинка носит декоративный характер и не несёт смысловой нагрузки, атрибут alt можно оставить пустым:

<img src="decorative-image.jpg" alt="">

Скринридер проигнорирует такую картинку, и пользователь не услышит лишнюю информацию.

Современные форматы: WebP и AVIF вместо JPEG и PNG

JPEG и PNG — это проверенные форматы, но они не самые эффективные. WebP и AVIF сжимают лучше при том же визуальном качестве. Разница в сжатии зависит от типа изображения:

• Фотографии. WebP может весить значительно меньше, чем JPEG, при том же качестве. AVIF сжимает ещё эффективнее, но не все браузеры его поддерживают.
• Графика с прозрачностью. PNG поддерживает прозрачность, но WebP и AVIF справляются с этой задачей лучше, занимая меньше места.

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

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Описание картинки">
</picture>

Браузер выберет первый поддерживаемый формат из списка. Если ни один не поддерживается, загрузится JPEG.

Почему сжатие картинок — это не панацея

Многие начинают оптимизацию с того, что прогоняют все картинки через сжатие. Это помогает сократить вес, но не решает основных проблем:

1. Размер под экран. Даже хорошо сжатая картинка высокого разрешения будет весить много, если она отображается на маленьком экране. Браузер всё равно загрузит полный файл, даже если покажет его в уменьшенном виде.
2. Формат. JPEG с максимальным сжатием всё равно будет весить больше, чем WebP или AVIF при том же качестве. Современные форматы используют более эффективные алгоритмы сжатия, которые лучше сохраняют детали.
3. Ленивая загрузка. Если не откладывать загрузку картинок ниже экрана, страница будет загружаться медленнее, чем могла бы. Браузер потратит время на загрузку того, что пользователь ещё не видит.

Сжатие — это лишь один из шагов. Без правильного размера, формата и ленивой загрузки выигрыш будет минимальным.

Как проверить, что оптимизация работает

Чтобы убедиться, что оптимизация даёт результат, можно использовать инструменты для анализа страницы:

1. Lighthouse в Chrome DevTools. Он покажет, какие картинки можно оптимизировать, и даст рекомендации по улучшению.
2. WebPageTest. Позволяет протестировать загрузку страницы на разных устройствах и скоростях интернета.
3. Инструменты для сжатия. Например, Squoosh или TinyPNG, которые показывают, насколько можно сократить вес картинки без потери качества.

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

Позиция редакции

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

Сжатие картинок — это хороший первый шаг, но не единственный. Если ограничиться только им, вы упустите возможность ускорить загрузку страницы в разы. Оптимизация должна быть комплексной: от выбора размера и формата до отложенной загрузки и доступности.

Эта позиция неверна, если:

• На странице нет картинок, кроме декоративных иконок, которые весят килобайты.
• Все картинки уже оптимизированы под размер экрана и используют современные форматы.
• Ленивая загрузка не даёт выигрыша из-за особенностей контента (например, одностраничный сайт с одной картинкой).

Что попробовать в первую очередь

Если времени на полную оптимизацию нет, начните с трёх шагов:

1. Замените JPEG и PNG на WebP. Это даст заметное сокращение веса без потери качества.
2. Добавьте loading="lazy" к картинкам ниже первого экрана. Это ускорит загрузку страницы для пользователей.
3. Укажите размеры картинок в атрибутах width и height. Это предотвратит прыжки контента при загрузке.

Эти шаги не требуют больших усилий, но дадут заметный результат. Дальше можно переходить к более тонкой настройке: подбору размеров под разные экраны и использованию AVIF.