Srcset html что это

Атрибут srcset

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

• адрес изображения;
• дескриптор ширины, который представляет собой целое положительное число, за которым следует w (например: 600w);
• дескриптор плотности пикселей, представляет собой положительное десятичное число, за которым сразу следует х.

Каждая строка в списке должна содержать обязательно адрес и по желанию дескриптор ширины или плотности пикселей. Если никакой дескриптор не задан, то по умолчанию он равен 1x.

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

Значение по умолчанию

Пример

Браузеры

16

38

21

8

38

37

38

21

8

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

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

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

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

Что такое srcset

Атрибут s rcset предназначен для объявления адаптивных изображений. Браузер самостоятельно анализирует размер экрана пользователя и решает, какую из объявленных картинок (т.е. какой размер картинки) выбрать для демонстрации. Далее вы видите один из стандартных примеров объявления srcset в коде, который позволит разобраться с синтаксисом данного атрибута:

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

В качестве вспомогательного инструмента вы можете воспользоваться онлайн-сервисом MyDevice.io . С помощью него вы узнаете ширину области просмотра текущего дисплея и другую информацию об устройстве.

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

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей

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

У некоторых пользователей при прочтении данной статьи может возникнуть вопрос по поводу того, зачем вообще использовать отзывчивые изображения. Разве не проще загрузить одну картинку и сжимать ее, если это потребуется? Дело в том, что при изначально большом размере картинки (например, 4516px/3Мб) средство оптимизации сайта не сработает так быстро, как этого хотелось бы. Соответственно, скорость загрузки контента несколько замедлится.

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

 picture-920.jpg 920w, picture-1280.jpg 1280w, picture-1600.jpg 1600w" src="https://timeweb.com/ru/community/articles/picture.jpg" alt="Картинка">

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

Принцип обработки адаптивных изображений

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

1. Определение ширины картинки в верстке, то есть ее CSS-пикселей.
2. Умножение полученного значения на соотношение сторон устройства (pixel ratio).
3. Определение реальной ширины и подбор картинки.
4. Алгоритм браузера переходит к массиву с изображениями, в котором ищет максимально близкий по значению файл.

Настройка и тестирование отзывчивых изображений

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

1. Используйте браузер Google Chrome для переключения сайта на мобильную версию. Для этого вам понадобится открыть консоль разработчика, нажав клавишу F12 . Переключитесь на вкладку «‎Network» ‎ и выберите «‎Img» для слежения за всеми загружающимися изображениями. Переключитесь на мобильную версию сайта, кликнув по значку с изображением смартфона.
2. Вверху вы увидите доступные настройки пользовательского разрешения экрана и переключение на популярные устройства, чем я и предлагаю воспользоваться для тестирования загрузки изображений.
3. После обновления страницы изображения начнут загружаться, вы увидите их в списке справа. Ознакомьтесь с показателями, чтобы понять, в каком размере они были загружены и сохраняется ли адаптивность.

Использование атрибута sizes

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

sizes="(max-width: 720px) 100vw, 720px"

Разберем эту строчку, чтобы понимать, как она работает. Браузер считывает код и опускается к этому атрибуту. Если он определяет, что максимальная ширина экрана не превышает 720px, то выводит изображение в полном размере. Если же она больше – выводит в 720px.

Это была общая информация о srcset , который используется для создания адаптивных изображений. Дополнительную информацию об этом атрибуте вы найдете в официальном материале Google по следующей ссылке.

HTMLImageElement.srcset

HTMLImageElement свойство srcset это строка, которая определяет один или несколько строк с источниками изображений, разделённые запятыми ( , ) и условия для их использования. Каждая строка предлагаемого изображения содержит URL картинки и опциональные ширину или пиксельную плотность которые указывают при каких условия это изображение должно быть использовано вместо основной картинки обозначенной свойством src (en-US).

Свойство srcset , вместе с sizes (en-US), критически важный атрибут при разработке адаптивных веб-сайтов, ведь они могут использоваться вместе для создания адаптивных страниц, использующих подходящие изображения при определённых условиях.

Синтаксис

