Изображения часто являются самой «тяжелой» частью сайта на WordPress, что сильно влияет на скорость загрузки и, как следствие, на SEO и пользовательский опыт. В этой статье я расскажу, как автоматизировать процесс оптимизации изображений с помощью популярных плагинов, а также покажу, как можно дополнительно кастомизировать этот процесс с помощью кода.
Почему важно оптимизировать изображения в WordPress
Неправильно оптимизированные изображения увеличивают время загрузки страниц, что негативно сказывается на поведении посетителей и ранжировании сайта в поисковых системах. Кроме того, большие изображения потребляют больше трафика и нагрузку на сервер.
Оптимизация изображений — это не только сжатие без потери качества, но и создание адаптивных версий, использование современных форматов и автоматизация этого процесса для удобства работы.
Выбор плагинов для автоматической оптимизации
Существует множество плагинов, которые помогают оптимизировать изображения автоматически. Рассмотрим самые популярные и эффективные.
1. WP Smush
WP Smush — один из самых популярных плагинов для сжатия и оптимизации изображений. Он автоматически сжимает загружаемые изображения и позволяет оптимизировать уже загруженные.
- Поддержка массовой оптимизации.
- Удаление метаданных из изображений.
- Оптимизация PNG, JPEG, GIF.
2. ShortPixel Image Optimizer
ShortPixel — мощный инструмент, поддерживающий сжатие без потерь и с потерями, а также конвертацию в WebP и AVIF. Бесплатно позволяет оптимизировать до 100 изображений в месяц.
3. Imagify
Imagify позволяет сжимать изображения в три режима качества, конвертировать в WebP и оптимизировать изображения массово. Имеет удобный интерфейс и автоматические настройки.
Настройка автоматической оптимизации изображений
Рассмотрим, как настроить WP Smush для автоматической оптимизации.
После установки и активации плагина зайдите в раздел WP Smush > Settings. Включите опцию «Автоматическая оптимизация при загрузке» — теперь все новые изображения будут автоматически сжиматься.
Для оптимизации уже загруженных файлов перейдите в WP Smush > Bulk Smush и запустите массовую оптимизацию.
Дополнительные параметры
В настройках можно включить удаление метаданных, что дополнительно уменьшит размер файла. Также стоит активировать опцию lazy load, если плагин её поддерживает, для отложенной загрузки изображений при прокрутке.
Кастомизация процесса оптимизации с помощью кода
Иногда необходимо более тонко контролировать процесс оптимизации изображений, например, оптимизировать только изображения определённого типа или размера. В WordPress это можно сделать с помощью хуков.
Пример кода для автоматической оптимизации загружаемых изображений с помощью WP Smush API (предполагается, что плагин установлен и активирован):
add_filter('wp_kit_wp_smush_optimize_image', 'wp_kit_optimize_image_on_upload', 10, 1);
function wp_kit_optimize_image_on_upload($image_path) {
// Здесь можно добавить условия для оптимизации только нужных изображений
// Например, только JPEG
if (preg_match('/\.(jpe?g)$/i', $image_path)) {
// Вызов функции плагина для оптимизации
do_action('wp_smush_image', $image_path);
}
return $image_path;
}Этот фильтр запускает оптимизацию только для JPEG-файлов при загрузке. Аналогично можно настроить оптимизацию для других форматов или пропускать мелкие изображения.
Реализация lazy load своими силами
Если плагин не поддерживает lazy load, его можно добавить с помощью фильтра WordPress. Вот пример:
add_filter('wp_get_attachment_image_attributes', 'wp_kit_add_lazy_load', 10, 2);
function wp_kit_add_lazy_load($attr, $attachment) {
$attr['loading'] = 'lazy';
return $attr;
}Этот код добавит атрибут loading="lazy" ко всем изображениям, загружаемым через стандартную функцию WordPress.
Советы по оптимизации изображений в WordPress
Чтобы получить максимальный эффект от оптимизации, следуйте этим рекомендациям:
- Используйте современные форматы изображений (WebP, AVIF), которые поддерживаются большинством современных браузеров.
- Делайте изображения адаптивными, используя srcset и sizes.
- Регулярно проводите массовую оптимизацию уже загруженных медиафайлов.
- Используйте CDN для быстрой доставки изображений по всему миру.
- Не забывайте про lazy load — он существенно снижает время первого рендеринга страницы.
Заключение
Автоматическая оптимизация изображений с помощью плагинов значительно упрощает жизнь владельцам и разработчикам сайтов на WordPress. Правильный выбор плагина, грамотная настройка и при необходимости кастомизация кода помогут сделать сайт быстрее и удобнее для пользователей.
Используйте приведённые примеры кода, чтобы адаптировать процесс под свои задачи и добиться максимальной производительности.