Картинки в WordPress: загрузка и оптимизация за один вечер

К концу этого руководства у вас будет сайт на WordPress 6.x, который принимает картинки в разумном весе, сам уменьшает слишком большие исходники, отдаёт WebP современным браузерам и не грузит мобильным посетителям файл на 4 МБ в блоке шириной 700 пикселей. Первичная настройка занимает 30–40 минут, перегенерация старой медиабиблиотеки — от пяти минут до нескольких часов, в зависимости от того, сколько файлов накопилось.

Что нужно иметь до начала

• Доступ администратора в админку WordPress. Версия — 6.x; на 5.x большая часть шагов тоже работает, но поддержка AVIF появилась только в 6.5.
• Доступ к файлам сайта: FTP/SFTP или файловый менеджер хостинга. Нужен, чтобы править functions.php дочерней темы и при необходимости wp-config.php.
• Свежая резервная копия базы и папки wp-content/uploads. Перегенерация размеров перезаписывает файлы, откатить её без бэкапа нельзя.
• Включённое в PHP расширение для работы с изображениями — Imagick или GD. Проверяется в Инструменты → Состояние сайта → Отчёт, блок «Обработка медиафайлов». Если там пусто, WordPress не сможет создать ни одну миниатюру.
• Любой редактор изображений для подготовки файлов. Подойдёт Photoshop, GIMP, Preview на macOS или веб-инструмент Squoosh.

Если в блоке «Обработка медиафайлов» не хватает расширений, дальше идти бессмысленно — сначала попросите хостинг включить Imagick.

Шаг 1. Приведите файл в порядок до загрузки

Фотография с телефона — это 4000 пикселей по ширине и 5–8 МБ. На сайте она почти никогда не нужна шире 1600 пикселей, а чаще — 1200.

1. Определите, насколько широко изображение показывается на сайте. Откройте страницу, нажмите на картинке правую кнопку → «Исследовать элемент» и посмотрите фактическую ширину блока в пикселях.
2. Уменьшите исходник до двойной ширины этого блока — для экранов с высокой плотностью точек. Блок 700 px → файл 1400 px.
3. Сохраните в JPEG с качеством 75–80 для фотографий, в PNG — только для графики с прозрачностью и резкими краями. Скриншоты интерфейсов лучше выглядят в PNG, фотографии в PNG просто занимают в пять раз больше места.

Проверка: файл весит меньше 300 КБ. Фотография на 1400 px, которая весит 2 МБ, пересохранена с качеством 100 — вернитесь и снизьте его.

Самая дешёвая оптимизация — та, что случилась до загрузки. Файл, который не попал на сервер шириной 6000 пикселей, потом не нужно ни сжимать, ни перегенерировать.

Шаг 2. Настройте размеры в админке

WordPress на каждую загрузку создаёт несколько копий разного размера — их называют сабсайзами. Управляются они в Настройки → Медиафайлы.

Начиная с WordPress 5.3 ядро само уменьшает слишком большие загрузки: если ширина или высота превышает 2560 пикселей, создаётся «масштабированная» версия с суффиксом -scaled, и именно она показывается на сайте. Исходник остаётся на диске. Порог меняется фильтром:

<?php
// functions.php дочерней темы, WordPress 6.x

// Исходники шире или выше 2048 px будут уменьшены до этого предела
add_filter( 'big_image_size_threshold', function () {
    return 2048;
} );

// Качество сжатия при генерации размеров (по умолчанию 82)
add_filter( 'wp_editor_set_quality', function ( $quality, $mime_type ) {
    if ( 'image/jpeg' === $mime_type ) {
        return 78;
    }

    return $quality;
}, 10, 2 );

Правьте только дочернюю тему. Код в functions.php родительской темы исчезнет при следующем обновлении.

Проверка: загрузите фотографию шириной 3000 px. В медиабиблиотеке у неё должен появиться файл с -scaled в имени, а размер по данным библиотеки — 2048 пикселей по длинной стороне.

Сабсайз (sub-size) — автоматически созданная копия загруженного изображения в меньшем разрешении. WordPress подставляет подходящий сабсайз в атрибут srcset, а браузер выбирает из списка файл под ширину экрана. Поэтому на мобильном устройстве нужный файл может оказаться в четыре раза легче, чем на десктопе — но только если сабсайзы существуют.

Шаг 3. Загрузите картинку и заполните alt

