WordPress как на ладони
Недорогой хостинг для сайтов на WordPress: wordpress.jino.ru

HTML атрибуты: scrset и sizes

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

О HTML атрибуте scrset

scrset — это «замена» атрибута src. В scrset указываются несколько URL картинки и условие для каждого URL при котором он должен использоваться браузером. Этот атрибут важнее чем src и src будет использован только если браузер не поддерживает scrset.

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

Например такая строка:

<img 
	src="image-original.jpg" 
	srcset="image-small.jpg 1x, image-large.jpg 2x, image-cropped-sm.jpg 640w"
>

Обработается браузером так:

  • Если стандартное разрешение экрана - image-small.jpg
  • Если это экран с повышенной пикселизацией (ретина) - image-large.jpg
  • Если максимальная ширина экрана устройства меньше или равна 640px - image-cropped-sm.jpg
  • Если нет поддержки srcset - будет использована картинка image-original.jpg

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

меню

О HTML атрибуте sizes

sizes — это «замена» атрибутам width и height. Он устанавливает ширину картинки и условие при котором должна быть выставлена эта ширина. Например:

<img
	srcset="image_1400.jpg 1400w, image_700.jpg 700w, image_400.jpg 400w"
	sizes="(min-width: 700px) 600px, (min-width: 1200px) 80vw, 100vw"
>

Обработается браузером так:

  • При ширине экрана больше 700px - ширина картинки будет 600px;
  • При ширине экрана больше 1200px - ширина картинки будет 80vw (80% от ширины экрана);
  • В остальных случаях (ширине экрана меньше 700px) - ширина картинки 100vw (100% от ширины экрана);

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

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

меню

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

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

ед.измерения значение
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 браузерами - 95%

Актуальные на сегодня данные смотрим по этой ссылке.

Какой процент браузеров поддерживают новые атрибуты sizes и srcset.

WordPress функции srcset и 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 тег <picture>

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

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

Использование этого тега удобнее чем sizes и srcset в двух случаях:

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

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

<picture>
	<source type="image/svg+xml" srcset="my-photo.svg">
	<source type="image/webp" srcset="my-photo.webp"> 
	<img src="my-photo.png" alt="">
</picture>
  • Тип изображение указанного в <source> должен соответствовать типу указанному в type.
  • Не используйте атрибут media, если вам не нужно художественное оформление.
  • Также можно использовать srcset и sizes.
меню

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

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

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

<img src="my-photo.jpg" alt="">

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

<picture>
	<source media="(max-width: 800px)" srcset="my-photo-portrait.jpg">
	<source media="(min-width: 800px)" srcset="my-photo.jpg">
	<img src="my-photo.jpg" alt="">
</picture>

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

  • media атрибут элемента <source> содержит медиа-условие, используя которое бразуер выбирает какую картинку нужно использовать. Из примера выше, если ширина экрана (viewport) 800 или меньше, то будет выведено изображение первого элемента <source>, если больше — второго.

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

  • <img src="" alt=""> с атрибутами src и alt перед закрывающем тегом </picture>, должен быть обязательно указан, иначе изображения не появятся! Этот тег нужен для роботов и когда браузер не может выбрать изображение по указанным условиям.

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

меню

Почему CSS и JavaScript не подходят?

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

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

8 комментов