Skip to content

Всё для WordPress, веб-разработки — и не только

🖼 Оптимизация изображений в WordPress: полное руководство

🖼 Оптимизация изображений в WordPress: полное руководство

Загрузили десяток фото с телефона, сайт пополз. Страница открывается шесть секунд, Google роняет позиции, хостинг шлёт предупреждение о диске. Знакомо? По данным HTTP Archive, на 2026 год изображения, примерно 45% веса средней веб-страницы. Для сайта с медиатекой на пару гигабайт это прямые потери: отказы, просевшее SEO, раздутые бэкапы. Порядок наводится за вечер.

💡 Быстрый обзор:

  • Конвертируйте JPEG и PNG в WebP или AVIF: размер снижается на четверть и больше при том же визуальном качестве.
  • Настройте авторесейз через Imsanity или Smush: гигантские загрузки с телефона уходят навсегда.
  • Включите ленивую загрузку: WordPress делает это из коробки с версии 5.5, одной галочкой.
  • Поставьте плагин сжатия (Smush, ShortPixel или EWWW): массово прожмёт медиатеку и подчистит старые файлы.
  • Заполните alt-текст у каждого изображения: поисковики видят картинки только через него.

Готовим изображения до загрузки

Пример изменения размера изображения перед загрузкой

Загружать фото шириной 4000 пикселей в блог с контентной областью 750 пикселей бессмысленно. WordPress создаст уменьшенные копии, но оригинал останется мёртвым грузом. Перед загрузкой уменьшите изображение до 1200-1600 пикселей по ширине, запас под retina. Инструменты: встроенный Paint, онлайн Easy Resize или любой редактор.

Сравнение форматов изображений JPEG и PNG

Правило формата: фотография, JPEG, логотип/скриншот с текстом, PNG. С 2020-х в вебе закрепились WebP (на 25-34% легче JPEG, по данным Google) и AVIF (до 50% легче). Конвертировать можно через Squoosh или отдать плагину, почти каждый из списка ниже умеет генерировать WebP-копии автоматически.

Качество: снижение JPEG с 12 до 8 (шкала Photoshop) режет размер вдвое при незаметной разнице. Стандарт для веба, 80-85%. Бесплатный TinyPNG делает то же самое перетаскиванием файла в браузер.

Имена файлов: не IMG_4827.jpg, а kak-szhat-izobrazheniya-wordpress.jpg. Без пробелов, со спецсимволами, с ключевым словом. Поисковики учитывают имя файла при индексации картинок.

Метаданные после загрузки

Файл загружен, работа не закончена. Alt-текст: 4-8 слов, описательно, с ключевым словом. Не «фото1», а «сравнение форматов WebP и JPEG в WordPress». Заголовок и описание помогают в медиатеке и участвуют в SEO. Встроенный редактор WordPress позволяет повернуть, обрезать и масштабировать прямо после загрузки.

Если сменили тему или зарегистрировали новые размеры через add_image_size(), плагин Regenerate Thumbnails (миллион установок) пересоздаёт все размеры одним нажатием.

Интерфейс плагина Regenerate Thumbnails для массовой обработки

Плагины для сжатия: сравнение

Ручная подготовка хороша для новых загрузок. Но с гигабайтами уже загруженных файлов работают плагины: сжимают, конвертируют в WebP/AVIF и массово обрабатывают медиатеку.

Плагин

Бесплатно

WebP/AVIF

Ленивая загрузка

CDN

Установок

Smush

Да, безлимитно

WebP+AVIF в Pro

Да

Да (Pro)

1 млн+

ShortPixel

100 кредитов/мес

Да

Да

Да

300 тыс.+

EWWW

Да, безлимитно

WebP бесплатно, AVIF в Pro

Да

Да (Pro)

Активно

TinyPNG

500 кредитов/мес

Да

Нет

Нет

Активно

Imsanity

Да

Нет (только ресайз)

Нет

Нет

200 тыс.+

Optimus

100 КБ на файл

WebP в HQ

Нет

Нет