1. В редакторе страницы добавьте блок «Изображение» и перетащите файл в область загрузки.
2. В правой панели заполните поле «Альтернативный текст»: что на картинке, одной фразой, без «фото» и «картинка». Это текст для скринридеров и для случая, когда файл не загрузился.
3. Там же в панели выберите размер отображения. Если блок узкий, не ставьте «Полный размер» — возьмите «Крупный» или «Средний».

Поле «Подпись» заполняйте, только если подпись должна быть видна читателю. Поле «Описание» на внешний вид страницы не влияет.

Проверка: откройте страницу, нажмите на изображении правую кнопку → «Исследовать элемент». В теге должны быть непустой alt, список файлов в srcset и атрибут loading="lazy" — ядро добавляет его само с версии 5.5. Для первой картинки на экране WordPress 6.3 и новее вместо lazy ставит fetchpriority="high", это нормально.

Шаг 4. Подключите сжатие и WebP

WordPress принимает загрузку WebP с версии 5.8 и AVIF с версии 6.5, но сам не конвертирует ваши JPEG в эти форматы. Нужен плагин. Рабочие варианты: ShortPixel, Imagify, EWWW Image Optimizer, Converter for Media. Все работают по одной схеме — сжимают файлы на своих серверах или локально и складывают рядом копию в WebP.

1. Поставьте один плагин. Два одновременно пережмут один файл дважды и дадут заметную кашу вместо фотографии.
2. В настройках выберите «потерийное» (lossy) сжатие — выигрыш там в разы больше, а разница на глаз обычно не видна. Для фотографий товаров сравните пару файлов до и после, прежде чем запускать массовую обработку.
3. Включите генерацию WebP и подстановку его в HTML. Лимиты бесплатных тарифов и цены у всех сервисов меняются, актуальные сверяйте на странице тарифов плагина.
4. Запустите массовую обработку библиотеки.

Проверка: в DevTools на вкладке Network обновите страницу и посмотрите колонку Type у картинок. Должно быть webp, а суммарный вес изображений — заметно меньше, чем был.

Шаг 5. Перегенерируйте старые файлы

Картинки, загруженные до смены настроек, остаются в старых размерах. Если на хостинге есть WP-CLI, быстрее всего так:

# создать только отсутствующие размеры, не трогая существующие
wp media regenerate --only-missing

# пересоздать все размеры без вопросов (сначала бэкап)
wp media regenerate --yes

Без доступа к консоли ту же задачу решает плагин массовой перегенерации миниатюр или встроенная функция плагина оптимизации.

Проверка: откройте старую запись и посмотрите srcset у картинки. В списке должны появиться новые размеры.

Если не получилось

• «Ошибка HTTP» при загрузке. Чаще всего PHP не хватает памяти на обработку большого файла. Попробуйте уменьшить исходник до 2000 px и загрузить снова. Если помогло — просите хостинг поднять memory_limit, в типовых случаях до 256M.
• «Превышен максимальный размер загружаемого файла». Лимит задан в PHP (upload_max_filesize и post_max_size) и правится на стороне хостинга, а не в админке. Текущее значение видно в Медиафайлы → Добавить медиафайл под областью загрузки.
• «Не удалось записать файл на диск». Нет прав на запись в wp-content/uploads или место на диске закончилось. Проверьте квоту в панели хостинга, потом права на папку.
• Картинка на странице размытая. Тема подставляет сабсайз меньше, чем нужно блоку. Увеличьте «Крупный размер» в настройках, перегенерируйте файлы и выберите другой размер в блоке изображения.
• WebP не появился в Network. Чаще всего мешает кеш: страница отдаётся из кеширующего плагина или CDN, где лежит старая версия HTML. Сбросьте оба кеша и перезагрузите страницу с Ctrl+Shift+R.

Что делать дальше

Прогоните главную и одну внутреннюю страницу через PageSpeed Insights и посмотрите на показатель LCP — время отрисовки самого крупного элемента. На страницах с большой картинкой в шапке именно она чаще всего и есть LCP-элемент, так что весь выигрыш от этой настройки будет виден в этой цифре.

Дальше имеет смысл завести себе правило на каждую загрузку: ресайз до нужной ширины, качество 78, непустой alt. Это дешевле, чем раз в год перегенерировать библиотеку целиком. Отдельная тема, которую здесь не разбираем, — отдача картинок через CDN и настройка заголовков кеширования; к ней стоит возвращаться, когда трафик вырастет настолько, что хостинг перестанет справляться.