Адаптивные изображения в WordPress 4.4+

К написанию поста меня вдохновил вот этот комментарий.

Те, кто уже обновились до версии WordPress 4.4, могли заметить, что изменился HTML вывода изображений на сайте. По сути это касается изображений как в старых постах, так и в новых, которые вы только будете создавать. А именно — на тег <img> добавилось два атрибута scrset и sizes.

Как же работают scrset и sizes?

Переносы строк я добавил просто для наглядности:

<img src="image.jpg" srcset="image-300x200.jpg 300w,
			     image-700x620.jpg 700w,
			     image-1024x680.jpg 1024w,
			     image-1200x800.jpg 1200w" sizes="(max-width: 700px) 85vw,
							      (max-width: 1024px) 67vw,
							      (max-width: 1362px) 62vw, 
							      860px" />

Что же означает запись подобного рода?

  • scrset — если размер изображения на странице 300px или меньше, то будет использоваться image-300×200.jpg, если от 300px до 700px то image-700×620.jpg. В случае, если ни одно из условий не удовлетворится, то image.jpg.
  • sizes — по сути это максимальный размер изображения для определенных условий. То есть например при условии, что максмальный размер окна браузера (ширина) 700px, то изображение должно быть не шире, чем 85% по отношению к ней.

Вообще моя статья ориентируется больше на то, как работать с этим в WordPress, поэтому тут я и закончу.

Что же касается поддержки браузерами, то это Firefox 41+, Safari 9+, Opera 33+, iOS 9.0, Edge 13+ и Chrome 43+. IE не поддерживает вообще. C одной стороны может показаться, что не очень много, но плюс в том, что пользователям старых девайсов/браузеров будет просто показываться обычное изображение, взятое из атрибута src.

Как работать с адаптивными изображениями в WordPress 4.4+

Возможно первый вопрос, который встаёт перед нами, разработчиками — это то, как WP добавляет атрибуты изображениям. Очень просто, через фильтр the_content, если:

  • изображение имеет класс wp-image-{ID_изображения},
  • у изображения отсутствуют scrset / sizes атрибуты.

Как попросить WordPrеss не добавлять «адаптивные атрибуты» на изображения.

Тут есть два способа, либо вы удаляете класс wp-image-{ID_изображения} с тех изображений, с которых захотите, либо, если вам нужно запретить это глобально, то вставляете в functions.php:

remove_filter( 'the_content', 'wp_make_content_images_responsive' );

Как добавить атрибуты scrset и sizes через код самому.

<img src="<?php echo wp_get_attachment_image_url( $media_id, 'large' ) ?>"
     srcset="<?php echo wp_get_attachment_image_srcset( $media_id, 'large' ) ?>"
     sizes="<?php echo wp_get_attachment_image_sizes( $media_id, 'large' ) ?>" />

Ни одной из этих функций у меня в Кодексе нет, поэтому опишу их прямо здесь.

  • wp_get_attachment_image_url() возвращает URL копии изображения указанного размера (в примере — large).
  • wp_get_attachment_image_srcset() функция пропускает через цикл все зарегистрированные размеры изображений и добавляет их в атрибут scrset в следующем формате: image-{ШИРИНА}x{ВЫСОТА}.jpg {ШИРИНА}w. Обратите внимание, что функция игнорирует:
    • копии изображения других пропорций (если отношение ширины к высоте отличается больше, чем на 0.002)
    • отредактированные копии изображений
    • копии изображений, которые превышают по ширине максимально допустимое значение scrset (если не изменено в фильтрах, то 1600)
  • wp_get_attachment_image_sizes() если темы или плагины не добавили своих фильтров на эту функцию, то она возвращает следующее: (max-width: {ШИРИНА}px) 100vw, {ШИРИНА}px, где {ШИРИНА} это фактическая ширина файла в пикселях.

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

Для того, чтобы понять, что я имею ввиду, взгляните на наглядный пример:

Адаптивные изображения в WordPress

Не знаю, как вы, но я считаю, что на маленьких девайсах правое изображение будет выглядеть лучше (даже если со зрением у вас всё окей). Но я уже писал выше, что WordPress не станет добавлять в scrset изображения с другими пропорциями. Что делать?

Ну для начала мы добавим свой размер в scrset принудительно:

function misha_custom_razmer( $sources, $size_array, $img_src, $img_metadata, $attachment_id ){
 
	$img_size_name = 's500'; // ваш размер изображения, добавленный через add_image_size('s500', 500, 500, true);
 
	$upload_dir = wp_upload_dir();
 
	// знаю, что мог использовать wp_get_attachment_image_url() для получения URL изображения
	// но я хотел использовать только те данные, которые имеются, с минимумом доп. функций
	$img_url = $upload_dir['baseurl'] . '/' . str_replace( basename( $img_metadata['file'] ), $img_metadata['sizes'][$img_size_name]['file'], $img_metadata['file'] );
 
	$sources[ 500 ] = array( // добавляем свой размер в общий список размеров sources
		'url'        => $img_url,
		'descriptor' => 'w',
		'value'      => $breakpoint,
	);
	return $sources;
}
 
add_filter('wp_calculate_image_srcset', 'misha_custom_razmer', 10, 5);

Фильтр написал сам, если будут предложения по его доработке — буду рад выслушать.

А затем воспользуемся плагином Manual Image Crop чтобы вручную выбрать область обрезки — это очень удобно и круто!

Вот по сути и всё. Любые возникшие вопросы — в комментарии.

Миша Рудрастых Разработчик WordPress WooCommerce

Миша Рудрастых

Впервые познакомился с WordPress в 2009 году, и после двух лет мучений с Joomla и самописными движками это был просто бальзам на душу. С 2014 года меня можно встретить на WordCamp — официальной конфе по WP в Москве, иногда там выступаю. Также в настоящее время веду курсы по WordPress в Epic Skills в Питере.

Смотрите также