HTML Academy · Урок

Адаптивные изображения с srcset и sizes

Отдавайте изображения подходящего размера для экранов с разной плотностью пикселей

«Адаптивные изображения с srcset и sizes» — бесплатный урок HTML Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Проблема с отдельными изображениями

Одно большое изображение, которое отдаётся всем устройствам, расходует пропускную способность на небольших экранах:

Телефону с экраном шириной 390 пикселей не нужно изображение шириной 2400 пикселей
Монитор 4K заслуживает изображения с более высоким разрешением, чем 96 dpi
Адаптивные изображения отдают подходящее изображение для подходящего экрана

Атрибут srcset

srcset предоставляет список источников изображений с указанием их ширины:

<img
  src="photo-800.jpg"
  srcset="
    photo-400.jpg  400w,
    photo-800.jpg  800w,
    photo-1600.jpg 1600w
  "
  alt="Mountain landscape"
>
<!-- 400w, 800w, 1600w = intrinsic widths of each file -->
<!-- Browser chooses the best match for the device -->
<!-- src is the fallback for browsers that don't support srcset -->

Дескрипторы плотности пикселей

Используйте дескрипторы 1x, 2x, 3x для изображений фиксированного размера с разными разрешениями:

<img
  src="logo.png"
  srcset="logo.png 1x, logo@2x.png 2x, logo@3x.png 3x"
  alt="Coddy logo"
  width="120"
  height="40"
>
<!-- 2x screens (Retina) get logo@2x.png -->
<!-- 3x screens (iPhone Pro) get logo@3x.png -->
<!-- 1x screens get logo.png -->

Атрибут sizes

sizes сообщает браузеру, какой ширины будет изображение при разных размерах области просмотра:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         800px"
  alt="Landscape photo"
>
<!-- At ≤600px viewport: image takes 100% of viewport width -->
<!-- At ≤1200px viewport: image takes 50% -->
<!-- Otherwise: image is 800px wide -->

Как браузер выбирает изображение

Браузер вычисляет: значение sizes × плотность пикселей устройства, чтобы выбрать изображение из srcset:

Область просмотра 600 пикселей, DPR 2×, размер = 100vw → требуется изображение шириной 1200 пикселей → выбирается 1600w
Область просмотра 1200 пикселей, DPR 1×, размер = 50vw → требуется изображение шириной 600 пикселей → выбирается 800w
После загрузки браузер кэширует изображение и может не загружать его снова

Значение sizes по умолчанию

Без sizes браузер предполагает, что изображение занимает всю ширину области просмотра (100vw):

<!-- Without sizes: browser assumes 100vw -->
<!-- This causes it to download a very large image on wide screens -->
<!-- Always specify sizes if your image is not full-width -->

<img
  srcset="hero-800.jpg 800w, hero-1600.jpg 1600w"
  sizes="100vw"  <!-- explicit full-width -->
  src="hero-1600.jpg"
  alt="Hero image"
>

Дескрипторы ширины srcset и дескрипторы x

Два режима srcset:

Дескрипторы ширины (w) — с sizes: выбор с учётом изменяющегося макета
Дескрипторы плотности пикселей (x) — изображения фиксированного размера в нескольких разрешениях

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

Создание файлов srcset

Инструменты для создания вариантов адаптивных изображений:

Sharp (Node.js) — программное изменение размера изображений
Squoosh — работа в браузере и визуальное сравнение
Cloudinary / Imgix — изменение размера по URL по запросу
Плагины Webpack / Vite — создание во время сборки

srcset с WebP и резервным вариантом

Объединяйте srcset с <picture>, чтобы обеспечить резервный формат:

<picture>
  <!-- Modern browsers: WebP -->
  <source
    type="image/webp"
    srcset="photo-400.webp 400w, photo-800.webp 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
  >
  <!-- Fallback: JPEG -->
  <img
    srcset="photo-400.jpg 400w, photo-800.jpg 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
    src="photo-800.jpg"
    alt="Mountain photo"
  >
</picture>

Художественное кадрирование и переключение разрешения

Существует два типа задач для адаптивных изображений:

Переключение разрешения — одно и то же изображение в разных разрешениях → используйте srcset + sizes
Художественное кадрирование — разная обрезка или композиция на разных экранах → используйте <picture> с <source media>

Проверка адаптивных изображений

Как проверить работу srcset:

Откройте DevTools → вкладка Network → отфильтруйте Images
Включите эмуляцию разных размеров области просмотра и значений DPR для устройств
Перезагрузите страницу — проверьте, какой файл запрашивает браузер
Также проверьте: Lighthouse → Performance → проверка Properly sized images

Поддержка srcset браузерами

Поддержка srcset браузерами отличная:

Поддерживается всеми современными браузерами (Chrome, Firefox, Safari, Edge)
Резервный вариант src обслуживает старые браузеры
Для использования в production полифилл не нужен

Проверка

Что сообщает браузеру атрибут sizes?

Итоги: srcset и sizes

Основные сведения об адаптивных изображениях:

srcset — список файлов изображений с их исходной шириной или плотностью пикселей
sizes — медиусловия, описывающие отображаемую ширину изображения
Браузер выбирает наиболее подходящий вариант: значение sizes × DPR устройства
Дескрипторы ширины (w) — для изображений с изменяющимся размером; x — для элементов фиксированного размера
Всегда указывайте src как резервный вариант

Часто задаваемые вопросы

Урок «Адаптивные изображения с srcset и sizes» бесплатный?

Да — полный текст урока «Адаптивные изображения с srcset и sizes» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «Адаптивные изображения с srcset и sizes»?

Отдавайте изображения подходящего размера для экранов с разной плотностью пикселей Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Адаптивные изображения с srcset и sizes»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к HTML Academy