Формат изображений WebP становится все более популярным благодаря высокой степени сжатия без потери качества. Он позволяет значительно ускорить загрузку страниц сайта и улучшить показатели Core Web Vitals. В стандартной установке WordPress поддержка WebP появилась только с версии 5.8, но не все темы и хостинги корректно обрабатывают этот формат. В этой статье мы разберем, как добавить полноценную поддержку WebP в WordPress без использования плагинов, а также рассмотрим примеры кода и рекомендации по оптимизации.
Почему важно использовать WebP в WordPress
WebP — современный формат изображений, разработанный Google. Он обеспечивает:
- Меньший размер файлов по сравнению с JPEG и PNG при сопоставимом качестве.
- Поддержку прозрачности (альфа-канала), как у PNG.
- Быструю загрузку страниц, что положительно сказывается на SEO.
Несмотря на преимущества, многие сайты на WordPress не используют WebP из-за ограничений темы, хостинга или устаревших настроек. Добавление поддержки WebP без плагинов помогает сохранить легкость сайта и избежать конфликтов.
Проверка поддержки WebP на стороне сервера
Для работы WebP важно, чтобы сервер поддерживал этот формат. Чаще всего используется библиотека GD или ImageMagick. Проверьте, поддерживает ли ваш сервер WebP, выполнив следующий PHP-код:
<?php
if (function_exists('imagewebp')) {
echo 'GD поддерживает WebP';
} else {
echo 'GD не поддерживает WebP';
}
?>Если GD не поддерживает WebP, попробуйте использовать ImageMagick. Для этого в PHP можно вызвать:
$imagick = new Imagick();
$supportedFormats = $imagick->queryFormats('WEBP');
if (in_array('WEBP', $supportedFormats)) {
echo 'ImageMagick поддерживает WebP';
} else {
echo 'ImageMagick не поддерживает WebP';
}Если ни один из методов не поддерживает WebP, обратитесь к хостеру для обновления конфигурации PHP.
Добавление поддержки WebP в WordPress загрузчик изображений
По умолчанию WordPress не разрешает загружать WebP-файлы на некоторых установках. Чтобы разрешить загрузку, добавьте следующий код в файл functions.php вашей темы или в отдельный mu-плагин:
function wppremium_mime_types($mimes) {
$mimes['webp'] = 'image/webp';
return $mimes;
}
add_filter('upload_mimes', 'wppremium_mime_types');Этот фильтр добавляет формат WebP в список разрешенных типов файлов для загрузки через медиа-библиотеку WordPress.
Автоматическое создание WebP-версий изображений при загрузке
Чтобы повысить производительность, полезно генерировать WebP-версии изображений автоматически при загрузке. Ниже пример функции, которая добавляет создание WebP на основе библиотеки GD:
function wppremium_generate_webp($metadata, $attachment_id) {
$upload_dir = wp_upload_dir();
$file_path = $upload_dir['basedir'] . '/' . $metadata['file'];
$image = wp_get_image_editor($file_path);
if (!is_wp_error($image)) {
$webp_path = preg_replace('/\.(jpe?g|png)$/i', '.webp', $file_path);
$image->save($webp_path, 'image/webp');
}
return $metadata;
}
add_filter('wp_generate_attachment_metadata', 'wppremium_generate_webp', 10, 2);Этот код при загрузке каждого изображения создает копию в формате WebP в той же папке. Это удобно для последующего вывода WebP на сайте.
Вывод WebP изображений с fallback на JPEG/PNG
Чтобы показывать WebP изображения в браузерах, которые поддерживают этот формат, и при этом показывать обычные JPEG/PNG в остальных, используйте HTML-тег <picture> с элементами <source>:
<picture>
<source srcset="<?php echo esc_url($webp_url); ?>" type="image/webp">
<img src="<?php echo esc_url($original_url); ?>" alt="<?php echo esc_attr($alt); ?>">
</picture>Замените $webp_url и $original_url на соответствующие URL ваших изображений. Такой подход позволяет не ломать отображение в браузерах без поддержки WebP.
Пример функции вывода WebP с fallback для темы
function wppremium_get_picture_element($attachment_id, $size = 'full') {
$original_url = wp_get_attachment_image_url($attachment_id, $size);
$file_path = get_attached_file($attachment_id);
$webp_path = preg_replace('/\.(jpe?g|png)$/i', '.webp', $file_path);
$upload_dir = wp_upload_dir();
$webp_url = str_replace($upload_dir['basedir'], $upload_dir['baseurl'], $webp_path);
if (file_exists($webp_path)) {
return '<picture>' .
'<source srcset="' . esc_url($webp_url) . '" type="image/webp">' .
'<img src="' . esc_url($original_url) . '" alt="">' .
'</picture>';
} else {
return '<img src="' . esc_url($original_url) . '" alt="">';
}
}Выводите изображения в шаблонах так:
echo wppremium_get_picture_element($attachment_id);Оптимизация с помощью .htaccess и заголовков
Для ускорения отдачи WebP можно настроить сервер так, чтобы он отдавал WebP версии изображений автоматически при поддержке браузером. Добавьте в .htaccess следующую директиву (для Apache):
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} \.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteRule (.+) $1.webp [T=image/webp,L]Это позволит браузеру, поддерживающему WebP, получать WebP-изображения без изменения HTML. Для Nginx настройка похожая, но в конфиге сервера.
Использование плагинов WPGPT и Clearfy Pro для улучшения работы с WebP
Хотя мы рассматриваем решение без плагинов, стоит отметить, что в каталоге Clearfy Pro есть опции для оптимизации изображений и интеграции WebP, которые помогают дополнить ручные настройки. Плагин WPGPT больше ориентирован на расширение функционала с помощью искусственного интеллекта, но совместим с современными подходами оптимизации мультимедиа.
Выводы и рекомендации
Поддержка WebP в WordPress без плагинов — вполне реалистичная задача, если сервер поддерживает нужные библиотеки. Важно:
- Разрешить загрузку WebP в настройках WordPress.
- Автоматически генерировать WebP-версии при загрузке изображений.
- Использовать тег
<picture>или серверные правила для показа WebP там, где это возможно. - Тестировать работу на разных браузерах и устройствах.
Таким образом вы добьетесь ускорения сайта, улучшите SEO и пользовательский опыт без необходимости устанавливать тяжелые плагины. Если нужна дополнительная автоматизация и удобство, рассмотрите использование специализированных решений из каталога WPSHOP.