htmlImageElement.srcset = imageCandidateStrings; let srcset = htmlImageElement.srcset;

Значение

A USVString containing a comma-separated list of one or more image candidate strings to be used when determining which image resource to present inside the element represented by the HTMLImageElement .

Each image candidate string must begin with a valid URL referencing a non-interactive graphic resource. This is followed by a comma ( , ) character and then a condition descriptor that indicates the circumstances in which the indicated image should be used. Space characters, other than the whitespace separating the URL and the corresponding condition descriptor, are ignored; this includes both leading and trailing space, as well as space before or after each comma.

If the condition descriptor is not provided (in other words, the image candidate provides only a URL), the candidate is used as the fallback if none of the other candidates match. Otherwise, the condition descriptor may take one of two forms:

• To indicate that the image resource specified by the image candidate string should be used when the image is being rendered with a particular width in pixels, provide a width descriptor comprised the number giving that width in pixels followed by the lower case letter «w». For example, to provide an image resource to be used when the renderer needs a 450 pixel wide image, use the width descriptor string 450w . The specified width must be a positive, non-zero, integer, and must match the intrinsic width of the referenced image.
• Alternatively, you can use a pixel density descriptor, which specifies the condition in which th corresponding image resource should be used as the display’s pixel density. This is written by stating the pixel density as a positive, non-zero floating-point value followed by the lower-case letter «x». As an example, to state that the corresponding image should be used when the pixel density is double the standard density, you can give the pixel density descriptor 2x or 2.0x .

You may mix and match the two types of descriptor. You must not, however, provide multiple image candidate strings that specify the same descriptor. All of the following are valid image candidate strings:

"images/team-photo.jpg 1x, images/team-photo-retina.jpg 2x, images/team-photo-full 2048w"

This string provides versions of an image to be used at the standard pixel density ( 1x ) as well as double that pixel density ( 2x ). Also available is a version of the image for use at a width of 2048 pixels ( 2048w ).

"header640.png 640w, header960.png 960w, header1024.png 1024w, header.png"

This string provides versions of a header image to use when the user agent’s renderer needs an image of width 640px, 960px, or 1024px. An additional, fallback image candidate is provided without any condition at all, to be used for any other width.

"icon32px.png 32w, icon64px.png 64w, icon-retina.png 2x icon-ultra.png 3x icon.svg"

Here, options are provided for an icon at widths of 32px and 64px, as well as at pixel densities of 2x and 3x. A fallback image is provided as an SVG file that should be used in all other cases. Notice that the candidates may use different image types.

For more information on what image formats are available for use in the element, see Image file type and format guide (en-US) .

Пример

HTML

The HTML below indicates that the default image is the 200 pixel wide version of the clock image we use in several places throughout our documentation. Also specified by the srcset attribute is that the 200-pixel version should be used for 1x displays while the 400-pixel version should be used for 2x displays.

div class="box"> img src="/files/16797/clock-demo-200px.png" alt="Clock" srcset=" /files/16864/clock-demo-200px.png 1x, /files/16797/clock-demo-400px.png 2x " /> div> 

CSS

The CSS simply specifies that the image and its surrounding box should be 200 pixels square and should have a simple border around it. Also provided is the word-break attribute, using the break-all value to tell the browser to wrap the string within the width available regardless of where in the string the wrap must occur.

.box  width: 200px; border: 2px solid rgba(150, 150, 150, 255); padding: 0.5em; word-break: break-all; > .box img  width: 200px; > 

JavaScript

The following code is run within a handler for the window ‘s load event. It uses the image’s currentSrc (en-US) property to fetch and display the URL selected by the browser from the srcset .

let box = document.querySelector(".box"); let image = box.querySelector("img"); let newElem = document.createElement("p"); newElem.innerHTML = `Image: $image.currentSrc> `; box.appendChild(newElem); 

Результат

In the displayed output below, the selected URL will correspond with whether your display results in selecting the 1x or the 2x version of the image. If you happen to have both standard and high density displays, try moving this window between them and reloading the page to see the results change.

For additional examples, see our guide to responsive images.

Спецификации

Specification
HTML Standard # dom-img-srcset

Браузерная поддержка

