Проблема адаптивных изображений давно беспокоит веб-разработчиков. Она заключается в том, что необходимо отображать большие изображения на больших экранах и маленькие — на малых. Эта задача решается с помощью HTML-атрибутов srcset и sizes, а также тега <picture>. Давайте рассмотрим их подробнее.
Содержание
HTML-атрибуты srcset и sizes
srcset
sizes + srcset
Единицы измерения для sizes
Поддержка браузерами sizes и srcset
Функции WordPress srcset и sizes
Как отключить srcset и sizes для изображений в WordPress
HTML-тег <picture>
1) При использовании различных форматов изображений
Множественные размеры (для дисплеев Retina)
Атрибут media
Атрибут sizes
2) Художественный стиль
Поддержка браузерами
Тег <picture> для SEO и почему стоит о нем забыть
Зачем нужен srcset, и почему CSS и JavaScript тут не подойдут?
HTML-АТРИБУТЫ SRCSET И SIZES
SRCSET
srcset заменяет атрибут src — он имеет приоритет перед ним!
Атрибут src всегда должен быть указан! Это необходимо для поисковых систем.
src будет использоваться только в случае, если браузер не поддерживает srcset.
Браузеры Firefox и Chrome немного по-разному обрабатывают srcset, но общая логика сохраняется. Например, Firefox может уменьшить размер изображения при уменьшении ширины экрана, в то время как Chrome может использовать загруженное более крупное изображение даже на меньших разрешениях.
Атрибут srcset содержит набор URL-адресов для изображений (разделенных запятыми), чтобы браузер мог выбрать наиболее подходящий вариант в зависимости от параметров экрана устройства.
В srcset можно указать один или несколько URL.
Каждая строка в списке должна содержать URL и дескриптор. Если дескриптор не указан, используется значение по умолчанию — 1x.
Дескриптор может быть двух типов:
Физическая ширина изображения в пикселях (например, 600w, 1000w).
Соотношение пикселей устройства (DPR) — например, 2x, 3x.
Вы можете узнать текущее значение DPR в консоли браузера, проверив переменную window.devicePixelRatio.
Синтаксис srcset выглядит так:
КАК ЭТО РАБОТАЕТ НА ПРИМЕРЕ:
В этом примере изображение full.jpg не будет использовано, так как есть атрибут srcset — браузер выберет наиболее подходящее изображение из srcset.
Какое изображение выберет браузер?
Если ваш DPR=1:
image-640.jpg — если ширина экрана больше 0px и меньше или равна 640px.
image-960.jpg — если ширина экрана больше 640px и меньше или равна 960px.
image-1200.jpg — если ширина экрана больше 960px.
Если ваш DPR=2:
image-640.jpg — если ширина экрана больше 0px и меньше или равна 320px (640/2).
image-960.jpg — если ширина экрана больше 320px и меньше или равна 480px (960/2).
image-1200.jpg — если ширина экрана больше 480px.
KAK ЭТО РАБОТАЕТ В ДРУГОМ ПРИМЕРЕ:
Какое изображение выберет браузер?
image-640.jpg — если DPR=1.
image-1280.jpg — если DPR=2.
image-1920.jpg — если DPR=3.
На устройствах, таких как Samsung и других телефонах, DPR часто достигает 4!
SIZES + SRCSET
Когда изображение занимает только часть ширины экрана, одного srcset недостаточно.
Так как браузер не знает о расположении элементов (как выглядит страница), он предположит, что изображение занимает всю ширину экрана. Но если изображение занимает лишь часть, может загрузиться больше данных, чем нужно.
Подождите минуту! Разве браузер не знает о стилях CSS и не может определить конечную ширину изображения?
Логично предположить, что браузер может обрабатывать CSS стили. Однако на этапе разбора тега IMG CSS стили еще не интерпретированы — внешний вид страницы еще не формируется! Если браузер будет ждать, пока все стили будут разобраны, это замедлит загрузку изображений.
Если размер�� изображения не указаны в CSS, то атрибут sizes также будет ограничивать размер изображения, как и атрибут width.
Если в CSS указано свойство max-width:100%, то это свойство будет приоритетным, и ширина изображения согласно sizes не будет превышать ширину элемента, в который оно помещено (max-width:100%).
В общем, sizes нужен браузеру — он является дополнением к атрибуту srcset.
Синтаксис:
Обратите внимание, что последнее значение не имеет условия media — это значение по умолчанию. Оно будет использоваться, если ни одно из предыдущих условий не сработало.
Будьте внимательны с порядком объявления условий. Браузер игнорирует все последующие условия после первого успешного.
ЕДИНИЦЫ ИЗМЕРЕНИЯ ДЛЯ SIZES
Вот полный список возможных единиц измерения, которые можно использовать в атрибуте sizes:
em — размер шрифта элемента
ex — высота строчной буквы в шрифте элемента (высота буквы "x")
ch — ширина символа "0" в шрифте элемента
rem — размер шрифта корневого элемента (html)
vw — 1% ширины области просмотра
vh — 1% высоты области просмотра
vmin — 1% меньшего измерения из ширины или высоты области просмотра
vmax — 1% большего измерения из ширины или высоты области просмотра
ПОДДЕРЖКА БРАУЗЕРАМИ SIZES И SRCSET
Браузеры, как правило, хорошо поддерживают атрибуты sizes и srcset, что позволяет разработчикам использовать мощные адаптивные изображения без проблем.
ФУНКЦИИ WORDPRESS SRCSET И SIZES
В 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 — это поздний фильтр
add_filter('wp_calculate_image_sizes', '__return_false', 99);
// Удалить фильтр, который добавляет srcset ко всем изображениям в содержимом поста
remove_filter('the_content', 'wp_make_content_images_responsive');
add_filter('wp_img_tag_add_srcset_and_sizes_attr', '__return_false');
}
// Дополнительный фильтр, который удаляет атрибуты 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-ТЕГ
Для отображения различных изображений в зависимости от устройства (ширины экрана) также можно использовать тег <picture>.
Тег <picture> является контейнером для элементов <source> и <img>, который позволяет браузеру выбрать источник.
Тег <img> играет здесь важную роль — без него <picture> не может существовать. Это элемент, для которого данные из <source> будут применены после выбора подходящего источника.
Тег <picture> является более продвинутой альтернативой тегу <img> и имеет интуитивно понятный синтаксис.
Тег <picture> превосходит атрибуты sizes и srcset в <img> в двух случаях:
1) ПРИ ИСПОЛЬЗОВАНИИ РАЗЛИЧНЫХ ФОРМАТОВ ИЗОБРАЖЕНИЙ
Тег <picture> позволяет использовать новые форматы (webp, avif) без беспокойства о поддержке старых браузеров. Для этого в атрибуте type указывается тип изображения, и браузер использует первый поддерживаемый тип.
Выбор подходящего варианта происходит сверху вниз (будет использован первый подходящий вариант):
Тип изображения, указанный в <source>, должен соответствовать типу, указанному в type.
Не используйте атрибут media, если художественный стиль не нужен.
Вы также можете использовать srcset и sizes.
МНОЖЕСТВЕННЫЕ РАЗМЕРЫ (ДЛЯ ДИСПЛЕЕВ RETINA):
АТРИБУТ MEDIA
В теге source также можно использовать атрибут media для указания ширины экрана, для которой следует использовать указанный источник:
АТРИБУТ SIZES
Позволяет указать размер изображения (ширину) для указанного размера экрана:
2) ХУДОЖЕСТВЕННЫЙ СТИЛЬ
Художественный стиль — это техника, при которой для различных размеров экрана отображаются разные изображения. Например, если у нас есть пейзаж с человеком в центре, такое изображение подойдет для большого экрана, где человека легко видно, но для маленького экрана лучше показать обрезанное изображение с крупным планом на человека.
Рассмотрим пример:
Давайте исправим это с помощью <picture>:
Комментарии к коду:
Атрибут media элемента <source> содержит условие media, по которому браузер выбирает изображение. В примере, если ширина области просмотра составляет 800 пикселей или меньше, будет показано изображение из первого элемента <source>; если больше — будет использовано второе.
Атрибут srcset содержит URL изображения. Здесь также можно указать набор дескрипторов и добавить атрибут sizes, но с использованием тега <picture> это вряд ли будет продуктивно.
Тег <img src="" alt=""> с атрибутами src и alt перед закрывающим тегом </picture> должен быть указан; иначе изображения не появятся! Этот тег нужен для поисковых роботов и в случае, если браузер не может выбрать изображение на основе указанных условий.
Показ различных изображений (художественный стиль) также можно реализовать через srcset, но это удобнее делать через <picture>.
ПОДДЕРЖКА БРАУЗЕРАМИ
Поддержка тега <picture> растет, и современные браузеры уже хорошо работают с ним.
ТЕГ <PICTURE> ДЛЯ SEO И ПОЧЕМУ ВЫ ДОЛЖНЫ ЗАБЫТЬ ОБ ЭТОМ
С помощью этого тега легко реализовать поддержку альтернативных графических форматов. Достаточно просто перечислить наши изображения (jpeg, png, webp) внутри этого тега, и браузер сам решит, какое использовать.
Однако, если вы решите серьезно заняться технической оптимизацией, забудьте о теге <picture>.
Поскольку при его использовании, как и с тегом <img>, происходит увеличение узлов в дереве DOM как минимум в три раза для каждого изображения. Идеальный верхний предел ваших узлов в дереве DOM должен составлять около 1500. Для многих этот предел уже превышен. Каждый узел в дереве DOM требует памяти и зам��дляет выполнение скриптов.
ЗАЧЕМ НУЖЕН SRCSET И ПОЧЕМУ CSS И JAVASCRIPT НЕ ПОДХОДЯТ?
Когда браузер загружает страницу, он начинает загружать изображения до загрузки и интерпретации CSS и JavaScript. Это позволяет сократить время загрузки страницы в среднем на 20%. Однако это не подходит для создания адаптивных изображений, для которых был создан атрибут srcset.
Например, нельзя было бы загрузить элемент <img>, затем определить ширину экрана с помощью JavaScript и динамически изменить URL изображения. Оригинальное изображение уже было бы загружено (или отправлено на загрузку) до того, как было бы загружено его уменьшенное изображение.
