Как улучшить атрибуты адаптивного изображения (sizes и srcset) в WordPress 1
Оптимизация

Как улучшить атрибуты адаптивного изображения (sizes и srcset) в WordPress

Атрибуты адаптивного изображения (sizes и srcset) в ядре WordPress появились в версии 4.4. В этой статье мы рассмотрим, как их можно улучшить, а также добавить другие атрибуты. Со статьей, в которой можно узнать все о изображениях в WordPress можно ознакомиться по ссылке.

Изображения будут получать эти два атрибута (sizes и srcset) только в том случае, если HTML-код изображения будет получен с помощью функции wp_get_attachment_image. Также они добавляются к изображению, если для вывода тега картинки заголовка используется функция get_header_image_tag.

Но давайте сосредоточимся на функции wp_get_attachment_image. Есть переменная $attr, с помощью которой можно передать в функцию любые атрибуты для тега в массиве. Т.е. если в массиве уже задан srcset, то наша функция не будет использовать основные функции WordPress.

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

Как же это работает? Сперва извлекается информация о метаданных изображения (вложении), а затем вычисляются атрибуты адаптивного изображения sizes и srcset. Если задать $size, то будет получена максимальная ширина для этого размера изображения, которая в свою очередь будет использована для sizes.

Для srcset функция берет изображение, получает все размеры, доступные из метаданных изображения, проверяет, где оно хранится и есть ли еще версии этого изображения. Каждый размер, существующий у данного изображения, функция добавит в srcset с соответствующей шириной (к примеру для миниатюры размером 150×150, будет указан image_url 150w).

Изменение атрибута адаптивного изображения srcset

Когда создается srcset, мы можем контролировать, какое изображение будет с самым большим разрешением. Максимальная ширина по умолчанию будет 2048. Но, возможно, нам вообще не понадобятся такие большие изображения ни на одной странице (даже если учитывать retina дисплеи или 4k-мониторы).

<?php
 
add_filter( 'max_srcset_image_width', 'my_function_to_change_srcset_max_width' );
 
/**
 * My function to have max images of 960px in width.
 * @return int
 */
my_function_to_change_srcset_max_width( $max_width ) {
  return 960;
}

Конечно, WordPress также позволяет изменять srcset, для чего можно воспользоваться фильтром wp_calculate_image_srcset. В данный фильтр можно передавать следующие параметры:

  • $size_array — массив данных, включающий ширину (первый элемент) и высоту изображения;
  • $image_src — полный или относительный путь к изображению,
  • $image_meta — метаданные изображения,
  • $attachment_id — идентификатор прикрепленного к записи изображения.

Рассмотрим пример, в котором у нас есть 10 размеров изображений, но мы не хотим использовать все, а хотим только с размером 480 и 960.

<?php
 
add_filter( 'wp_calculate_image_srcset', 'my_function_to_filter_srcset' );
 
my_function_to_filter_srcset( $sources ) {
 
  $sources = array(
    480 => array(
       'url' => 'url_to_image_for_480px',
       'descriptor' => 'w',
       'value' => 480
    ),
    960 => array(
       'url' => 'url_to_image_for_960px',
       'descriptor' => 'w',
       'value' => 960
    )
  );
 
  return $sources;
}

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

Изменение атрибута адаптивного изображения sizes

Атрибут srcset — это то, что нам, возможно, не нужно будет трогать. Но sizes — это адаптивный атрибут, с которым вполне можно немного больше поработать.

Значение этого атрибута по умолчанию довольно простое. Если нам требуется, например, большое изображение с шириной 1024 пикселей, данный атрибут будет выглядеть sizes = "(max-width: 1024px) 100vw, 1024px". Т.е., это означает, что для размера экрана ниже 1024 пикселей он будет пытаться получить максимально возможное изображение относительно ширины просмотра, а для всех размеров выше 1024 пикселей будет проверять изображения 1024 пикселей в srcset.

К примеру вьюпорт 768 пикселей и максимальная ширина контейнера составляет 300 пикселей. Тогда зачем использовать изображение размером 960 пикселей, если вам просто нужна картинка размером 300 пикселей (600 пикселей для ретины)? Давайте изменим это!

Это можно сделать с помощью фильтра wp_calculate_image_sizes, по своей работе напоминающий уже знакомый нам wp_calculate_image_srcset.

Теперь давайте изменим атрибут sizes, чтобы включить в него еще несколько размеров из вышеуказанного сценария. Представим, что у нас есть сетка:

  • 1 колонка на вьюпорте 480px и ниже,
  • 2 колонки по 240px для вьюпорта 767px и ниже,
  • 3 колонки по 300px для вьюпорта 768px и выше.
<?php
 
add_filter( 'wp_calculate_image_sizes', 'my_function_to_change_image_sizes' );
 
function my_function_to_change_image_sizes( $sizes ) {
  return '(max-width: 480px) 100vw, (max-width: 767px) 240px, 300px';
}

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

Управление атрибутами изображения (sizes и srcset)

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

Для этого используем фильтр wp_get_attachment_image_attributes( $attr, $attachment, $size ), где:

  • $attr – массив атрибутов,
  • $attachment – прикрепленное к посту изображение (WP_Post),
  • $size – требуемый размер или массив, включающий ширину и высоту.

Таким образом можно отфильтровать любой атрибут srcset и sizes перед его добавлением к изображению.

Делаем изображения более отзывчивыми с помощью пользовательских атрибутов

В современных браузерах по умолчанию включена ленивая загрузка. Вы можете самостоятельно добавить атрибут с значением load=lazy к изображению.

add_filter( 'wp_get_attachment_image_attributes', 'my_function_to_add_lazy_loading' );
 
my_function_to_add_lazy_loading( $attr ) {
  $attr = 'lazy';
  return $attr;
}

В некоторых случаях атрибут src не устанавливается, и вместо него задается data-src. Затем с помощью JavaScript осуществляется проверка и преобразовывается data-src в src, так чтобы изображение загружалось только тогда, когда его видно пользователю и страница прогрузилась. Как же мы это сделаем?

add_filter( 'wp_get_attachment_image_attributes', 'my_function_to_change_src' );
 
my_function_to_change_src( $attr ) {
  $attr = $attr;
  unset( $attr );
 
  return $attr;
}

Будьте осторожны при изменении атрибутов изображений (sizes и srcset)

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

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

Так что же здесь можно сделать?

  • Проверка доступности $size (например 'my_custom_image_size' === $size);
  • По возможности используйте хуки перед изображениями и отключайте их после;
  • Если вы хотите изменить только одно конкретное изображение, проверьте ID вложения, если он доступен, или мета-данные, содержащие некоторую информацию о нем (например, имя изображения в url).

Заключение

Адаптивные изображения в WordPress гораздо проще получить с помощью фильтров. Раньше это было несложно (с 2.8.0), но в версии 4.4.0 мы получили еще гораздо удобный способ работы с sizes и srcset.

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

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

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

Источник: https://www.ibenic.com

Вконтакте
Linkedin
Telegram
Whatsapp

Похожие статьи

Исправляем проблемы с CLS (Cumulative Layout Shift)


Нововведение Google, Core Web Vitals, поглотило мир SEO и веб-разработки, и многие сайты заняты оптимизацией своего Page Experience, чтобы повысить фактор ранжирования. Метрика Cumulative Layout Shift доставляет проблемы многим сайтам, поэтому давайте рассмотрим способы решения любых проблем с данной метрикой


У этой статьи пока нет комментариев


Добавить комментарий


Ваш адрес email не будет опубликован.

8 + девятнадцать =