30 тыс.+

Smush

Миллион установок, рейтинг 4,8. Бесплатная версия: сжатие без видимой потери качества, авторесейз, ленивая загрузка, Directory Smush для папок вне медиатеки. Pro ($6/мес): WebP, AVIF, CDN на 119 серверов, автоисправление width/height для устранения CLS. Минус: файлы свыше 5 МБ в бесплатной версии пропускаются. 🔗 Smush на WP.org

ShortPixel

Интерфейс плагина ShortPixel для сжатия изображений

300 тыс.+ установок. Три режима сжатия (lossless, lossy, glossy), AI-генерация alt-текстов на 100+ языках, фоновый режим без открытой вкладки браузера. Сжимает JPEG, PNG, GIF, WebP, AVIF и PDF. 100 кредитов/мес бесплатно, Unlimited, $9,99/мес. 🔗 ShortPixel на WP.org

EWWW Image Optimizer

Единственный плагин с полностью локальным сжатием (jpegtran, optipng, cwebp, инструменты вашего сервера). Бесплатно: неограниченное сжатие, WebP, ленивая загрузка с автоскейлингом, WP-CLI. Pro: AVIF, CDN, водяные знаки, PDF. Минус: настройка сложнее конкурентов. 🔗 EWWW на WP.org

TinyPNG

Плагин TinyPNG с пандой на логотипе для сжатия изображений

Та самая панда с tinypng.com в виде плагина. Сжимает JPEG, PNG, WebP, конвертирует в AVIF. 500 кредитов/мес бесплатно, примерно 50-100 фото с учётом размеров WordPress. Интерфейс предельно простой, сжатие без видимой потери. Минус: нет CDN и ленивой загрузки. 🔗 TinyPNG на WP.org

Imsanity

Плагин Imsanity для автоматического ресайза изображений

200 тыс.+ установок, рейтинг 4,9. Не сжимает, режет размеры. Задаёте максимум ширины и высоты, и каждый загруженный файл автоматически масштабируется. Автор, Shane Bishop (тот же, что делает EWWW). Идеальная пара: Imsanity для авторесейза + EWWW для сжатия. Полностью бесплатно. 🔗 Imsanity на WP.org

Optimus

Настройки плагина Optimus для оптимизации изображений

30 тыс.+ установок от команды KeyCDN. Минимальный вес плагина (0,19 МБ), серверы в Германии с немедленным удалением файлов после обработки. Бесплатная версия ограничена 100 КБ на файл, это демо. HQ снимает лимиты и добавляет WebP. 🔗 Optimus на WP.org

Ленивая загрузка

С версии 5.5 WordPress добавляет нативный loading="lazy" ко всем изображениям с width и height. Для большинства сайтов этого достаточно. Если нужно больше, плагины:

Плагин Lazy Load for Videos для отложенной загрузки видео

Lazy Load for Videos заменяет YouTube- и Vimeo-плееры на кликабельную превьюшку. Видео грузится только после клика, JavaScript не тормозит страницу.

Плагин BJ Lazy Load для отложенной загрузки контента

BJ Lazy Load, лёгкий плагин для изображений, миниатюр, граватаров и iframe с прозрачным плейсхолдером.

Плагин a3 Lazy Load для отложенной загрузки изображений

a3 Lazy Load, мобильно-ориентированный, с эффектами появления (fade, slide) и поддержкой WooCommerce.

Плагин Rocket Lazy Load для отложенной загрузки

Rocket Lazy Load от WP Media (авторов WP Rocket) заменяет изображения и iframe на заглушку. Не поддерживает видео, только изображения и фреймы.

На практике хватает связки «нативный lazy load + плагин сжатия со встроенной ленивой загрузкой (Smush или EWWW)». Отдельный плагин ставьте, только если стандартные средства не справляются.

Продвинутые инструменты

Эффект слайдера до и после с плагином Twenty Twenty

Twenty Twenty, бесплатный плагин-слайдер «до/после». Накладывает два изображения и даёт читателю ползунок для сравнения через шорткод [twentytwenty]. Идеально для кейсов оптимизации. 🔗 Twenty Twenty на WP.org