BCD tables only load in the browser

See also

• Images in HTML
• Responsive images
• Image file type and format guide (en-US)

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

HTML атрибуты: srcset, sizes и тег

Проблема адаптивных (отзывчивых) изображений будоражит умы веб-разработчиков уже давно. Это задача, когда нужно показывать большую картинку на больших экранах и маленькую на маленьких. Такая проблема решается через HTML атрибуты srcset и sizes , а также тег . Ниже рассмотрим их подробнее.

Оглавление:

• HTML атрибуты srcset и sizes
• srcset
• sizes + srcset
• Единицы измерения для sizes
• Поддержка браузерами sizes и srcset
• WordPress функции srcset и sizes
• Как отключить srcset и sizes у картинок WordPress
• HTML тег
• 1) Когда используются разные форматы изображений.
• Нескольких размеров (под ретину):
• Аттрибут media
• Аттрибут sizes
• 2) При Художественном оформлении.
• Поддержка бразуерами
• Тег для SEO и почему о нем нужно забыть
• Зачем нужен srcset и почему CSS и JavaScript не подходят?
• Полезные ссылки

HTML атрибуты srcset и sizes

srcset

• srcset — это замена атрибута src — он приоритетнее чем src !
• src атрибут должен быть всегда указан! Это нужно для поисковых роботов.
• src будет использован, только если браузер не поддерживает srcset .
• Firefox и Chrome обрабатывают srcset чуть-чуть по-разному, но общая логика сохраняется. Firefox например может понижать размер картики при уменьшении ширины экрана, а Chrome если загрузил больший размер, то будет использовать его и на меньших разрешениях. Просчет какую картинку выбрать также чуть-чуть отличается.

srcset — содержит сет УРЛов на картинки (через запятую), чтобы браузер мог выбрать наиболее подходящий вариант в зависимости от параметров экрана устройства, с которого просматривается страница.

В srcset можно указать один или несколько URL.

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

Каждая строка в списке должна содержать УРЛ и дескриптор. Если никакой дескриптор не указан, то берется по умолчанию — 1x .

Дескриптор может быть двух типов:

• Физическая ширина картинки в пикселях (actual width). Например 600w , 1000w .
• Плотность пикселей устройства (display density) — DPR (device pixel ratio), например 2x , 3x .

Ваш текущий DPR можно узнать в консоли баразура, заглянув в переменную window.devicePixelRatio .

Дискриптор нужен браузеру, чтобы он мог принять решение какой УРЛ из сета загружать (ведь он заранее ничего не знает о картинке которая находится в УРЛ). А с дескриптором, браузер заранее понимает какая у картинки ширина или для какого DPR она подходит.

Синтаксис srcset имеет следующий вид:

Как это работает на примере:

В этом примере картинка full.jpg не будет использоваться, потому что есть атрибут srcset — браузер выберет наиболее подходящее изображение из srcset.

Какую картинку выберет барузер?

