Что такое атрибут srcset в теге IMG и как его использовать?

Ответ 1

Короче говоря, Srcset - это новый атрибут, который позволяет вам указывать разные типы изображений для разных размеров экрана/ориентации/типов отображения. Использование действительно просто, вы просто предоставляете множество разных изображений, разделяя их запятой следующим образом: <img src="image.jpg" alt="image" srcset="<img> <descriptor>, ..., <img_n> <descriptor_n>">. Вот пример: srcset="image.jpg 160w, image2.jpg 320w, image3.jpg 2x"

Это более длинный ответ, который объясняет вещи более подробно.

Разница между srcset и изображением. Оба Srcset и picture делают примерно одни и те же вещи, но есть тонкая разница: picture определяет, какое изображение должен использовать браузер, тогда как Srcset дает браузеру выбор. Для выбора этого выбора можно использовать много вещей, таких как размер видового экрана, предпочтения пользователей, состояние сети и т.д. Поддержка Srcset довольно хороша и почти все текущие браузеры поддерживают ее более или менее. Ситуация с элементом picture - это немного хуже.

Дескрипторы - это просто способ показать, какой образ скрыт за ресурсом. Существуют различные типы дескрипторов:

• дескриптор плотности. srcset="image.jpg, image-2X.jpg 2x" Значения плотности дисплея - 1x, 2x и т.д. - называются дескрипторами плотности отображения. Если дескриптор плотности отображения не указан, предполагается, что он равен 1x. Хороший вариант для показа сетчатки.
• дескриптор ширины. srcset="image-240.jpg 240w, image-640.jpg 640w". Я уверен, что это самоочевидно. Единственная проблема заключается в том, что сам по себе дескриптор ширины не очень полезен. Почему? прочитайте здесь
• дескриптор размера, что имеет смысл, если вы используете дескриптор ширины. srcset="image-160.jpg 160w, image-320.jpg 320w, image-640.jpg 640w, image-1280.jpg 1280w" sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px">. Инструкции для браузера будут выглядеть так: (max-width: 480px) 100vw - если область просмотра имеет ширину 480 пикселей или меньше, изображение будет составлять 100% ширины окна просмотра. (max-width: 900px) 33vw - если видовое окно имеет ширину 480 пикселей или меньше, это правило никогда не будет достигнуто из-за предыдущего состояния медиа. И 254px - это когда нет никаких условий для мультимедиа, длина считается значением по умолчанию, используемым, когда ни одно из других условий мультимедиа не выполняется.

Только для полноты добавим здесь, что есть атрибут image-set() для фонового изображения в CSS и некоторая другая полезная ссылка здесь

Ответ 2

Вот хорошая статья по атрибуту srcset и как его использовать. srcet позволяет вам объявлять набор изображений для отображения в разных размерах видового экрана. Вам просто нужно сохранять и отображать изображения с разными разрешениями, например. banner-phone-HD.jpeg будет самым высоким разрешением.

Exmaple:

<img alt="my awesome image"
src="banner.jpeg"
srcset="banner-HD.jpeg 2x, banner-phone.jpeg 640w, banner-phone-HD.jpeg 640w 2x">

Вышеупомянутое будет обслуживать banner-phone.jpeg для устройств с шириной окна просмотра под 640px, banner-phone-HD.jpeg для небольших устройств с высоким разрешением DPI, banner-HD.jpeg для устройств с высоким разрешением DPI с экранами более 640 пикселей и banner.jpeg ко всему остальному.

Существуют также другие методы, такие как CSS-медиа-запросы, которые вы можете использовать для получения того же эффекта.

Мне не известно о каких-либо плагинах JQuery, которые помогли бы с этим.