Веб-разработка требует внимательного подхода к оптимизации изображений, чтобы обеспечить отличную производительность и адаптивность на различных устройствах, включая те, которые оснащены дисплеями с высокой плотностью пикселей (HiDPI-экранами, например, ретина-экраны). В нашей студии Freeline Studio мы активно используем атрибуты HTML srcset и sizes для реализации адаптивных изображений. В этой статье мы поделимся основными рекомендациями и принципами, которые мы применяем при работе с изображениями на проектах.

Почему мы используем srcset и sizes

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

1. Форматы изображений

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

• WebP и AVIF — идеально подходят для изображений с прозрачным фоном, обеспечивая отличное сжатие без потери качества. Эти форматы значительно уменьшают размер файла по сравнению с PNG.
• JPEG — используется для изображений без прозрачного фона, таких как фотографии и сложные графики. Мы применяем алгоритм MOZJPG в Squoosh для оптимизации размера без заметных потерь качества.

2. Применение атрибутов srcset и sizes

Для того чтобы браузер мог автоматически подбирать оптимальную версию изображения в зависимости от устройства пользователя, мы используем атрибуты srcset и sizes. Вот пример использования этих атрибутов:

html
Copy
<imgsrc="image-1x.jpg"
  srcset="image-1x.jpg 1x, image-2x.jpg 2x"
  alt="Описание изображения"
  width="400"
  height="300"
/>

В этом примере браузер автоматически выберет изображение с разрешением 1x или 2x, в зависимости от того, какой экран у пользователя.

3. Дополнительные варианты: использование тега <picture>

В некоторых случаях мы применяем тег <picture>, который позволяет использовать различные форматы изображений, например, WebP или AVIF, в зависимости от того, поддерживает ли браузер эти форматы:

html
Copy
<picture>
  <source srcset="image-1x.webp 1x, image-2x.webp 2x" type="image/webp"/>
  <source srcset="image-1x.jpg 1x, image-2x.jpg 2x" type="image/jpeg"/>
  <img src="image-1x.jpg" alt="Описание изображения" width="400" height="300"/>
</picture>

Этот подход позволяет браузеру выбрать наиболее подходящий формат и разрешение изображения в зависимости от поддерживаемых типов и характеристик экрана.

4. CSS для адаптивности

Мы также применяем CSS для дополнительной адаптивности изображений и фонов. Например, для фоновых изображений с разной плотностью пикселей:

css
Copy
.some-block {
  background-image: image-set(
    url("bg-1x.jpg") 1x,
    url("bg-2x.jpg") 2x
  );
  background-size: cover;
}

Это позволяет обеспечить правильное отображение фонов на экранах с различной плотностью пикселей.

5. Lazy Loading

Чтобы ускорить загрузку страниц, мы используем атрибут loading="lazy" для изображений, которые не видны пользователю сразу, а загружаются только по мере прокрутки страницы:

html
Copy
<imgsrc="image-1x.jpg"
  srcset="image-1x.jpg 1x, image-2x.jpg 2x"
  alt="Описание"
  loading="lazy"
  width="400"
  height="300"
/>

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

6. Указание реальных размеров для стабильности верстки

Очень важно указывать реальные размеры изображений в атрибутах width и height. Это позволяет браузеру зарезервировать место для изображения до его полной загрузки, предотвращая прыжки верстки (Cumulative Layout Shift). Мы всегда указываем размеры изображений, чтобы обеспечить стабильность и удобство восприятия.

Итоговый пример

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

html
Copy
<picture>
  <source srcset="images/my-image-400w-1x.webp 1x, images/my-image-400w-2x.webp 2x" type="image/webp" media="(max-width: 600px)" />
  <source srcset="images/my-image-800w-1x.webp 1x, images/my-image-800w-2x.webp 2x" type="image/webp" media="(min-width: 601px)" />
  <source srcset="images/my-image-400w-1x.jpg 1x, images/my-image-400w-2x.jpg 2x" type="image/jpeg" media="(max-width: 600px)" />
  <source srcset="images/my-image-800w-1x.jpg 1x, images/my-image-800w-2x.jpg 2x" type="image/jpeg" media="(min-width: 601px)" />
  <img src="images/my-image-800w-1x.jpg" alt="Описание изображения" width="800" height="600" loading="lazy" />
</picture>

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

---

Глоссарий

• WebP — формат изображения с поддержкой сжатия с потерей качества и без потери качества, который обеспечивает лучшее сжатие по сравнению с JPEG и PNG.
• JPEG — формат с потерей качества, широко используемый для фотографий и изображений.
• Lazy-loading — технология, при которой изображения загружаются только тогда, когда они становятся видимыми на экране.
• Cumulative Layout Shift (CLS) — метрика, которая измеряет, насколько сильно изменяется макет страницы во время загрузки.

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