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

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 40
Автор
Рек. время прохождения 2 минуты
Упражнений 7
Комментарии 0
Тренажер HTML
Современный веб требует, чтобы сайты отлично выглядели на любых устройствах, от маленьких смартфонов до огромных мониторов. Загрузка больших изображений на мобильных устройствах — это пустая трата трафика и времени пользователя. Адаптивные изображения решают эту проблему. Они позволяют браузеру самому выбирать наиболее подходящий файл изображения в зависимости от размера экрана, его плотности пикселей (DPR) и других условий. В этой серии заданий вы на практике научитесь использовать атрибуты `srcset` и `sizes`, чтобы сделать изображения на вашем сайте по-настоящему отзывчивыми. Вы пройдете путь от самых основ до более сложных техник, которые помогут оптимизировать производительность и улучшить пользовательский опыт.
Список тем

Основы srcset: введение в атрибут

id: 37935_adaptive-img-srcset-1

Давайте начнем с самого простого. У нас есть тег `<img>`, который отображает одно изображение. Ваша задача — добавить к нему специальный атрибут, который позволит браузеру выбирать из нескольких источников.

CSS
img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 2px solid #eee;
  border-radius: 8px;
}
HTML
<img src="https://naytikurs.ru/img/1.png"
     input1="https://naytikurs.ru/img/1.png"
     alt="Горный пейзаж">
Чтобы предоставить браузеру несколько вариантов изображений, используется атрибут `srcset`. Его нужно добавить в тег `<img>`. В значении этого атрибута перечисляются пути к файлам.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Плотность пикселей: дескриптор 'x'

id: 37935_adaptive-img-density-2

Теперь усложним. У нас есть два изображения: обычное и в два раза качественнее для экранов с высокой плотностью пикселей (Retina). Вам нужно указать браузеру, какое изображение использовать для экранов с плотностью 2x.

CSS
img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 2px solid #eee;
  border-radius: 8px;
}
HTML
<img src="https://naytikurs.ru/img/1.png"
     srcset="https://naytikurs.ru/img/1.png 1x, 
             https://naytikurs.ru/img/2.png input1"
     alt="Горный пейзаж">
В атрибуте `srcset` после URL изображения через пробел ставится дескриптор. Для указания плотности пикселей используется дескриптор `x`. Например: `image-high-res.png 2x`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Дескрипторы ширины: 'w'

id: 37935_adaptive-img-width-3

Кроме плотности пикселей, можно указывать реальную ширину изображения в пикселях. Это дает браузеру еще больше информации для выбора. Укажите правильный дескриптор для изображений шириной 300 и 600 пикселей.

CSS
img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 2px solid #eee;
  border-radius: 8px;
}
HTML
<img src="https://naytikurs.ru/img/4.png"
     srcset="https://naytikurs.ru/img/4.png 300input1, 
             https://naytikurs.ru/img/5.png 600input2"
     alt="Городской пейзаж">
Чтобы указать фактическую ширину файла изображения, используется дескриптор `w`. Например: `image-small.png 300w`. Этот дескриптор всегда используется вместе с атрибутом `sizes`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Атрибут 'sizes': сообщаем размеры

id: 37935_adaptive-img-sizes-4

Когда вы используете дескрипторы `w`, браузеру нужно знать, какой размер займет изображение на странице, чтобы выбрать подходящий файл. Для этого используется атрибут `sizes`. Добавьте его и укажите, что изображение всегда занимает 100% ширины окна просмотра.

CSS
img {
  width: 100%;
  height: auto;
  display: block;
  border: 2px solid #eee;
  border-radius: 8px;
}
HTML
<img src="https://naytikurs.ru/img/4.png"
     srcset="https://naytikurs.ru/img/4.png 300w, 
             https://naytikurs.ru/img/5.png 600w"
     input1="input2"
     alt="Городской пейзаж">
Добавьте атрибут `sizes`. Его значение описывает, какой размер будет у изображения при разной ширине окна. Значение `100vw` означает, что изображение всегда будет занимать 100% ширины области просмотра (viewport width).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Продвинутый 'sizes' с медиа-условием

id: 37935_adaptive-img-sizes-media-5

Изображение не всегда занимает одну и ту же ширину. Часто его размер меняется в зависимости от ширины экрана. Ваша задача — с помощью медиа-условия в атрибуте `sizes` указать, что на экранах до 320px изображение занимает 100% ширины, а на экранах шире — только 50%.

CSS
img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 2px solid #eee;
  border-radius: 8px;
}
HTML
<img src="https://naytikurs.ru/img/4.png"
     srcset="https://naytikurs.ru/img/4.png 300w, 
             https://naytikurs.ru/img/5.png 600w, 
             https://naytikurs.ru/img/6.png 900w"
     sizes="(input1: 320px) 100vw, input2"
     alt="Архитектура">
Синтаксис `sizes` позволяет задавать медиа-условия: `(медиа-условие) размер`. Условия проверяются по порядку. Первое сработавшее определяет размер. В конце указывается размер по умолчанию. Например: `(max-width: 320px) 100vw, 50vw`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Собираем все вместе

id: 37935_adaptive-img-full-6

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

CSS
.container {
  width: 90%;
  margin: 0 auto;
}
img {
  width: 100%;
  height: auto;
  display: block;
}
HTML
<div class="container">
  <img src="https://naytikurs.ru/img/7.png"
       input1="https://naytikurs.ru/img/7.png 320input2, 
               https://naytikurs.ru/img/8.png 640input2, 
               https://naytikurs.ru/img/9.png 1024input2"
       input3="(max-width: 600px) 90vw, 512px"
       alt="Природа">
</div>
Вспомните все, что вы прошли: атрибут `srcset` для списка изображений, дескрипторы `w` для указания их ширины и атрибут `sizes` с медиа-условием для описания размера элемента на странице.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Элемент <picture> для арт-дирекшена

id: 37935_adaptive-img-picture-7

Иногда нужно не просто масштабировать изображение, а показывать совсем другое, например, обрезанное (кадрированное) на маленьких экранах. Для этого используется тег `<picture>`. Ваша задача — обернуть изображение в этот тег и добавить альтернативный источник.

CSS
img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 2px solid #eee;
  border-radius: 8px;
}
HTML
<input1>
  <input2 media="(max-width: 350px)" srcset="https://naytikurs.ru/img/8.png">
  <img src="https://naytikurs.ru/img/9.png" alt="Пейзаж">
</input1>
Используйте тег `<picture>`. Внутрь него помещается один или несколько тегов `<source>` и один тег `<img>`. Тег `<source>` имеет атрибут `srcset` и `media` с медиа-запросом. Тег `<img>` является запасным вариантом, если ни одно из условий в `<source>` не сработало.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру