Оптимизация изображений в WordPress: размеры, WebP и плагины сжатия

WordPress умеет многое делать с изображениями автоматически: создаёт уменьшенные копии, подставляет адаптивные варианты, откладывает загрузку картинок ниже первого экрана. Но встроенные механизмы не сжимают изображения агрессивно и не исправляют ошибки при загрузке. Поэтому оптимизация в WordPress — это сочетание правильных настроек, дисциплины при загрузке и, при необходимости, плагина.

Что WordPress делает сам

Промежуточные размеры

При загрузке картинки WordPress создаёт несколько её копий разного размера: миниатюру, средний, крупный и размеры, заданные темой и плагинами. Слишком большие исходники система уменьшает до порогового размера и сохраняет масштабированную версию, а оригинал хранит отдельно.

Адаптивные изображения

Для изображений в записях WordPress добавляет атрибуты srcset и sizes. Браузер сам выбирает подходящую копию под ширину экрана.

Отложенная загрузка

Начиная с версии 5.5 WordPress добавляет изображениям атрибут отложенной загрузки. В более поздних версиях система старается не откладывать первые изображения на странице и умеет помечать главное изображение высоким приоритетом загрузки, но тема может влиять на это поведение.

Современные форматы

WordPress поддерживает загрузку WebP, а в новых версиях и AVIF — при условии, что серверная библиотека обработки изображений их поддерживает.

Что нужно сделать вам

Готовить исходники

• Не загружайте фото прямо с камеры: уменьшите до разумного размера
• Сохраняйте фотографии в JPEG или WebP, а не в PNG
• Называйте файлы латиницей по смыслу до загрузки

Проверить размеры темы

Темы и плагины регистрируют свои размеры изображений, и для каждой загруженной картинки создаётся много копий. Если часть размеров не используется, медиатека разрастается без пользы. Разработчик может отключить лишние размеры.

Заполнять alt

В медиатеке у каждого изображения есть поле альтернативного текста. Заполняйте его для значимых картинок.

Плагины сжатия

Плагины оптимизации изображений сжимают картинки при загрузке и массово обрабатывают уже загруженные. Типичные функции:

• сжатие с потерями и без
• создание копий в WebP или AVIF
• подмена формата при выдаче браузеру
• удаление метаданных
• уменьшение слишком больших исходников

Известные варианты — ShortPixel, Imagify, EWWW Image Optimizer, Smush. Часть из них обрабатывает изображения на своих серверах, часть — на вашем хостинге. Бесплатные версии обычно ограничены объёмом или функциями.

Как выбрать

• Проверьте, поддерживает ли плагин нужные форматы
• Узнайте, где идёт обработка: на слабом хостинге локальное сжатие тысяч картинок может нагрузить сервер
• Убедитесь, что плагин сохраняет оригиналы или делает резервные копии
• Не ставьте два плагина оптимизации сразу

CDN

Сеть доставки контента хранит копии изображений ближе к посетителям и может сама конвертировать форматы. Для сайта с аудиторией в разных странах это заметно ускоряет загрузку. Многие плагины оптимизации предлагают свою CDN.

Чистка медиатеки

• Удалите неиспользуемые изображения, но сначала убедитесь, что они нигде не вставлены
• Не удаляйте файлы, на которые ссылаются другие сайты или которые проиндексированы в поиске по картинкам, без перенаправления
• Включите в SEO-плагине перенаправление страниц вложений

Как проверить результат

1. Сравните вес ключевых страниц до и после в инструментах разработчика
2. Проверьте LCP в PageSpeed Insights
3. Откройте исходный код и убедитесь, что первая картинка не помечена отложенной загрузкой
4. Проверьте, что браузер получает WebP или AVIF там, где они поддерживаются

Типичные ошибки

• Тема вставляет главное изображение фоном через CSS, и все встроенные оптимизации на него не действуют
• Плагин кеширования и плагин изображений по-разному подменяют форматы и конфликтуют
• Огромные PNG в слайдере на главной
• После переезда сайта картинки ссылаются на старый домен