Оптимизация изображений — одна из важнейших задач для ускорения загрузки сайта и улучшения пользовательского опыта. Особенно актуальна автоматическая оптимизация, чтобы не тратить время на ручную обработку каждой картинки. В этой статье разберём, как настроить автоматическую оптимизацию изображений в WordPress с помощью популярных плагинов и собственных функций.
Почему важна автоматическая оптимизация изображений в WordPress
Большие и неотформатированные изображения сильно влияют на скорость загрузки страниц. Это негативно сказывается на SEO и конверсии. Ручная оптимизация требует времени и навыков, а автоматизация позволяет:
- Сжимать изображения без потери качества сразу после загрузки на сайт.
- Автоматически создавать оптимизированные версии для разных устройств.
- Уменьшать нагрузку на сервер и экономить место на диске.
- Обеспечивать соблюдение современных стандартов веб-оптимизации.
Рассмотрим, как это реализовать на практике.
Лучшие плагины для автоматической оптимизации изображений в WordPress
Среди множества плагинов выделим несколько, зарекомендовавших себя надежностью и функционалом.
1. Imagify — автоматическое сжатие и конвертация
Imagify позволяет оптимизировать изображения при загрузке, преобразовывать их в WebP и создавать резервные копии. Имеется бесплатный тариф с ограничением на 25 МБ в месяц и платные планы.
Чтобы подключить Imagify, достаточно установить плагин из репозитория WordPress и активировать его. В настройках выберите уровень сжатия (Normal, Aggressive, Ultra) и включите опцию конвертации в WebP.
2. ShortPixel Image Optimizer — мощный инструмент с WebP и AVIF
ShortPixel автоматически оптимизирует загруженные изображения, поддерживает WebP и AVIF, позволяет конвертировать старые изображения пакетно. Бесплатный тариф — 100 изображений в месяц.
Для работы нужен API-ключ, который можно получить бесплатно на сайте плагина. После активации в настройках задайте уровень оптимизации и включите конвертацию форматов.
3. EWWW Image Optimizer — оптимизация без ограничений
EWWW Image Optimizer работает локально на сервере, не требует API-ключей, поддерживает автоматическую оптимизацию и конвертацию в WebP. Подходит для сайтов с большим трафиком и большим количеством изображений.
Установите и активируйте плагин, в настройках включите автоматическую оптимизацию и WebP. Для ускорения загрузки можно настроить lazy load.
Реализация автоматической оптимизации изображений с помощью WPVIP-функций
Если хотите добавить кастомный функционал в тему или плагин, можно написать собственную функцию для оптимизации. Например, интеграция с библиотекой wpvip_optimize_image() (функция условная, для примера). Рассмотрим пример, как автоматически сжимать изображения после загрузки.
add_action('wp_handle_upload', 'wpvip_compress_uploaded_image');
function wpvip_compress_uploaded_image($upload) {
$file = $upload['file'];
$image_info = getimagesize($file);
if ($image_info && in_array($image_info[2], [IMAGETYPE_JPEG, IMAGETYPE_PNG])) {
// Используем Imagick или GD для сжатия
if (class_exists('Imagick')) {
$img = new Imagick($file);
$img->setImageCompression(Imagick::COMPRESSION_JPEG);
$img->setImageCompressionQuality(85);
$img->stripImage();
$img->writeImage($file);
$img->clear();
$img->destroy();
} else {
$image = null;
if ($image_info[2] == IMAGETYPE_JPEG) {
$image = imagecreatefromjpeg($file);
} elseif ($image_info[2] == IMAGETYPE_PNG) {
$image = imagecreatefrompng($file);
}
if ($image) {
imagejpeg($image, $file, 85);
imagedestroy($image);
}
}
}
return $upload;
}Эта функция срабатывает при загрузке файла, проверяет, что это JPEG или PNG, и сжимает изображение с качеством 85% с помощью Imagick или GD. Это простой и бесплатный способ сэкономить место и ускорить сайт.
Дополнительные методы ускорения изображений в WordPress
Lazy loading и responsive images
WordPress по умолчанию поддерживает lazy loading — отложенную загрузку изображений, которые не видны в области просмотра. Чтобы улучшить это, можно использовать плагины, например, My Popup с дополнительными настройками загрузки картинок.
Также важно использовать атрибуты srcset и sizes для адаптивных изображений, чтобы браузер загружал подходящий по размеру файл.
Конвертация в формат WebP
WebP значительно уменьшает размер файлов по сравнению с JPEG и PNG. Плагины Imagify, ShortPixel и EWWW умеют автоматически конвертировать изображения в WebP и подставлять их на страницах.
Если хотите реализовать конвертацию вручную, можно использовать следующий код (пример для Imagick):
function wpvip_convert_to_webp($file) {
$image_info = getimagesize($file);
if ($image_info && in_array($image_info[2], [IMAGETYPE_JPEG, IMAGETYPE_PNG])) {
$webp_file = preg_replace('/\.(jpe?g|png)$/i', '.webp', $file);
if (class_exists('Imagick')) {
$img = new Imagick($file);
$img->setImageFormat('webp');
$img->writeImage($webp_file);
$img->clear();
$img->destroy();
return $webp_file;
}
}
return false;
}Вызов функции можно добавить в wp_handle_upload для автоматической конвертации при загрузке.
Как протестировать и контролировать качество оптимизации изображений
После настройки автоматической оптимизации важно проверить несколько ключевых метрик:
- Время загрузки страниц через Google PageSpeed Insights — раздел «Оптимизация изображений».
- Размеры загружаемых файлов в сети браузера (DevTools).
- Визуальное качество изображений на разных устройствах.
Если качество ухудшается, можно поэкспериментировать с уровнем сжатия в плагинах или коде (например, увеличить качество с 85 до 90).
Для массовой оптимизации уже загруженных изображений плагины предлагают пакетные инструменты, что удобно при переходе на автоматизацию.
Заключение и рекомендации по автоматической оптимизации изображений в WordPress
Автоматическая оптимизация картинок — обязательный этап в развитии современного сайта на WordPress. Выбор между плагином и кастомным кодом зависит от бюджета, технических навыков и требований проекта.
Для большинства сайтов достаточно настроить один из проверенных плагинов, таких как Imagify или EWWW Image Optimizer. При необходимости можно дополнять их собственными функциями для более тонкой настройки.
Не забывайте регулярно проверять сайт после обновлений и новых загрузок изображений, чтобы поддерживать оптимальный баланс качества и скорости.