Формат изображений WebP с каждым годом становится все более популярным благодаря своей высокой степени сжатия без заметной потери качества. Особенно важно использовать WebP на мобильных устройствах, где скорость загрузки и экономия трафика играют ключевую роль. В этой статье подробно разберем, как внедрить поддержку WebP на сайте WordPress, оптимизировать изображения под мобильные устройства и обеспечить совместимость с браузерами.
Почему WebP важен для мобильных WordPress-сайтов
Мобильный трафик растет, и пользователи ожидают мгновенной загрузки страниц на своих смартфонах и планшетах. WebP позволяет значительно уменьшить вес изображений по сравнению с JPEG и PNG, что ускоряет загрузку и снижает потребление трафика. Это особенно актуально для сайтов на WordPress, где большое количество изображений может сильно замедлять работу.
Кроме того, поисковые системы, включая Google, учитывают скорость загрузки при ранжировании, а медленные мобильные сайты теряют позиции в выдаче. Использование WebP — один из эффективных способов улучшить производительность и SEO.
Однако стоит помнить, что не все браузеры поддерживают WebP (например, старые версии Safari), поэтому важно реализовать fallback на стандартные форматы.
Основные преимущества WebP для мобильных пользователей
- Снижение размера изображений на 25-35% без потери качества.
- Ускорение загрузки страниц и улучшение пользовательского опыта.
- Экономия мобильного трафика и зарядки батареи.
Как добавить поддержку WebP в WordPress: плагины и ручные решения
Самый простой способ внедрить WebP — использовать плагины, которые автоматически конвертируют загружаемые изображения и подают их в нужном формате в зависимости от браузера пользователя.
Рекомендуемые плагины для WebP в WordPress
- Imagify — популярный плагин для оптимизации изображений с поддержкой WebP. Позволяет конвертировать уже загруженные изображения и автоматически создавать WebP-версии.
- ShortPixel Image Optimizer — предлагает продвинутые настройки конвертации в WebP и оптимизацию без потери качества.
- WebP Express — бесплатный плагин, который создает WebP-версии и автоматически подставляет их для поддерживаемых браузеров, с fallback на JPEG/PNG.
Для установки любого из них достаточно перейти в админку WordPress → Плагины → Добавить новый, найти плагин по названию и активировать.
Пример ручного добавления WebP с fallback на PHP
Если хочется сделать все самостоятельно, можно реализовать вывод WebP с fallback на обычные форматы с помощью кода. Вот пример функции, которую можно добавить в functions.php вашей темы:
function wpmobile_get_webp_url($image_url) {
$webp_url = preg_replace('/\.(jpg|jpeg|png)$/i', '.webp', $image_url);
if (file_exists(str_replace(home_url('/'), ABSPATH, $webp_url))) {
return $webp_url;
}
return $image_url;
}Эта функция проверяет, существует ли WebP версия изображения, и возвращает ее, если да, иначе — исходный URL. Далее в шаблоне можно использовать следующий код для отображения картинки с WebP и fallback через тег <picture>:
<picture>
<source srcset="<?php echo esc_url(wpmobile_get_webp_url($image_url)); ?>" type="image/webp">
<img src="<?php echo esc_url($image_url); ?>" alt="Описание изображения">
</picture>Такой подход обеспечит загрузку WebP для поддерживаемых браузеров и обычных форматов для остальных.
Оптимизация изображений WebP под мобильные устройства
Чтобы добиться максимальной эффективности, важно не просто конвертировать изображения в WebP, но и оптимизировать их размеры и адаптировать под экраны мобильных устройств.
Использование адаптивных изображений с srcset
Тег <img> и <picture> поддерживают атрибут srcset, который позволяет указывать несколько вариантов изображения для разных разрешений экрана. Это помогает загружать на мобильные устройства менее тяжелые версии.
Пример использования:
<img src="image-800.webp"
srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
sizes="(max-width: 600px) 400px, 800px" alt="Пример адаптивного изображения">Плагины оптимизации часто создают несколько версий изображений автоматически. Вручную можно создавать WebP разных размеров через инструменты командной строки, например, cwebp.
Lazy Load для WebP изображений
Для мобильных устройств важна не только оптимизация размера, но и отложенная загрузка (Lazy Load), чтобы не грузить все картинки сразу, а только те, что видны пользователю. WordPress с версии 5.5 поддерживает native lazy load через атрибут loading="lazy".
Для WebP это работает так же, просто добавьте атрибут в тег <img> или <source>:
<img src="image.webp" loading="lazy" alt="Пример">Проверка и отладка поддержки WebP на мобильных устройствах
После настройки важно проверить, что WebP действительно используется на мобильных устройствах и fallback срабатывает в неподдерживаемых браузерах.
Как проверить использование WebP
- Откройте сайт на мобильном устройстве или в эмуляторе браузера Chrome DevTools (F12 → Toggle device toolbar).
- Вкладка Network — отфильтруйте по типу "img" и посмотрите расширения загружаемых файлов. Они должны быть .webp.
- Если браузер не поддерживает WebP, убедитесь, что загружаются изображения в JPEG/PNG.
Использование плагина Clearfy для ускорения и оптимизации
Для комплексной оптимизации сайта и управления кэшированием, отключением лишних скриптов, а также поддержки WebP можно использовать плагин Clearfy Pro. Он поможет не только с WebP, но и с другими параметрами, важными для мобильных пользователей.