Изображения занимают значительную часть трафика и времени загрузки веб-сайтов на WordPress. Неправильная работа с картинками замедляет сайт, ухудшает поведенческие показатели и может негативно сказаться на SEO. В этой статье мы подробно рассмотрим, как оптимизировать загрузку картинок в WordPress с помощью плагинов, а также кастомных решений с примерами кода.
Почему важно оптимизировать загрузку картинок в WordPress
Большие по размеру и неоптимизированные изображения приводят к долгой загрузке страниц. Это влечет за собой несколько проблем:
- Увеличение времени загрузки страниц — пользователи уходят с сайта.
- Повышение нагрузки на сервер и трафик хостинга.
- Снижение позиций сайта в поисковой выдаче из-за плохой скорости.
Поэтому грамотная оптимизация изображений — обязательный этап в работе с WordPress, особенно для сайтов с большим количеством медиа.
Основные способы оптимизации изображений в WordPress
1. Сжатие изображений без потери качества
Для уменьшения веса файлов без заметной потери качества используются специальные алгоритмы. Для WordPress доступны плагины, которые автоматически сжимают загружаемые изображения.
Рекомендуемые плагины:
- Smush — сжимает изображения, поддерживает пакетную оптимизацию и lazy load.
- ShortPixel Image Optimizer — мощный плагин с поддержкой WebP и множеством настроек.
- Imagify — удобный сервис с автоматической оптимизацией и конвертацией в современные форматы.
2. Использование современных форматов изображений
WebP и AVIF форматы обеспечивают лучшее сжатие с сохранением качества по сравнению с JPEG и PNG. WordPress с версии 5.8 поддерживает WebP, но не всегда хостинг и браузеры одинаково хорошо работают с этими форматами.
Для автоматического преобразования и отдачи WebP можно использовать плагины:
- WebP Express — конвертирует изображения в WebP и автоматически подставляет их для поддерживаемых браузеров.
- Imagify — также умеет конвертировать в WebP в процессе оптимизации.
3. Ленивые загрузки (Lazy Load)
Отложенная загрузка картинок позволяет загружать изображения только когда они становятся видимы пользователю при прокрутке страницы. Это значительно ускоряет первоначальную загрузку.
Начиная с WordPress 5.5, ленивые загрузки реализованы по умолчанию через атрибут loading="lazy". Однако для более продвинутых функций можно использовать плагины:
- Lazy Loader
- a3 Lazy Load
Чтобы добавить ленивую загрузку вручную, можно использовать следующий фильтр в functions.php:
function wpall_lazyload_images( $attr, $attachment, $size ) {
$attr['loading'] = 'lazy';
return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'wpall_lazyload_images', 10, 3 );Кастомные решения для оптимизации загрузки изображений в WordPress
Автоматическое создание WebP-версий изображений при загрузке
Если вы хотите самостоятельно реализовать создание WebP при загрузке, пример простого решения:
function wpall_generate_webp_on_upload( $metadata, $attachment_id ) {
$upload_dir = wp_upload_dir();
$file = get_attached_file( $attachment_id );
$info = pathinfo( $file );
$webp_file = $info['dirname'] . '/' . $info['filename'] . '.webp';
if ( function_exists( 'imagewebp' ) ) {
$image = null;
switch ( strtolower( $info['extension'] ) ) {
case 'jpeg':
case 'jpg':
$image = imagecreatefromjpeg( $file );
break;
case 'png':
$image = imagecreatefrompng( $file );
break;
default:
return $metadata; // Формат не поддерживается
}
if ( $image ) {
imagewebp( $image, $webp_file );
imagedestroy( $image );
}
}
return $metadata;
}
add_filter( 'wp_generate_attachment_metadata', 'wpall_generate_webp_on_upload', 10, 2 );Этот код использует PHP GD для конвертации JPEG и PNG изображений в WebP после загрузки. Убедитесь, что на сервере включен модуль GD и функция imagewebp доступна.
Отдача WebP по умолчанию с подменой URL
Чтобы автоматически отдавать WebP для поддерживаемых браузеров, можно добавить правило в .htaccess или реализовать замену URL в PHP:
function wpall_replace_img_src_with_webp( $content ) {
if ( strpos( $_SERVER['HTTP_ACCEPT'], 'image/webp' ) !== false ) {
$content = preg_replace_callback(
'/<img([^>]+)src="([^"]+)"([^>]*)>/i',
function( $matches ) {
$webp_src = preg_replace( '/\.(jpg|jpeg|png)$/i', '.webp', $matches[2] );
return '<img' . $matches[1] . 'src="' . $webp_src . '"' . $matches[3] . '>';
},
$content
);
}
return $content;
}
add_filter( 'the_content', 'wpall_replace_img_src_with_webp' );Этот код меняет URL изображений в контенте на WebP, если браузер поддерживает данный формат.
Плагины для комплексной оптимизации изображений — подборка и рекомендации
Если вы не хотите заморачиваться с кодом, рекомендуем использовать следующие плагины, которые решат большинство задач по оптимизации:
- Imagify — автоматическое сжатие, WebP, резервные копии, пакетная оптимизация.
- ShortPixel — качественная оптимизация с гибкой настройкой форматов и режимов сжатия.
- Smush — бесплатный базовый функционал и платная версия с расширенными возможностями.
- WebP Express — удобное решение для конвертации и отдачи WebP с минимальной настройкой.
Как правильно выбрать плагин?
Основные критерии выбора:
- Совместимость с вашим хостингом и версией PHP.
- Поддержка нужных форматов (WebP, AVIF).
- Возможность пакетной оптимизации и автоматической обработки новых файлов.
- Простота настройки и документация.
Выводы и рекомендации по оптимизации загрузки изображений в WordPress
Оптимизация изображений — обязательный элемент технической настройки сайта на WordPress, влияющий на скорость загрузки, SEO и UX. Основные шаги:
- Используйте автоматические плагины для сжатия и конвертации в WebP.
- Включите ленивую загрузку изображений для экономии трафика.
- Если нужно, расширяйте функционал кастомным кодом для генерации и отдачи WebP.
- Регулярно проверяйте размер и формат новых изображений, чтобы не нагружать сайт тяжелыми файлами.
Следуя этим рекомендациям, вы сделаете загрузку картинок быстрой и комфортной для пользователей вашего сайта на WordPress.