Как оптимизировать изображения и медиатеку WordPress

Изображение влияет сразу на скорость, место на диске и качество страницы. WordPress создаёт несколько производных размеров, а браузер выбирает один через srcset. Если исходник огромен или тема выводит неверный вариант, посетитель всё равно скачает лишние мегабайты.

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

Проверьте фактические размеры и вес

Найдите самые крупные файлы в uploads. Команды показывают размер на диске и тип нескольких выбранных файлов без изменения данных:

find /srv/www/example.com/shared/uploads -type f -printf '%s %p\n' \
  | sort -nr | head -n 30
file /srv/www/example.com/shared/uploads/2026/07/example-image.*

Расширение не подтверждает формат, поэтому полезен file. Сопоставьте крупные файлы с URL страницы и проверьте в инструментах браузера, какой ресурс реально загружен на мобильной ширине.

Подготовьте исходник под место использования

Для фотографии обычно подходят JPEG, WebP или AVIF; для изображения с прозрачностью — WebP/AVIF или PNG; для простого значка — SVG из доверенного источника. Формат выбирают после сравнения качества, поддержки и размера, а не по обещанию «новее всегда меньше».

Не увеличивайте маленький исходник: файл станет тяжелее, но деталей не появится. Для hero достаточно размера, близкого к максимальной ширине вывода с учётом плотных экранов. Исходник для печати храните отдельно от веб-копии.

Проверьте, что WordPress отдаёт srcset

Откройте HTML записи и найдите тег изображения с атрибутами srcset или sizes. Запрос ниже только читает публичную страницу и выводит первые совпадения:

curl --silent https://example.com/article/ \
  | grep -o -E '<img[^>]+(srcset|sizes)[^>]*>' \
  | head

Ожидается srcset с несколькими ширинами и осмысленный sizes. Затем в Network панели браузера сравните выбранный URL на широком и узком экране. Наличие srcset без подходящих производных размеров пользы не даёт.

У каждого содержательного изображения нужны width, height и alt. Размеры резервируют место до загрузки, alt передаёт смысл тем, кто не видит изображение. Декоративной картинке подходит пустой alt, но не отсутствующий атрибут.

Ограничьте загрузку и создание мусора

Редакторам задайте понятные требования к максимальной стороне и весу. PHP-лимиты upload_max_filesize и post_max_size защищают сервер от случайного огромного файла, но не оптимизируют принятую фотографию.

Каждый зарегистрированный размер создаёт новый файл. После смены темы старые варианты могут остаться. Перед очисткой посчитайте файлы и сделайте копию:

find /srv/www/example.com/shared/uploads -type f | wc -l
du -sh /srv/www/example.com/shared/uploads
wp --path=/srv/www/example.com/current media image-size

Последняя команда показывает зарегистрированные размеры в WP-CLI. Не запускайте массовую регенерацию без запаса места: некоторое время старые и новые файлы могут существовать одновременно.

Массовую обработку сначала испытайте

Создайте staging-копию медиатеки и обработайте небольшую выборку. Проверьте ориентацию, прозрачность, цвет, анимацию GIF и визуальные артефакты. Затем измерьте суммарный размер и время страницы.

Перед production-регенерацией сохраните базу и uploads. Если результат неудовлетворителен, верните оба компонента одного момента: база содержит metadata и пути к производным файлам.

Lazy loading полезен ниже первого экрана, но hero-изображение не стоит откладывать без измерения — это может ухудшить Largest Contentful Paint. Не добавляйте одинаковую ленивую загрузку несколькими плагинами и темой.

Контролируйте рост медиатеки

Ежемесячно смотрите размер uploads, крупнейшие файлы и свободное место. Не удаляйте «неприкреплённые» изображения автоматически: блоки, CSS и плагины могут ссылаться на них без стандартной связи вложения.

Ускорение HTML решает page cache, а целостность медиатеки проверяется вместе с базой в восстановлении WordPress.

Источники

• WordPress responsive images
• WordPress media settings
• WordPress image optimization performance team handbook
• HTML specification: the img element