Что такое srcset
Srcset — это HTML-атрибут, позволяющий указать набор изображений, из которых впоследствии браузер выберет одно, наиболее подходящее под конкретное устройство и разрешение экрана.
Рассмотрим пример (форматирование в столбец приведено для удобства — значения могут быть записаны в строку):
<img
src="default.jpg"
srcset="
small.jpg 480w,
medium.jpg 800w,
large.jpg 1200w"
sizes="
(max-width: 600px) 480px,
(max-width: 1200px) 800px,
1200px"
alt="Пример">Здесь:
- в src указан файл, который загрузится, если браузер не поддерживает srcset;
- srcset содержит версии изображений с указанием их ширины в пикселях (вместо px указывается w). Записи разделяются запятой$
- атрибут sizes часто используется вместе с srcset. В нем содержатся условие по ширине экрана и размер изображения (через пробел), который необходимо выбрать, если условие истинно. Последний размер (в примере — 1200px) применяется, если истинных условий нет;
- в alt указано текстовое описание.
Таким образом, если ширина экрана 600px, то браузер рассмотрит значение sizes «(max-width: 600px) 480px» и выберет файл small.jpg. Если бы атрибут sizes отсутствовал, то браузер выбрал бы то изображение, ширина которого больше или равна 600px — файл medium.jpg.
Для чего нужны адаптивные изображения
Адаптивные изображения — это визуальный контент, который может автоматически подстраиваться под устройство пользователя.
Зачем они нужны:
- для повышения скорости загрузки страницы. Чем больше картинка, тем больше времени нужно для ее загрузки. Это особенно заметно, когда скорость соединения низкая. Если же используются адаптивные изображения, то, например, смартфон может загрузить картинку шириной 400px вместо 1200px, что снизит общее время открытия сайта. Скорость загрузки также влияет на качество SEO-продвижения;
- для улучшения пользовательского опыта. Помимо того, что адаптивные изображения повышают скорость загрузки страницы, они позволяют управлять расположением блоков на разных устройствах (например, не допускать появления незаполненных пространств) и демонстрировать пользователям картинки высокого качества.
Используем на примерах
Стандартный пример применения srcset уже рассмотрели, приведем еще два, которые иллюстрируют другие возможности атрибута:
/* С помощью srcset можно указать файлы для экранов с разной плотностью пикселей — после файла
через пробел записывается положительное число с «x».
Указывать одновременно плотность пикселей и ширину нельзя.
*/
<img src="image.jpg"
srcset="
image-1x.jpg 1x,
image-2x.jpg 2x"
alt="Пример">
/* Также возможны комбинации с другими атрибутами, например loading, для большего повышения скорости загрузки сайта.*/
<img src="image.jpg"
srcset="
image-1x.jpg 1x,
image-2x.jpg 2x"
loading="lazy"
alt="Пример">
/* Так файл не будет загружаться до тех пор, пока не попадет в область видимости. */Принцип обработки адаптивных изображений
При выборе файла браузер учитывает:
- доступное пространство и значения в sizes — в соответствии с этими факторами выбирается нужный файл из srcset;
- плотность пикселей экрана устройства;
- скорость интернета — если она низкая, то браузер может выбрать меньшее из изображений.
Подведем итоги
- Адаптивные изображения повышают скорость загрузки и улучшают пользовательский опыт.
- HTML-атрибут srcset используется для реализации адаптивных изображений на страницах в интернете.
- Srcset позволяет указать несколько версий изображения, наиболее подходящая из которых будет отображена посетителю сайта.
- Часто совместно с srcset используется sizes. Этот атрибут содержит условия по ширине экрана и подходящие к ним версии изображений.