Формат изображений WebP становится всё более популярным благодаря своей способности значительно уменьшать размер файлов без потери качества. Это помогает ускорить загрузку страниц и улучшить пользовательский опыт. Однако стандартная поддержка WebP в WordPress появилась только с версии 5.8, и не всегда хостинг или тема корректно работают с этим форматом. В этой статье мы подробно рассмотрим, как добавить поддержку WebP в WordPress без плагинов, используя настройку сервера, функции темы и оптимизацию кода.
Почему важно использовать WebP в WordPress
WebP поддерживает как сжатие с потерями, так и без потерь, а также прозрачность, что делает его универсальным форматом для всех типов изображений. По сравнению с JPEG и PNG, WebP позволяет уменьшить размер файлов на 25-35%, что значительно ускоряет загрузку сайта и снижает нагрузку на сервер.
Однако не все браузеры поддерживают WebP одинаково, и не всегда WordPress корректно обрабатывает этот формат, особенно при загрузке и выводе изображений. Решение добавить поддержку WebP без плагинов позволит вам получить стабильность, уменьшить количество установленных расширений и повысить скорость работы сайта.
Настройка сервера для работы с WebP
1. Проверка поддержки WebP на сервере
Первым шагом необходимо убедиться, что сервер может обрабатывать WebP файлы. Для этого проверьте наличие поддержки MIME-типа image/webp. На серверах Apache добавьте в файл .htaccess следующие строки:
AddType image/webp .webpДля Nginx добавьте в конфигурацию сервера:
location ~* \.(webp)$ {
add_header Content-Type image/webp;
}Это позволит серверу корректно отдавать файлы WebP с правильным заголовком.
2. Автоматическая конвертация изображений в WebP
Для автоматической конвертации загружаемых изображений в WebP без плагинов можно использовать скрипты на стороне сервера или настроить обработку в PHP. Например, с помощью библиотеки Imagick можно создавать WebP версии изображений при загрузке.
function wpupdate_convert_to_webp($filepath) {
if (!extension_loaded('imagick')) return false;
$image = new Imagick($filepath);
$image->setImageFormat('webp');
$webp_path = preg_replace('/\.(jpg|jpeg|png)$/i', '.webp', $filepath);
return $image->writeImage($webp_path);
}Вы можете вызвать эту функцию при загрузке медиафайлов через хук WordPress wp_handle_upload, чтобы автоматически создавать WebP версии.
Добавление поддержки WebP в тему WordPress
1. Разрешение загрузки WebP через фильтр
По умолчанию WordPress ограничивает типы файлов, которые можно загружать. Чтобы разрешить загрузку WebP, добавьте в файл functions.php вашей темы следующий код:
function wpupdate_allow_webp_upload($mime_types) {
$mime_types['webp'] = 'image/webp';
return $mime_types;
}
add_filter('mime_types', 'wpupdate_allow_webp_upload');Это позволит загружать изображения в формате WebP через медиабиблиотеку.
2. Отображение WebP изображений на сайте с fallback-ом
Некоторые браузеры не поддерживают WebP. Чтобы решить эту проблему, можно использовать тег <picture> с альтернативными форматами. Ниже пример функции, генерирующей разметку для вывода WebP с fallback на JPEG или PNG:
function wpupdate_display_webp_image($url_webp, $url_fallback, $alt = '', $class = '') {
return '<picture>' .
'<source srcset="'. esc_url($url_webp) .'" type="image/webp">' .
'<img src="'. esc_url($url_fallback) .'" alt="'. esc_attr($alt) .'" class="'. esc_attr($class) .'">' .
'</picture>';
}Используйте эту функцию, чтобы вставлять изображения в шаблоны темы, обеспечивая поддержку WebP и корректный fallback.
Реализация автоматической замены изображений на WebP в контенте
Чтобы автоматически заменить URL изображений в постах на WebP версии, если они существуют, можно использовать фильтр the_content:
function wpupdate_replace_images_with_webp($content) {
return preg_replace_callback('/<img[^>]+src=["\']([^"\']+\.(jpg|jpeg|png))["\']/i', function($matches) {
$original_url = $matches[1];
$webp_url = preg_replace('/\.(jpg|jpeg|png)$/i', '.webp', $original_url);
// Проверка существования WebP файла
$webp_path = str_replace(site_url('/'), ABSPATH, $webp_url);
if (file_exists($webp_path)) {
return str_replace($original_url, $webp_url, $matches[0]);
}
return $matches[0];
}, $content);
}
add_filter('the_content', 'wpupdate_replace_images_with_webp');Этот код заменит изображения в содержимом поста на WebP версии, если такие файлы есть на сервере.
Полезные плагины для расширения поддержки WebP
Хотя задача стоит сделать всё без плагинов, иногда полезно использовать специализированные расширения для более продвинутых функций, если вы готовы к этому:
- Clearfy Pro — оптимизация производительности, включая работу с изображениями.
- WPRemark — продвинутые настройки медиа и кеширования.
Эти плагины могут помочь в автоматизации и профессиональной оптимизации WebP без необходимости писать много кода.
Тонкости и советы по работе с WebP в WordPress
Не забывайте, что WebP не поддерживается в старых версиях браузеров, особенно Internet Explorer. Поэтому всегда используйте fallback-изображения или тег <picture> для кроссбраузерной совместимости.
Для создания WebP изображений на лету можно настроить сервер с помощью модуля mod_pagespeed или использовать CDN, поддерживающие автоматическую конвертацию в WebP (например, Cloudflare).
Если вы используете кэширование, убедитесь, что оно не мешает обновлению WebP файлов, особенно если изображения обновляются часто.
Также рекомендуется регулярно проверять размер и качество WebP изображений, чтобы не потерять визуальную привлекательность сайта.
Итоговые рекомендации
Добавление поддержки формата WebP в WordPress без плагинов требует настройки сервера, небольших доработок в теме и грамотной организации загрузки и вывода изображений. Это позволит ускорить сайт, улучшить SEO и повысить удобство для посетителей.
Используйте приведённые примеры кода и рекомендации, тщательно тестируйте изменения и при необходимости расширяйте функциональность с помощью проверенных плагинов из WPShop.