Как использовать HTML5 <picture>, srcset и sizes для адаптивных изображений

В этом руководстве мы рассмотрим, что могут делать атрибуты srcset и sizes, как использовать их с элементами <img> или <picture>, и как выбрать подходящую комбинацию.

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

Как работает <picture>?

Он работает аналогично элементам <audio> и <video>, позволяя помещать несколько тегов <source> внутри родительского элемента <picture>, каждый из которых использует атрибуты srcset и sizes для указания различных файлов изображений и условий, при которых они должны загружаться.

Тем не менее, иногда элемент <picture> дает нам больше возможностей, чем нужно для достижения необходимой адаптивности. Иногда достаточно просто использовать обычный элемент <img>, используя атрибуты srcset и sizes внутри.

Что будет в этом руководстве

В этом руководстве мы разберем возможные путаницы. Мы увидим, что могут делать атрибуты srcset и sizes, как использовать их с элементами <img> или <picture>, и как узнать, какой вариант лучше выбрать.

1. Начните с обычного элемента <img>

Это наш исходный пункт – обычный элемент <img> с атрибутом alt для текстового описания.

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

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

2. Как использовать srcset для набора изображений

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

Именно для этого предназначен атрибут srcset: для набора изображений, а не одного изображения через атрибут src.

Переключение по ширине

Когда изображение загружается только с обычным атрибутом src, браузер не знает, насколько оно широкое, пока оно не загрузится. С атрибутом srcset мы можем сообщить браузеру, насколько широки наши изображения заранее, и он сможет использовать эту информацию, чтобы загрузить наиболее подходящее изображение в зависимости от размера экрана.

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

Пример кода:

Важно включить ваше изображение по умолчанию в srcset вместе с его шириной. Если этого не сделать, браузер не включит его в список опций, и оно никогда не будет загружаться при любом размере экрана.

Переключение по плотности пикселей

Вы также можете использовать srcset, чтобы загружать изображения в зависимости от их DPI, но вместо указания их ширины нужно указать их плотность пикселей в виде [density]x:

Однако нельзя использовать плотность пикселей и ширину в одном атрибуте srcset, и нельзя использовать спецификации плотности пикселей с атрибутом sizes, который мы рассмотрим далее.

3. Использование sizes для управления макетом изображения

Атрибут sizes позволяет указать ширину для макета изображения. Это отдельная концепция от реальных ширин изображений, указанных в атрибуте srcset. Ширина, указанная в sizes, связана только с макетом и может рассматриваться как создание пустых мест, в которые браузер может вставить изображения из srcset.

Пример кода:

В этом примере браузер все равно будет выбирать между маленькими, средними и большими изображениями в зависимости от размера экрана, но выбранное изображение будет отображаться на ширину 80vw.

Добавление условий медиа

Вы можете добавлять условия медиа для изменения макета изображения. Например, можно изменить макет изображения, если ширина экрана составляет не менее 60rem:

Вы также можете добавить другие размеры и условия медиа, например:

4. Когда использовать тег <picture>

Кроме обсуждения srcset и sizes, может возникнуть интерес к элементу <picture> и тому, как он вписывается в картину.

Использование "направления изображения"

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

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

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

Пример кода:

5. Как использовать <picture>

Элемент <picture> не является самостоятельным; он предназначен для обертки элемента <img> и одного или нескольких элементов <source>. Цель <source> элементов – предоставить браузеру дополнительную информацию для выбора подходящего файла и размера для отображения через <img>.

Чтобы соответствовать требованиям элемента <picture>, элемент <img> должен быть его непосредственным дочерним элементом и не должен иметь свои собственные атрибуты srcset и sizes. Вместо этого эти функции передаются элементам <source>. Элемент <img> также должен иметь атрибуты src и alt.

Пример кода:

6. Поддержка браузерами элемента <picture>

Элемент <picture> хорошо поддерживается в современных браузерах, включая Google Chrome, Firefox, Safari, Edge и Opera. Старые браузеры, которые не поддерживают элемент <picture>, просто проигнорируют его, и в этом случае отображается стандартное изображение, указанное в элементе <img>.

7. Полезные ресурсы

• MDN Web Docs –
• MDN Web Docs –
• Курс по адаптивным изображениям

Заключение

Теперь вы знаете, как эффективно использовать элемент <picture>, атрибуты srcset и sizes для создания адаптивных изображений. Эти инструменты помогут улучшить производительность вашего веб-сайта и предложить лучший пользовательский опыт за счет загрузки наиболее подходящих изображений в зависимости от различных условий экрана.