Адаптивная загрузка изображений в WordPress: пошаговое руководство

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

Почему адаптивные изображения важны для WordPress

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

Адаптивная загрузка позволяет:

• Снизить вес загружаемых файлов;
• Увеличить скорость загрузки страниц;
• Улучшить SEO показатели за счет повышения скорости сайта;
• Обеспечить качественное отображение изображений на любых устройствах.

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

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

По умолчанию, при добавлении изображения в контент WordPress автоматически формирует атрибуты srcset и sizes. Для проверки можно посмотреть сгенерированный HTML в любом посте:

<img src="image-300x200.jpg" srcset="image-300x200.jpg 300w, image-768x512.jpg 768w, image-1024x683.jpg 1024w" sizes="(max-width: 768px) 100vw, 768px" alt="Пример">

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

Как контролировать размеры изображений в srcset

Для этого можно использовать фильтр wp_calculate_image_srcset. Пример функции, которая уменьшает количество доступных размеров и оставляет только нужные:

function wpcode_filter_srcset( $sources, $size_array, $image_src, $image_meta, $attachment_id ) {
    // Оставим только размеры до 1024px
    foreach ( $sources as $width => $source ) {
        if ( $width > 1024 ) {
            unset( $sources[ $width ] );
        }
    }
    return $sources;
}
add_filter( 'wp_calculate_image_srcset', 'wpcode_filter_srcset', 10, 5 );

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

Кастомная адаптивная загрузка изображений на примере функции wpcode_get_adaptive_image

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

function wpcode_get_adaptive_image( $attachment_id, $sizes = array() ) {
    if ( ! $attachment_id ) {
        return '';
    }
    // Регистрируем размеры для srcset
    $srcset_parts = array();
    foreach ( $sizes as $size ) {
        $img = wp_get_attachment_image_src( $attachment_id, $size );
        if ( $img ) {
            $srcset_parts[] = esc_url( $img[0] ) . ' ' . $img[1] . 'w';
        }
    }
    $srcset = implode( ', ', $srcset_parts );
    $img_default = wp_get_attachment_image_src( $attachment_id, $sizes[0] );
    if ( ! $img_default ) {
        return '';
    }
    return '<img src="' . esc_url( $img_default[0] ) . '" srcset="' . esc_attr( $srcset ) . '" sizes="100vw" alt="" loading="lazy"/>';
}

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

echo wpcode_get_adaptive_image( 123, array( 'thumbnail', 'medium', 'large' ) );

Такой подход позволяет задать необходимые размеры и выдать оптимальный набор картинок для браузера, включая атрибут loading="lazy" для ленивой загрузки.

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

Если вы не хотите писать код, можно использовать готовые решения. Вот несколько проверенных плагинов с поддержкой адаптивной загрузки и оптимизации:

• Smush — умеет оптимизировать и сжимать изображения, поддерживает ленивую загрузку и адаптивные размеры.
• Imagify — автоматическая оптимизация и возможность создания WebP версий.
• ShortPixel Adaptive Images — CDN для адаптивных изображений с автоматическим преобразованием форматов и размеров.
• Clearfy Pro — предлагает расширенные настройки оптимизации и загрузки ресурсов, включая медиа.

Выбор плагина зависит от специфики сайта и бюджета. Многие из них имеют бесплатные версии с базовым функционалом.

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

Использование формата WebP для современных браузеров

WebP — современный формат изображений, который позволяет значительно уменьшить размер файлов без потери качества. Для автоматической генерации и подгрузки WebP можно использовать плагины как Imagify или ShortPixel, либо реализовать серверное преобразование.

Также можно написать фильтр, который подставляет WebP изображения, если браузер поддерживает:

function wpcode_webp_srcset( $sources, $size_array, $image_src, $image_meta, $attachment_id ) {
    foreach ( $sources as $width => $source ) {
        $webp_url = preg_replace( '/\.(jpg|jpeg|png)$/i', '.webp', $source['url'] );
        if ( file_exists( get_attached_file( $attachment_id ) . '.webp' ) ) {
            $sources[$width]['url'] = $webp_url;
        }
    }
    return $sources;
}
add_filter( 'wp_calculate_image_srcset', 'wpcode_webp_srcset', 20, 5 );

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

Включение ленивой загрузки (Lazy Load)

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

В нашей кастомной функции wpcode_get_adaptive_image уже добавлен этот атрибут.

Выводы и рекомендации

Для практического улучшения адаптивной загрузки изображений в WordPress советую придерживаться следующего алгоритма:

1. Используйте встроенный srcset и фильтруйте размеры через wp_calculate_image_srcset, чтобы ограничить максимальные размеры.
2. Добавьте ленивую загрузку через атрибут loading="lazy".
3. Рассмотрите использование WebP и автоматическую генерацию этого формата.
4. Используйте проверенные плагины, например, Clearfy Pro для расширенной оптимизации.
5. Тестируйте скорость сайта и качество изображений на разных устройствах.

Правильная адаптивная загрузка изображений — залог быстрой и удобной работы сайта на WordPress. Используйте приведённые примеры кода и рекомендации для создания собственного оптимального решения.