Как использовать 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 для текстового описания.

<img src="image.png" alt="Описание изображения" />

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

img {
    max-width: 100%;
    height: auto;
}

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

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

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

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

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

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

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

Пример кода:

<img
  src="image-small.png"
  srcset="image-small.png 320w, image-medium.png 800w, image-large.png 1200w"
  alt="Описание изображения"
/>

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

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

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

<img
  src="image-defaultdpi.png"
  srcset="image-hidpi.png 2x, image-higherdpi.png 4x"
  alt="Описание изображения"
/>

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

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

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

Пример кода:

<img
  src="image-small.png"
  srcset="image-small.png 320w, image-medium.png 800w, image-large.png 1200w"
  sizes="80vw"
  alt="Описание изображения"
/>

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

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

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

<img
  src="image-small.png"
  srcset="image-small.png 320w, image-medium.png 800w, image-large.png 1200w"
  sizes="(min-width: 60rem) 80vw, 100vw"
  alt="Описание изображения"
/>

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

<img
  src="image-small.png"
  srcset="image-small.png 320w, image-medium.png 800w, image-large.png 1200w"
  sizes="(min-width: 60rem) 80vw, (min-width: 40rem) 90vw, 100vw"
  alt="Описание изображения"
/>

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

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

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

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

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

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

Пример кода:

<picture>
  <source
    media="(orientation: landscape)"
    srcset="image-small.png 320w, image-medium.png 800w, image-large.png 1200w"
    sizes="(min-width: 60rem) 80vw, (min-width: 40rem) 90vw, 100vw"
  />
  <source
    media="(orientation: portrait)"
    srcset="image-small-portrait.png 160w, image-medium-portrait.png 400w, image-large-portrait.png 600w"
    sizes="(min-width: 60rem) 80vw, (min-width: 40rem) 90vw, 100vw"
  />
  <img src="image-small.png" alt="Описание изображения" />
</picture>

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

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

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

Пример кода:

<picture>
  <source
    srcset="image-small.png 320w, image-medium.png 800w, image-large.png 1200w"
    sizes="(min

-width: 60rem) 80vw, (min-width: 40rem) 90vw, 100vw"
  />
  <img src="image-small.png" alt="Описание изображения" />
</picture>

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

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

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

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

Заключение

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