Важность адаптивных изображений в WordPress Core

Популярность адаптивных изображений растет, и это то, что нельзя игнорировать. Однако использование тех же функций в популярных CMS, таких как WordPress, может оказаться сложной задачей. Задача может занять много времени, даже если пользователи могут сами написать функцию в теме. Но все кардинально изменилось с тех пор, как был представлен WordPress 4.4, что упростило разработчикам и администраторам встраивание функциональности адаптивного изображения в свои темы.

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

Функционирование функции

После обновления до WordPress 4.4 весь контент и изображения будут состоять из атрибутов srcset и sizes . Это в основном предназначено для обеспечения доступности каждого размера изображения, чтобы поддерживать фактический запрошенный размер изображения. В случаях, когда соотношение сторон изменяется по сравнению с исходным запрошенным изображением, пользовательские кадры не включаются в атрибут srcset . В то же время отзывчивое изображение будет возвращено, когда изображение вызывается через функцию wp-get-attachment-image.

Адаптивные изображения действуют как фоновая функция в WordPress 4.4 из-за его автоматической функции, которая возникает всякий раз, когда изображение загружается в WordPress через загрузчик мультимедиа. Этот автоматический фоновый процесс приводит к тому, что атрибуты srcset и sizes отображаются всякий раз, когда изображение появляется на странице. Это означает, что в новой функции адаптивных изображений нет видимых интерфейсов. Ни один из вариантов, таких как наличие форм для заполнения или полей для проверки и вариантов переключения, недоступен из-за отсутствия видимых интерфейсов.

Разработчики тем должны будут обеспечить доступность атрибутов точных размеров в изображениях с помощью редактирования файла functions.php темы. Это важно учитывать, потому что атрибуты srcset и sizes, присутствующие в теге изображения, на самом деле представляют собой адаптивные изображения в WordPress. Сложнее всего предсказать атрибут sizes, хотя WordPress хорошо справляется с включением всех доступных размеров в атрибут srcset . Атрибут sizes обязан объяснить браузеру, насколько широким будет изображение в каждом доступном окне просмотра. Однако результаты могут отличаться в зависимости от стиля, доступного в теме пользователя, обеспечивая разумное значение по умолчанию, а именно 'sizes = ”(max width: {{image-width}}) 100 vw, {{image-width}}»

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

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

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

Настройка адаптивных изображений для вашей темы

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

Изображения содержимого можно фильтровать с помощью wp_calculate_image_sizes, тогда как миниатюры сообщений / избранные изображения можно фильтровать с помощью функции wp_get_attachment_image_attributes. Необходимость в двух разных функциях требуется, поскольку тема меняется в зависимости от способа отображения избранных изображений в разных точках останова и полностью отличается от способа отображения изображений содержимого при тех же обстоятельствах. Таким образом, WordPress 4.4 предлагает разработчикам тем расширенную возможность фильтровать изображения различными способами и, таким образом, быть максимально конкретными.

Все это подчеркивает мгновенные преимущества, которые пользователи и разработчики тем смогут получить благодаря поддержке отзывчивых изображений через обновление WordPress 4.4. Это также позволяет разработчикам тем включать изображения, которые являются четкими и четкими независимо от размера области просмотра и плотности пикселей, тем самым улучшая производительность веб-сайта, поскольку веб-страницы могут избежать дополнительного времени, необходимого для загрузки изображений большего размера. Несмотря на то, что это автоматическая процедура для пользователей, разработчики темы несут ответственность за настройку атрибута размеров изображения, проводя время в файле functions.php внутри темы. Более того, следует иметь в виду, что создание и объединение плагина адаптивных изображений - это больше командная работа.