Изображения часто занимают большую часть веса страниц сайта, что прямо влияет на скорость загрузки и, как следствие, на поведенческие факторы и SEO. В этой статье мы подробно рассмотрим, как оптимизировать загрузку изображений в WordPress, используя как встроенные возможности, так и популярные плагины, а также примеры кода для тонкой настройки.
Почему важна оптимизация изображений в WordPress
Большие и неоптимизированные изображения замедляют загрузку страницы, что приводит к увеличению показателя отказов и снижению позиций в поисковой выдаче. Кроме того, высокая нагрузка на сервер увеличивает расходы хостинга и может ухудшить работу сайта при большом трафике.
Оптимизация позволяет уменьшить размер файлов без заметной потери качества, улучшить восприятие сайта пользователями и повысить общую производительность.
В WordPress существует несколько подходов к оптимизации изображений, которые мы разберём ниже.
Использование современных форматов изображений: WebP и AVIF
Традиционные форматы JPEG и PNG уступают новым форматам WebP и AVIF по степени сжатия при сохранении качества. WordPress с версии 5.8 поддерживает загрузку и отображение WebP, а с помощью плагинов можно добавить поддержку AVIF.
Для автоматического конвертирования и подстановки WebP можно использовать плагин Imagify или ShortPixel Image Optimizer. Они конвертируют загружаемые изображения и создают версии WebP, которые браузеры поддерживают.
Пример настройки конвертации WebP с помощью Imagify
После установки и активации плагина перейдите в настройки Imagify, выберите уровень сжатия и включите опцию создания WebP-версий. Плагин автоматически создаст необходимые файлы и подставит их на страницы сайта.
Отложенная загрузка изображений (Lazy Load)
Отложенная загрузка — это техника, при которой изображения загружаются не сразу при загрузке страницы, а по мере их появления в области видимости пользователя. Это значительно снижает первоначальный вес страницы.
WordPress с версии 5.5 имеет встроенную поддержку отложенной загрузки с помощью атрибута loading="lazy" у тегов <img>. Однако для более сложных сценариев можно использовать специализированные плагины или кастомные решения.
Включение отложенной загрузки вручную
Если по каким-то причинам встроенная поддержка отключена или требуется дополнительная настройка, можно добавить фильтр, который добавляет атрибут loading="lazy" к изображениям в контенте:
function wparticles_add_lazy_loading($content) {
return preg_replace('/<img(.*?)>/', '<img loading="lazy"$1>', $content);
}
add_filter('the_content', 'wparticles_add_lazy_loading');Этот простой код гарантирует, что все изображения в публикациях будут загружаться с отложкой.
Компрессия и оптимизация изображений с помощью плагинов
Существуют плагины, которые автоматически сжимают изображения при загрузке и оптимизируют уже загруженные. Вот несколько популярных вариантов:
- Smush — бесплатный и платный плагин, который удаляет лишние метаданные, сжимает изображения без потери качества и поддерживает отложенную загрузку.
- ShortPixel Image Optimizer — плагин с возможностью конвертации в WebP и AVIF, а также оптимизацией без потери качества.
- Imagify — плагин для автоматической оптимизации и конвертации изображений с удобным интерфейсом.
Эти плагины позволяют уменьшить размер изображений на 30-70% без заметных потерь в качестве и значительно улучшить скорость загрузки сайта.
Автоматическое создание адаптивных изображений
Адаптивные изображения — техника, при которой браузер получает изображение подходящего размера в зависимости от устройства и разрешения экрана пользователя. WordPress автоматически генерирует несколько размеров изображений при загрузке, но чтобы использовать их эффективно, нужно правильно настроить вывод тегов.
Для этого в WordPress можно использовать атрибуты srcset и sizes у тега <img>. Они позволяют браузеру выбрать оптимальный вариант.
Пример вывода адаптивного изображения с помощью функции wparticles_get_responsive_image()
function wparticles_get_responsive_image($attachment_id, $alt = '', $class = '') {
$img = wp_get_attachment_image_srcset($attachment_id);
$sizes = '(max-width: 600px) 100vw, 600px';
$src = wp_get_attachment_image_url($attachment_id, 'medium');
return '<img src="' . esc_url($src) . '" srcset="' . esc_attr($img) . '" sizes="' . esc_attr($sizes) . '" alt="' . esc_attr($alt) . '" class="' . esc_attr($class) . '" loading="lazy">';
}Эта функция возвращает корректный тег img с адаптивными атрибутами и отложенной загрузкой, что значительно оптимизирует работу с изображениями.
Кэширование и CDN для ускорения загрузки изображений
Оптимизация изображений — только часть задачи. Чтобы добиться максимальной скорости, стоит использовать кэширование и CDN (Content Delivery Network). CDN хранит копии изображений на серверах по всему миру, снижая время отклика.
Популярные решения для WordPress:
- Cloudflare — бесплатный CDN с дополнительными функциями оптимизации изображений.
- Jetpack Photon — встроенный CDN для изображений от Automattic.
- KeyCDN — коммерческий CDN с простым подключением к WordPress.
Для интеграции CDN достаточно изменить URL изображений или подключить плагин, который автоматически перепишет пути.
Выводы по оптимизации загрузки изображений в WordPress
Оптимизация изображений — комплексная задача, которая включает в себя выбор формата, сжатие, адаптивность, отложенную загрузку и использование CDN. В WordPress для этого есть много инструментов и возможностей, которые при грамотном использовании существенно ускорят сайт и улучшат пользовательский опыт.
Рекомендуется использовать плагины для автоматизации процесса, но при необходимости можно писать собственные функции, как показано в примерах выше, чтобы добиться тонкой настройки под конкретный проект.
