Как создать адаптивную загрузку изображений в WordPress с примерами кода

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

Почему важна адаптивная загрузка изображений в WordPress

Адаптивная загрузка позволяет серверу или браузеру выбирать оптимальный размер изображения в зависимости от размера экрана и разрешения устройства. Это снижает объем передаваемых данных, ускоряет время загрузки страницы и положительно влияет на SEO. С ростом доли мобильного трафика этот аспект становится особенно актуальным.

WordPress начиная с версии 4.4 поддерживает атрибуты srcset и sizes для встроенных функций wp_get_attachment_image() и the_post_thumbnail(). Однако в ряде случаев нужно доработать вывод изображений, чтобы полностью контролировать адаптивность.

Использование встроенных возможностей WordPress для адаптивных изображений

По умолчанию при загрузке изображения WordPress создаёт несколько копий с разными размерами — миниатюру, средний размер, большой и оригинал. Функция wp_get_attachment_image() автоматически добавляет атрибуты srcset и sizes.

Пример вывода адаптивного изображения в шаблоне:

<?php echo wp_get_attachment_image( $attachment_id, 'medium' ); ?>

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

Как проверить работу srcset

В коде страницы найдите тег <img> и убедитесь, что у него есть атрибуты srcset и sizes. Если их нет, возможно тема или плагин отключают эту функцию.

Создание собственной функции адаптивной загрузки изображений в WordPress (wpexamples_get_adaptive_image)

Если стандартное поведение не подходит, можно создать свою функцию, которая будет выводить тег <img> с кастомными атрибутами для адаптивной загрузки.

Пример функции в файле functions.php:

function wpexamples_get_adaptive_image( $attachment_id, $sizes = '(max-width: 600px) 100vw, 600px', $class = '' ) {
    if ( ! $attachment_id ) {
        return '';
    }

    $image_src = wp_get_attachment_image_url( $attachment_id, 'medium' );
    $image_srcset = wp_get_attachment_image_srcset( $attachment_id, 'medium' );
    $image_sizes = $sizes;

    $alt = get_post_meta( $attachment_id, '_wp_attachment_image_alt', true );
    $alt = $alt ? esc_attr( $alt ) : '';

    $class_attr = $class ? 'class="' . esc_attr( $class ) . '"' : '';

    return '<img src="' . esc_url( $image_src ) . '" srcset="' . esc_attr( $image_srcset ) . '" sizes="' . esc_attr( $image_sizes ) . '" alt="' . $alt . '" ' . $class_attr . ' loading="lazy" decoding="async">';
}

Эта функция принимает ID вложения, строку с правилами для атрибута sizes и класс для тега img. Она возвращает готовый тег с адаптивными атрибутами и дополнительными атрибутами для ленивой загрузки.

Пример использования функции в шаблоне

echo wpexamples_get_adaptive_image( get_post_thumbnail_id(), '(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 33vw', 'my-custom-class' );

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

Плагины для адаптивной загрузки изображений в WordPress

Если вы не хотите писать код самостоятельно, существует несколько надёжных плагинов, которые решают задачу адаптивных изображений:

• Adaptive Images for WordPress — автоматически преобразует изображения под устройство пользователя и кеширует их.
• WP Retina 2x — создаёт изображения с высоким разрешением для retina-дисплеев, поддерживает srcset.
• Smush — оптимизирует изображения и поддерживает адаптивную загрузку.

Все плагины можно найти на wpshop.ru с удобной установкой и настройкой.

Оптимизация и дополнения для адаптивных изображений

Для максимальной эффективности рекомендуется:

• Использовать форматы WebP и AVIF для современных браузеров. Это можно реализовать с помощью плагинов или вручную через фильтры WordPress.
• Включать ленивую загрузку через атрибут loading="lazy", что сокращает время загрузки страницы.
• Очищать неиспользуемые размеры изображений, чтобы не занимать лишнее место на сервере.
• Использовать CDN с поддержкой адаптивных изображений, например, Cloudflare.

Пример добавления WebP в адаптивную функцию

function wpexamples_get_adaptive_image_webp( $attachment_id, $sizes = '100vw', $class = '' ) {
    if ( ! $attachment_id ) {
        return '';
    }

    $image_src = wp_get_attachment_image_url( $attachment_id, 'medium' );
    $image_srcset = wp_get_attachment_image_srcset( $attachment_id, 'medium' );
    $image_sizes = $sizes;

    $mime_type = get_post_mime_type( $attachment_id );
    $alt = get_post_meta( $attachment_id, '_wp_attachment_image_alt', true );
    $alt = $alt ? esc_attr( $alt ) : '';
    $class_attr = $class ? 'class="' . esc_attr( $class ) . '"' : '';

    $webp_src = str_replace( array( '.jpg', '.jpeg', '.png' ), '.webp', $image_src );

    $html = '<picture>';
    $html .= '<source srcset="' . esc_url( $webp_src ) . '" type="image/webp" sizes="' . esc_attr( $image_sizes ) . '">';
    $html .= '<img src="' . esc_url( $image_src ) . '" srcset="' . esc_attr( $image_srcset ) . '" sizes="' . esc_attr( $image_sizes ) . '" alt="' . $alt . '" ' . $class_attr . ' loading="lazy" decoding="async">';
    $html .= '</picture>';

    return $html;
}

Этот код создаёт тег <picture> с WebP и fallback на оригинал.

Заключение по теме адаптивной загрузки изображений

Адаптивная загрузка изображений в WordPress — важный инструмент, который помогает повысить производительность сайта и качество отображения контента на любых устройствах. Используйте встроенные функции, создавайте свои решения и дополнительно оптимизируйте изображения для достижения лучших результатов.

Если хотите ускорить процесс, обратите внимание на плагины с хорошими отзывами и поддержкой современных форматов, которые вы найдёте на wpshop.ru.