• Если у вашего устройства DPR=1:
  • image-640.jpg — если ширина экрана > 0px и
  • image-960.jpg — если ширина экрана > 640px и
  • image-1200.jpg — если ширина экрана > 960px.
  • image-640.jpg — если ширина экрана > 0px и
  • image-960.jpg — если ширина экрана > 320px и
  • image-1200.jpg — если ширина экрана > 480px.

  Как это работает на примере:

  Какую картинку выберет барузер?

  • image-640.jpg — если DPR устройства = 1.
  • image-1280.jpg — если DPR устройства = 2.
  • image-1920.jpg — если DPR устройства = 3.

  На самсунгах и других телефонах, часто DPR доходит до 4!

  • https://miliutin.ru/tests/srcset/2.html (без sizes)
  • https://miliutin.ru/tests/srcset/1.html (с sizes)
  • https://miliutin.ru/tests/srcset/4.html (с атрибутом sizes)
  • https://imagekitio.github.io/responsive-images-guide/srcset-density.html (DPR)

  sizes + srcset

  Когда изображение занимает лишь часть ширины экрана. srcset без sizes будет недостаточно.

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

  Так стоп! Что? Браузер не знает о лейоуте?

  Логично предположить, что у браузера есть css стили и он может узнать какая ширина в итоге будет у картинки! Но, на момент парсинга тега IMG css стили еще не интерпертированы, макет (лейоут) еще не нарисован! Если браузер будет ждать, пока все таблицы стилей будут разобраны и выполнены, это приведет к задержке загрузки изображений.

  Если для картинки не указаны никакие размеры в css, то sizes также ограничит размер картинки, как это делает атрибут width.

  И если для картинки указать, например, css свойство: max-width:100% , то это свойство перебивает значение атрибута sizes : т.е. если ширина картинки по sizes больше ширины элемента в котором она расположена — её ширина будет равна ширине элемента (max-width:100%). В общем, все также как и для стандартных width и height атрибутов. Но повторюсь еще раз — sizes нужен браузеру — это дополнение к атрибуту srcset.

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

  Использование sizes дает браузеру дополнительную информацию, чтобы правильно выбрать подходящую картинку из srcset и начать её загрузку, как только он увидит тег , не дожидаясь, парсинга css стилей.

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

  Будьте внимательнее к порядку объявления проверок, потому что браузер игнорирует все следующие проверки после первой успешной.

  Элементы в sizes могут иметь:

  • медиа-условие — например, (max-width: 300px) — оно описывает ширину области просмотра. (max-width: 300px) означает, что указанный размер подходит для ширины экрана от 0 до 300 CSS пикселей (включительно). Это похоже на медиа-запрос, но с некоторыми ограничениями. Вы не можете использовать screen или print.
  • Ширина картинки для указанного медиа-условия. Для указания ширины можно использовать разные велечины (px, em, vw), только не %. Подробнее о единицах измерения ниже.

  Рассмотрим такой пример:

  • Если ширина области просмотра превышает 900px, картинка занимает фиксированную ширину 225px.
  • До 900px картинка занимает 33vw, т.е. 33% от ширины окна просмотра.
  • До 700px, картинка занимает 50vw, т.е. 50% от ширины окна просмотра.
  • До 400px, картинка занимает 100vw, т.е. всю ширину окна просмотра.

  На основе этих данных бразуер выберет одну из картинок из сета srcset (включая все проверки с DPR — см описание srcset).

  Единицы измерения для sizes

  Ниже показан весь список возможных единиц измерения, которые можно использовать в атрибуте sizes .

  ед.измерения	значение
  em	размер шрифта элемента
  ex	высота строчных букв шрифта элемента (высота буквы «x»)
  ch	ширина «0» (ZERO, U+0030) для шрифта элемента
  rem	размер шрифта корневого элемента (html)
  vw	1% от ширины viewport (viewport width)
  vh	1% от высоты viewport (viewport height)
  vmin	1% от меньшего размера viewport (меньший из vw или vh)
  vmax	1% от большего размера viewport (больший из vw или vh)

  Поддержка браузерами sizes и srcset

  WordPress функции srcset и sizes

  • wp_get_attachment_image_srcset()
  • wp_get_attachment_image_sizes()

  Как отключить srcset и sizes у картинок WordPress

  /** * Отключаем srcset и sizes для картинок в WordPress. * * @version 1.0 */ if( 'Disable srcset/sizes' ) < // Отменяем srcset - выходим сразу, этот фильтр лучше чем 'wp_calculate_image_srcset' add_filter( 'wp_calculate_image_srcset_meta', '__return_null' ); // Отменяем sizes - это поздний фильтр, но раннего как для srcset пока нет. add_filter( 'wp_calculate_image_sizes', '__return_false', 99 ); // Удаляем фильтр, который добавляет srcset ко всем картинкам в тексте записи // WP < 5.5 remove_filter( 'the_content', 'wp_make_content_images_responsive' ); // WP >5.5 add_filter( 'wp_img_tag_add_srcset_and_sizes_attr', '__return_false' ); >

  Дополнительный фильтр, который удаляет атрибуты srcset и sizes в последний момент. в 99% случаев этот хук не нужен, можно использовать на всякий случай

  // Очищаем атрибуты `srcset` и `sizes`, если по каким-то причинам они остались. add_filter( 'wp_get_attachment_image_attributes', 'unset_attach_srcset_attr', 99 ); function unset_attach_srcset_attr( $attr ) < foreach( array('sizes','srcset') as $key )< if( isset($attr[ $key ]) ) unset($attr[ $key ]); >return $attr; >

  HTML тег

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

  — это обертка для элементов и , которая дает браузеру возможность выбрать источник.

  тег тут очень важен — без него не может существовать. Это элемент для которого будут применены данные из после того как будет выбран подходящий .

  Сам по себе тег – это более развитый аналог тега и обладает интуитивно понятным синтаксисом.

  выигрывает у атрибутов sizes и srcset в в двух случаях:

  1) Когда используются разные форматы изображений.

  позволяет использовать новые форматы (webp, avif) и не бояться за поддержку старых браузеров. Для этого можно указать MIME-тип картинки в type атрибуте, браузер «возьмет» первый поддерживаемый тип.

  Выбор/анализ подходящего варианта идет сверху вниз (будет использован первый подходходящий вариант):

  • Тип изображение указанного в должен соответствовать типу указанному в type .
  • Не используйте атрибут media , если вам не нужно художественное оформление.
  • Также можно использовать srcset и sizes .

  Нескольких размеров (под ретину):

  Аттрибут media

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

  Аттрибут sizes

  Позволяет указать размер картинки (width) для указанного размера экрана:

  2) При Художественном оформлении.

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

  Например у нас есть картинка, которая нуждается в художественном оформлении:

  Исправим её с помощью .

  

  Комментарии к коду:

  • media атрибут элемента содержит медиа-условие, используя которое бразуер выбирает какую картинку нужно использовать. Из примера выше, если ширина экрана (viewport) 800 или меньше, то будет выведено изображение первого элемента , если больше — второго.
  • srcset атрибут содержит URL картинки. Здесь также можно указать группу предписаний и добавить атрибут sizes , однако используя тег это вряд ли будет продуктивно.
  • с атрибутами src и alt перед закрывающем тегом , должен быть обязательно указан, иначе изображения не появятся! Этот тег нужен для роботов и когда браузер не может выбрать изображение по указанным условиям.

  Показывать разные изображение (художественное оформление) можно и через srcset , но через удобнее.

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

  Тег для SEO и почему о нем нужно забыть

  С помощью этого тега легко и безболезненно переходить на внедрение альтернативных графических форматов. Достаточно просто перечислить внутри этого тега наши картинки (jpeg, png, webp) и браузер сам примет решение, какое из них взять.

  Если вы решите серьезно заниматься технической оптимизацией, то следует забыть про тег

  Потому что, когда вы начнете формировать вывод с тегом то же самое, что через тег – это даст минимум троекратное увеличение узлов в DOM-дереве на каждое изображение. Верхняя граница вашего DOM-дерева оптимально должна быть в среднем 1500 узлов. У многих эта граница превышена. А каждый узел DOM-дерева – это расход памяти и замедление скриптов.

  Зачем нужен srcset и почему CSS и JavaScript не подходят?

  При загрузке страницы, браузер начинает загрузку изображений до загрузки и интерпритации CSS и JavaScript. Такая техника уменьшает время загрузки страницы, в среднем, на 20%. Но она не подходит для создания адаптивных изображений, для этого и был создан srcset атрибут.

  Например, невозможно было бы загрузить элемент , затем определить ширину экрана при помощи JavaScript и динамически изменить URL картинки. Изначальное изображение было бы уже загружено (или было бы отправлено к загрузке) к моменту загрузки его меньшей версии.

  Полезные ссылки

  • Про атрибут srcset: https://serpstat.com/ru/blog/kak-ispolzovat-atribut-srcset-tega-img/
  • Про лейзи лоад и srcset https://youtube.com/watch?v=v8yM0-VIM30&t=1633s
  • https://imagekit.io/responsive-images/
  Похожие публикации:

  1. Tax no что это
  2. Как исправить ошибку на сайте
  3. Как раздать интернет с ноутбука на компьютер по кабелю
  4. Что делает кнопка sl на клавиатуре bloody