Адаптивные изображения – масштабирование

Адаптивные изображения – масштабирование

Адаптивные методы изображения, такие как srcset, sizes и media HTML атрибуты, позволяют различным масштабируемым изображениям доставиться в зависимости от размера и разрешения обращающегося устройства. Это позволяет дополнительно оптимизировать доставку изображения, чтобы улучшить общую производительность вашего сайта или приложения.

Вместо того, чтобы взять одно изображение и сделать его адаптивным с помощью CSS, которое затем доставляется на все устройства, вы можете поставить совершенно разные изображения на основе запрашивающего устройства. Это выгодно благодаря значительным улучшениям производительности, которые могут быть достигнуты. Изображения занимают 51% от среднего размера веб-страницы, что означает  масштабирование изображения имеет решающее значение, чтобы снизить размеры веб-страницы.

Что такое атрибуты srcset, sizes и media?

Атрибуты srcset, sizes и media позволяют расширять элементы <img> и <source>, предлагая браузеру дополнительную информацию, такую ​​как разные источники изображений, а также разные размеры экрана и условия работы мультимедиа. Это дает браузерам возможность отображать определенное изображение при соблюдении правила.

Атрибут srcset позволяет определять источники изображения. Это может быть сделано путем определения абсолютного или относительного пути к изображениям и, возможно, дескрипторов плотности пикселей (например, 1x, 2x и 3x). Этот атрибут может использоваться в элементах <img> и <source>.

И sizes, и media практически идентичны. Оба позволяют определять разные размеры дисплея в различных условиях. Однако атрибут sizes позволяет определить размер изображения отдельно или в зависимости от состояния носителя. Атрибут sizes может использоваться в элементах <img> и <source>, тогда как атрибут media может использоваться в элементе <source>, но не в элементе <img>.

Во всех случаях элемент <source> должен быть прямым потомком элемента <picture>.

Как использовать srcset, sizes и media атрибуты

Для того, чтобы понять основы, все, что на самом деле требуется, чтобы вставить изображение – это тег <IMG> и атрибут src, например:

<img src="/img/blog/respive-images.png">

Атрибут src сообщит браузеру, где сделать запрос изображения. Если абсолютный путь определен, как показано выше, браузер сделает запрос, используя схему и имя хоста веб-сайта, где размещен элемент.

Однако настоятельно рекомендуется добавить атрибут alt, так как этот атрибут важен для поисковых систем и программ чтения с экрана. Атрибуты ширины и высоты могут определить <IMG> src размер, но они также могут привести к тому, что изображение будет больше, чем устройство для просмотра. Вот почему обычно вместо атрибута class можно увидеть стиль изображения, например:

<img src="/img/blog/responsive-images.png" alt="responsive

Проблема с использованием элемента <img> выше заключается в том, что он приведет к тому, что одно изображение будет доставлено на все устройства. Хотя использование CSS для масштабирования изображения для соответствия всем устройствам делает его отзывчивым, что в нашем случае достигается с помощью класса img-Fluid, это приведет к значительному количеству ненужных данных. Обслуживание немасштабированного изображения приведет к снижению производительности, увеличению общего размера страницы и увеличению пропускной способности. Здесь на помощь приходят отзывчивый srcset, размеры и медиа-атрибуты.

srcset

Атрибут srcset может использоваться в элементах <img> и <source>. Мы просто добавляем ширину изображений после имени файла, например, 730w, 610w и 350w. Однако проблема этого метода состоит в том, что вы полагаетесь исключительно на размер окна просмотра, чтобы сообщить браузеру, какое изображение требуется для загрузки, например:

<img srcset="/img/blog/responsive-images-lg.png 730w,
/img/blog/responsive-images-md.png 610w,
/img/blog/responsive-images-sm.png 350w"
src="/img/blog/reponsive-images.png"
alt="responsive images">

<picture>
    <source srcset="/img/blog/responsive-images-lg.png 730w">
    <source srcset="/img/blog/responsive-images-md.png 610w">
    <source srcset="/img/blog/responsive-images-sm.png 350w">
    <img src="/img/blog/reponsive-images.png" alt="responsive images" class="img-fluid rounded">
</picture>

К счастью для нас, это место, где sizes и media атрибуты вступают в игру.

sizes

Атрибут sizes сообщает браузеру, каким именно будет размер изображения по отношению к размеру окна просмотра в условиях мультимедиа, которое аналогичны медиазапросам. Это может быть использовано вместе с srcset, например:

<img sizes="(min-width: 1200px) 730w,
(max-width: 1199px) 610w,
(max-width: 380px) 350w"
srcset="/img/blog/responsive-images-lg.png 730w,
/img/blog/responsive-images-md.png 610w,
/img/blog/responsive-images-sm.png 350w"
src="/img/blog/reponsive-images.png"
alt="responsive images">

<picture>
<source sizes="(min-width: 1200px) 730w" srcset="/img/blog/responsive-images-lg.png 730w">
<source sizes="(max-width: 1199px) 610w" srcset="/img/blog/responsive-images-md.png 610w">
<source sizes="(max-width: 380px) 350w" srcset="/img/blog/responsive-images-sm.png 350w">
<img src="/img/blog/reponsive-images.png" alt="responsive images" class="img-fluid rounded">
</picture>

Атрибут sizes очень полезен при использовании элемента <img>, однако, если вы используете элемент <source>, часто имеет смысл вместо этого использовать атрибут media.

media

Атрибут media позволяет определить условие мультимедиа. Его можно использовать в элементе <source>, если он является прямым потомком элемента <picture>. Если условие истинно, то используется элемент <source>, если ложно, оно пропускается, например:

