Почему важно изменять размер и оптимизировать изображения в WordPress
Изображения часто занимают значительную часть объема веб-страниц, что влияет на скорость загрузки сайта и, как следствие, на опыт пользователей и SEO. Неправильно оптимизированные изображения могут замедлить работу сайта, увеличить расход трафика и снизить позиции в поисковой выдаче. Поэтому грамотное изменение размеров и оптимизация изображений — обязательный элемент работы с WordPress.
В этой статье мы разберем, как программно и с помощью плагинов изменять размер изображений, а также как оптимизировать их качество без потери внешнего вида.
Как WordPress обрабатывает изображения по умолчанию
При загрузке изображения WordPress автоматически создает несколько копий с разными размерами: миниатюра (thumbnail), средний (medium), большой (large) и полноразмерное изображение. Эти размеры можно изменить в настройках медиафайлов, но иногда этого недостаточно.
Кроме того, по умолчанию WordPress не сжимает файлы с максимально эффективным алгоритмом, что оставляет место для улучшений.
Настройка размеров изображений через functions.php
Для добавления кастомных размеров изображений или изменения существующих используйте следующий код в файле functions.php вашей темы:
function wpeducation_custom_image_sizes() {
// Добавляем новый размер изображения 800x600 с обрезкой
add_image_size('wpeducation-custom-size', 800, 600, true);
}
add_action('after_setup_theme', 'wpeducation_custom_image_sizes');Теперь при загрузке изображений WordPress будет создавать дополнительную копию с этим размером.
Чтобы вывести это изображение в шаблоне, используйте:
echo wp_get_attachment_image( $attachment_id, 'wpeducation-custom-size' );Оптимизация изображений с помощью плагинов
Для автоматической оптимизации стоит рассмотреть плагины, которые сжимают изображения без видимой потери качества, а также умеют конвертировать их в современные форматы (WebP).
Плагины для оптимизации
- Imagify — популярный плагин, который автоматически сжимает изображения при загрузке и позволяет конвертировать их в WebP. Имеет настройку уровня сжатия и возможность пакетной оптимизации.
- Smush — удобный плагин с функцией lazy load и пакетной оптимизацией. Бесплатная версия ограничена по размеру файлов.
- ShortPixel — мощный инструмент для сжатия и конвертации изображений с поддержкой WebP и AVIF.
Все эти плагины интегрируются с WordPress без сложных настроек и значительно улучшают скорость загрузки сайта.
Использование плагина Imagify с UTM-метками
Для установки Imagify посетите официальную страницу плагина на WPShop.
Программная оптимизация изображений через PHP
Если нужно реализовать кастомное сжатие или изменение размера без плагинов, можно использовать встроенные функции PHP и WordPress.
Изменение размера изображения через WP_Image_Editor
Пример функции для изменения размера загруженного изображения:
function wpeducation_resize_image($attachment_id, $max_width, $max_height) {
$image_path = get_attached_file($attachment_id);
$image_editor = wp_get_image_editor($image_path);
if (is_wp_error($image_editor)) {
return false;
}
$image_editor->resize($max_width, $max_height, false); // false — сохранить пропорции
$resized = $image_editor->save();
if (!is_wp_error($resized)) {
// Обновляем метаданные изображения
wp_update_attachment_metadata($attachment_id, wp_generate_attachment_metadata($attachment_id, $resized['path']));
return true;
}
return false;
}Эту функцию можно вызывать после загрузки изображения или по запросу для уже существующих файлов.
Пример использования
$attachment_id = 123; // ID вложенного изображения
wpeducation_resize_image($attachment_id, 1024, 768);Данный код уменьшит изображение до максимальных размеров 1024x768, сохраняя пропорции.
Lazy Load и отложенная загрузка изображений
Еще один способ оптимизации — отложенная загрузка (lazy load), когда изображения подгружаются только при прокрутке до них. Это снижает время первичной загрузки страницы.
WordPress с версии 5.5 поддерживает lazy load по умолчанию, добавляя атрибут loading="lazy" ко всем тегам <img>.
Для более тонкой настройки lazy load можно использовать плагины, например My Popup с расширенными возможностями управления загрузкой изображений и контента.
Конвертация изображений в формат WebP
WebP — современный формат изображений, который обеспечивает лучшее сжатие по сравнению с JPEG и PNG без потери качества. Поддержка WebP в WordPress появилась с версии 5.8, но автоматическая конвертация по-прежнему требует плагинов.
Пример плагина для конвертации: WebP Express, который интегрируется с сервером и автоматически преобразует изображения в WebP при загрузке.
Использование WebP может сократить размер изображений на 25-35%, что положительно сказывается на скорости загрузки.
Советы по оптимизации изображений в WordPress
- Перед загрузкой на сайт уменьшайте изображения до нужного размера в графических редакторах.
- Используйте плагины для автоматической оптимизации и конвертации в WebP.
- Реализуйте lazy load для снижения времени загрузки страниц.
- Используйте кастомные размеры изображений для разных блоков сайта, чтобы не загружать лишние мегабайты.
- Периодически проводите аудит медиа-библиотеки и удаляйте неиспользуемые изображения.