Draw Attention, интерактивные горячие точки поверх любого изображения.

Плагин Draw Attention для создания интерактивных изображений

Навёл курсор, подсказка, кликнул, ссылка. Бесплатная версия: одно интерактивное изображение. Pro (цена на сайте разработчика): безлимит, лайтбоксы, 20 цветовых палитр.

Создание горячих точек в плагине Draw Attention

Применение: интерактивные карты, схемы, планы помещений, инфографика. 🔗 Draw Attention на WP.org

Свои размеры изображений через код

Для регистрации кастомных размеров добавьте в functions.php:

1function custom_image_sizes() {
2 add_image_size( 'custom-medium', 480, 360, true );
3 add_image_size( 'custom-large', 1200, 900, true );
4}
5add_action( 'after_setup_theme', 'custom_image_sizes' );
6
7function show_custom_sizes( $sizes ) {
8 return array_merge( $sizes, array(
9 'custom-medium' => __( 'Средний (кастомный)', 'textdomain' ),
10 'custom-large' => __( 'Большой (кастомный)', 'textdomain' ),
11 ));
12}
13add_filter( 'image_size_names_choose', 'show_custom_sizes' );
Интерфейс плагина Regenerate Thumbnails для массовой обработки

После вставки кода новые размеры появятся в выпадающем списке при вставке изображения. Для существующих файлов запустите Regenerate Thumbnails.

⁉️🤔 Частые вопросы

Какой плагин сжатия лучший для новичка?

Smush: поставил, активировал, забыл. Бесплатная версия автоматически сжимает при загрузке и даёт массовую оптимизацию в один клик. WebP и AVIF, в Pro, но для старта хватает базовых функций.

Чем WebP отличается от AVIF и что выбрать?

WebP: экономия относительно JPEG (см. данные Google в разделе про форматы), поддержка во всех браузерах. AVIF: до 50% легче JPEG, Safari поддерживает с 2023 года. Совет: WebP как безопасный дефолт, AVIF для максимальной экономии трафика.

WordPress сам сжимает JPEG при загрузке, зачем плагин?

Встроенное сжатие WP работает с базовым алгоритмом на фиксированном уровне качества. Плагины (Smush, ShortPixel, EWWW) используют продвинутые алгоритмы и выжимают дополнительную экономию при том же визуальном качестве. Плюс конвертация в WebP/AVIF, то, что ядро не делает.

Нужна ли ленивая загрузка, если сайт на быстром хостинге?

Ленивая загрузка экономит не серверное время, а трафик посетителя и скорость отрисовки первого экрана. Нативный loading="lazy" в WordPress 5.5+ уже включён и не требует настройки.

Как проверить, насколько изображения тормозят сайт?

GTmetrix показывает конкретные файлы с рекомендациями по сжатию. PageSpeed Insights от Google даёт разбивку: «Serve images in next-gen formats», «Properly size images», «Efficiently encode images». Оба бесплатны.

Итоги: какой плагин выбрать

Порядок в изображениях, не разовая акция, а настройка, работающая годами. Потратьте вечер на установку, дальше плагин делает всё сам.

  • Новый блог, минимум возни: Smush Free. Сжатие при загрузке, массовая оптимизация, ленивая загрузка в одном плагине.
  • Интернет-магазин на WooCommerce: ShortPixel. AI генерирует alt-тексты для сотен товаров, фоновый режим без открытой вкладки.
  • Свой сервер, полный контроль: EWWW. Локальное сжатие без внешних API, неограниченный объём.
  • Параноидальная экономия: TinyPNG + Imsanity. Связка закрывает и гигантские загрузки, и пухлые JPEG.
  • Фотограф/портфолио: EWWW или ShortPixel в lossless-режиме. Качество не страдает, метаданные чистятся.

Начните с бесплатного Smush, он покажет, сколько места вы уже теряете. А какой плагин выбрали вы, расскажите в комментариях.