<picture>
<source media="(min-width: 1200px)" srcset="/img/blog/responsive-images-lg.png">
<source media="(max-width: 1199px)" srcset="/img/blog/responsive-images-md.png">
<source media="(max-width: 380px)" srcset="/img/blog/responsive-images-sm.png">
<img src="/img/blog/reponsive-images.png" alt="responsive images" class="img-fluid rounded">
</picture>

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

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

Дескрипторы плотности пикселей, также называемые дескрипторами отображения или плотности экрана, являются чрезвычайно полезным способом отображения высококачественных изображений на дисплеях с высоким разрешением. Эти дескрипторы определены с использованием 1x, 2x и 3x. Они позволяют отображать изображение, которое в два или три раза больше исходного, сохраняя те же размеры, что и исходное изображение, например:

<img sizes="(min-width: 1200px) 730w,
(max-width: 1199px) 610w,
(max-width: 380px) 350w"
srcset="/img/blog/responsive-images-lg.png 730w 1x,
/img/blog/responsive-images-lg@2x.png 730w 2x,
/img/blog/responsive-images-md.png 610w 1x,
/img/blog/responsive-images-md@2x.png 610w 2x,
/img/blog/responsive-images-sm.png 350w 1x,
/img/blog/responsive-images-sm@2x.png 350w 2x"
src="/img/blog/reponsive-images.png"
alt="responsive images">

<picture>
    <source media="(min-width: 1200px)" srcset="/img/blog/responsive-images-lg.png 1x, /img/blog/responsive-images-lg@2x.png 2x">
    <source media="(max-width: 1199px)" srcset="/img/blog/responsive-images-md.png 1x, /img/blog/responsive-images-md@2x.png 2x">
    <source media="(max-width: 380px)" srcset="/img/blog/responsive-images-sm.png 1x, /img/blog/responsive-images-sm@2x.png 2x">
    <img src="/img/blog/reponsive-images.png" alt="responsive images" class="img-fluid rounded">
</picture>

Размеры или мультимедийные атрибуты не требуются при использовании дескрипторов плотности пикселей, однако фактическое 2x или 3x изображение должно быть в два или три раза больше. Вы можете еще больше уменьшить размер масштабированных изображений, используя формат изображений следующего поколения, WebP.

WebP Format

Наконец, давайте не будем забывать о формате WebP. Изображения в формате WebP в среднем на 26% меньше, чем изображения в формате PNG, и на 25-34% меньше, чем изображения в формате JPEG. Это означает, что простое преобразование ваших изображений в WebP может уменьшить размер ваших страниц примерно на 25%. Однако изображения в формате WebP не принимаются каждым браузером, поэтому атрибут type становится полезным в элементе <source>, например:

<picture>
<source type="image/webp" media="(min-width: 1200px)" srcset="/img/blog/responsive-images-lg.webp 1x, /img/blog/responsive-images-lg@2x.webp 2x">
<source type="image/webp" media="(max-width: 1199px)" srcset="/img/blog/responsive-images-md.webp 1x, /img/blog/responsive-images-md@2x.webp 2x">
<source type="image/webp" media="(max-width: 380px)" srcset="/img/blog/responsive-images-sm.webp 1x, /img/blog/responsive-images-sm@2x.webp 2x">
<source type="image/png" media="(min-width: 1200px)" srcset="/img/blog/responsive-images-lg.png 1x, /img/blog/responsive-images-lg@2x.png 2x">
<source type="image/png" media="(max-width: 1199px)" srcset="/img/blog/responsive-images-md.png 1x, /img/blog/responsive-images-md@2x.png 2x">
<source type="image/png" media="(max-width: 380px)" srcset="/img/blog/responsive-images-sm.png 1x, /img/blog/responsive-images-sm@2x.png 2x">
<img src="/img/blog/reponsive-images.png" alt="responsive images" class="img-fluid rounded">
</picture>

Как мы уже знаем, <source> будет использоваться только в том случае, если условие истинно, что означает, что в нашем примере выше изображения WebP будут использоваться там, где они приняты, изображения PNG будут использоваться там, где изображения WebP не принимаются, и если все остальное терпит неудачу будет, использован элемент <img>. Класс, примененный к изображению, используемому в элементе <source>, будет извлечен из атрибута class в элементе <img>.

Поддержка браузера

Большинство современных веб-браузеров поддерживают srcset, кроме Internet Explorer и Opera Mini. Однако Microsoft добавила поддержку этого атрибута в браузер Edge. Если браузер не поддерживает этот атрибут, браузер просто вернется к исходному изображению. При использовании тега <img> резервное изображение определяется в атрибуте src. При использовании элемента <picture> запасное изображение определяется в элементе <img>. Это означает, что на самом деле нет недостатка в использовании атрибутов с точки зрения браузера.

Почему адаптивные изображения важны?

Причина, по которой адаптивные изображения так важны, сводится к размеру файлов. На маленьких устройствах нет причин загружать изображение размером 1460 x 730 пикселей. Это пустая трата пропускной способности и ресурсов.

Если размер небольшого устройства, например телефона, составляет 375 пикселей, размер масштабированного изображения responseive-images-sm.jpg будет 10,6 КБ. Если мы сравним это с исходным немасштабированным изображением responseive-images.jpg (которое CSS должен был бы уменьшить) при 30,7 КБ, то это уменьшение на 65,47%! Это будет зависеть от того, используются ли дескрипторы плотности пикселей, однако обслуживание масштабированных изображений всегда будет уменьшать общий вес страницы.

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

Итог

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


.

  • December 13, 2019