Большие изображения часто заметно замедляют загрузку страниц WordPress: посетителю приходится скачивать файлы, которые гораздо крупнее их отображаемого размера. Оптимизация помогает уменьшить вес без видимого ухудшения картинки, но полностью избежать потерь можно не при каждом способе сжатия. Практичный подход — подготовить изображение в подходящем размере, выбрать формат под его содержание и сравнить результат до публикации.
Сначала определите, что именно нужно оптимизировать
Проверьте вес и размеры изображений на странице, которая загружается медленно. В браузере откройте инструменты разработчика и вкладку Network (Сеть), перезагрузите страницу и отфильтруйте запросы по изображениям. Так можно увидеть, какие файлы самые тяжёлые и какого размера их запрашивает браузер. Для быстрой проверки подойдут также отчёты PageSpeed Insights, но они оценивают страницу целиком и не заменяют просмотр самих файлов.
Сравните размер изображения в пикселях с его фактическим отображением. Фотография шириной 3000 пикселей, показанная в колонке шириной 700 пикселей, обычно не нуждается в исходном разрешении. При этом учитывайте экраны с высокой плотностью пикселей: для изображения, отображаемого шириной 700 CSS-пикселей, вариант примерно вдвое шире может быть полезен на таких экранах. WordPress часто формирует несколько размеров и добавляет атрибуты srcset и sizes, чтобы браузер мог выбрать подходящий файл, но это работает только если тема выводит изображения штатными средствами и загружены нужные варианты.
Выберите формат по содержанию изображения
Универсально лучшего формата нет. Для фотографий обычно подходят JPEG или WebP: при настройке с потерями они заметно уменьшают размер, но степень потери зависит от содержимого и параметров экспорта. Для логотипов, схем и иллюстраций с чёткими линиями чаще удобнее PNG, если важны прозрачность или точность границ. Для простой графики с небольшим числом цветов может подойти GIF, но для новых статичных изображений обычно разумнее рассмотреть PNG или WebP.
WebP поддерживает как сжатие с потерями, так и без потерь, а также прозрачность. AVIF может дать компактный файл, однако его создание зависит от возможностей библиотеки обработки изображений на сервере, а обработка может быть медленнее. Современные браузеры поддерживают WebP и AVIF, но перед заменой файлов проверьте совместимость со своей аудиторией и способы отдачи формата. Если конвертер или плагин создаёт альтернативные форматы, он должен обеспечить правильную выдачу браузерам; простое переименование расширения файл не конвертирует.
В WordPress возможность загрузить и обработать конкретный формат зависит от версии и сервера. WordPress поддерживает загрузку WebP начиная с версии 5.8, если формат поддерживается установленной библиотекой обработки изображений. Поддержка AVIF появилась в WordPress 6.5 и тоже зависит от сервера. Если загрузка отклоняется или не создаются миниатюры, проверьте версию WordPress и наличие поддержки формата в GD или Imagick у хостинга.
Подготовьте изображение до загрузки
Для каждого файла задайте размеры, близкие к максимальному размеру его отображения на сайте. Не уменьшайте картинку до ширины одного небольшого экрана, если тема использует её в широком блоке или выводит в нескольких колонках. Для обложки статьи, карточки записи и изображения внутри текста могут понадобиться разные размеры и кадрирование.
Экспортируйте файл в цветовом пространстве sRGB — оно подходит для отображения в браузерах. Для JPEG и WebP с потерями начните с качества около 80 и сравните картинку при масштабе 100% с исходником. Это отправная точка, а не универсальная настройка: мелкий текст, шумные фотографии и градиенты по-разному реагируют на сжатие. Если заметны артефакты, поднимите качество; если различий при просмотре нет, можно проверить более низкое значение. Для PNG сжатие без потерь сохраняет пиксели, но не всегда уменьшает файл так же эффективно, как формат с потерями.
Сохраняйте оригиналы отдельно, особенно если обрабатываете изображения пакетно. После загрузки WordPress создаёт производные размеры для темы и блоков, но не стоит рассчитывать, что медиатека заменит подготовку слишком большого исходника. Удаление метаданных, например сведений о камере, иногда дополнительно уменьшает файл. Если метаданные важны для рабочего процесса или публикации, не удаляйте их автоматически.
Загрузите файл в медиатеку и проверьте варианты размеров
Загружайте подготовленные изображения через «Медиафайлы → Добавить новый» или непосредственно в редактор записи. После загрузки WordPress создаёт миниатюры и другие размеры, предусмотренные настройками, темой и плагинами. Если нужные размеры не сформировались, возможны ограничения хостинга, неподдерживаемый формат или ошибка обработки. В таком случае проверьте журнал ошибок сервера либо обратитесь в поддержку хостинга, а не загружайте один и тот же файл многократно.
В редакторе выберите подходящий размер изображения, а не обязательно «Полный размер». Для контента обычно достаточно размера, который соответствует ширине области статьи; исходник выбирайте, только если он действительно нужен. Чтобы браузер мог подобрать файл под экран, не вставляйте изображение способом, который удаляет созданные WordPress атрибуты адаптивной загрузки. Если тема или конструктор используют собственный вывод, проверьте на опубликованной странице, что в разметке присутствуют корректные srcset и sizes.
Настройте отложенную загрузку без задержки главного изображения
Lazy load откладывает загрузку изображений, которые находятся за пределами видимой области экрана. Это может сократить объём данных при первом открытии страницы, но картинка в верхней части страницы — например, главный баннер — должна загружаться сразу. Если отложить её, появление самого заметного изображения может задержаться.
WordPress автоматически добавляет атрибут loading='lazy' к подходящим изображениям, а для вероятного главного изображения может использовать fetchpriority='high'. Поведение зависит от версии WordPress и контекста вывода. Если установлен плагин оптимизации или тема управляет загрузкой изображений самостоятельно, проверьте результат: не должно быть двух конкурирующих настроек, которые откладывают загрузку баннера или первой фотографии. Не добавляйте lazy loading вручную ко всем изображениям без исключений.
Плагин или ручная подготовка: что выбрать
Если на сайте регулярно появляются новые фотографии, плагин оптимизации может сжимать файлы при загрузке, создавать WebP или AVIF и обрабатывать уже существующую медиатеку. Перед установкой проверьте, какие именно действия он выполняет: одни сервисы обрабатывают изображения на сервере, другие отправляют их во внешний сервис. Условия, ограничения бесплатных тарифов и способ доставки форматов различаются.
Начните с нескольких тестовых файлов, сравните визуальное качество и вес, затем проверьте отображение на сайте. Уточните, сохраняет ли плагин оригиналы и можно ли восстановить их после оптимизации. Если он заменяет файлы в медиатеке или удаляет оригиналы, сделайте резервную копию сайта и файлов до обработки всей библиотеки. Массовая оптимизация может быть необратимой, а замена форматов — повлиять на ссылки, кэш и работу CDN.
Для небольшого сайта, где изображения загружаются время от времени, достаточно подготовить их в графическом редакторе и следить за размерами. Плагин удобнее, когда файлов много или несколько редакторов регулярно загружают изображения и не могут обрабатывать каждое вручную. Не запускайте одновременно несколько инструментов, которые повторно сжимают одни и те же файлы: повторное сжатие JPEG или WebP может ухудшить качество.
Проверьте результат на опубликованной странице
После загрузки откройте страницу в браузере и убедитесь, что изображения не размыты, не обрезаны неожиданным образом и отображаются на мобильном экране. В инструментах разработчика проверьте, какой файл браузер действительно загрузил: иногда на странице остаётся старая версия из кэша или CDN. Очистите кэш сайта и CDN после массовой замены изображений, если изменения не видны.
Сравните вес файлов до и после оптимизации, а также повторно проверьте страницу в Network. Убедитесь, что браузер не загружает оригинал для небольшого превью и что главное изображение не ждёт прокрутки. В отчётах производительности смотрите не только на общий балл, но и на конкретные замечания: слишком крупное изображение, неподходящий формат или задержка загрузки часто указывают на следующий шаг. Оптимизация удачна, когда файлы стали легче, визуальная разница приемлема, а сайт загружает подходящий размер для каждого места показа.