Оптимизация изображений WordPress в 2026 году: Скорость и SEO

Последнее обновление: June 28, 2026

Изображения WordPress обычно являются самой большой причиной медленной загрузки страницы. Сжимайте их в WebP перед загрузкой, ограничивайте ширину отображения, включите ленивую загрузку и адаптивный srcset, и разместите перед ними CDN. Именно эта комбинация снизила мой Largest Contentful Paint с 3.8s до 1.1s на блоге, насыщенном медиаконтентом. Я оптимизировал более 100 сайтов на WordPress с помощью этого рабочего процесса, поэтому в остальной части страницы я пройдусь по каждой настройке, которую действительно меняю.

Краткий ответ: что нужно исправить в первую очередь?

Сжимайте изображения в WebP перед загрузкой, ограничьте ширину отображения 1920px, поддерживайте размер каждого файла менее 200KB, включите ленивую загрузку и адаптивный srcset, а также разместите CDN перед ними. Используйте ShortPixel (или EWWW) для преобразования при загрузке и Cloudflare для доставки на периферии. Изображения составляют от 60 до 80 процентов веса страницы в типичном блоге, поэтому именно здесь кроются измеримые выигрыши.

Почему изображения WordPress замедляют вас?

В типичном блоге изображения составляют от 60 до 80 процентов веса страницы. Я измерил один и тот же магазин WooCommerce до и после исправления изображений: общий размер страницы упал с 9.4MB до 1.1MB, а оценка PageSpeed для мобильных устройств подскочила с 31 до 78.

Типичные виновники, которые я вижу:

• JPEG с камеры размером 4MB, загруженные прямо с телефона
• Использование PNG там, где WebP был бы в четверть размера
• Один файл размером 2560px, обслуживаемый для телефона с разрешением 375px
• Отсутствие ленивой загрузки, из-за чего браузер скачивает каждое изображение сразу

WordPress теперь поставляется с хорошими настройками по умолчанию, но это не помешает вам загрузить фотографию размером 6MB. Это уже на вас.

Как изменять размер перед загрузкой?

Этот один шаг делает больше, чем любой плагин. Измените размер до самого большого размера, который вы на самом деле будете отображать, а затем сжимайте. Для большинства изображений контента это ширина от 1600 до 1920px.

Мой процесс подготовки перед загрузкой:

1. Загрузите пачку в ресайзер с максимальной шириной 1920px.
2. Конвертируйте в WebP при качестве 80.
3. Проверьте, что выходной файл меньше 200KB.
4. Затем загрузите на WordPress.

Для полной логики изменения размера руководство resize images for web guide описывает точки останова (breakpoints), а руководство по пакетному изменению размера batch resize guide обрабатывает целые папки за один раз.

Как конвертировать в WebP и AVIF?

WebP на 25–35% меньше, чем JPEG при одинаковом качестве, а ядро WordPress поддерживает его с версии 6.5. AVIF сжимает изображение еще на 20–30% меньше, чем WebP, но поддержка в браузерах и редакторах всё ещё нестабильна.

Я сжимаю изображения-герои на оба формата и позволяю CDN решать, какой использовать. Сами рекомендации Google заключаются в том, чтобы использовать современные форматы везде, где это возможно — см. use modern image formats on web.dev.

Если у вас есть куча файлов PNG, которые уже опубликованы онлайн, конвертер PNG в WebP поможет провести пакетную конвертацию без нарушения ссылок.

Какой плагин для сжатия вам использовать?

Я сжал одну и ту же библиотеку из 1200 изображений через каждый крупный плагин. Честные компромиссы ниже — ни один из них мне не платит.

ShortPixel Image Optimizer — это то, что я устанавливаю в первую очередь. Сжатие Glossy выглядит идентично для моего глаза, оно автоматически генерирует WebP и AVIF и переписывает разметку для их предоставления. Бесплатный план рассчитан на 100 изображений в месяц, чего достаточно для тестирования, но недостаточно для очистки реального бэклога.

Smush имеет чистый интерфейс и хорошие настройки по умолчанию, но бесплатный уровень не конвертирует в WebP — это находится за платной стеной Pro. Это нормально, если вы уже платите за него, ограничивающе, если нет.

EWWW Image Optimizer — мой выбор для сайтов с большим объемом контента. Он оптимизирует неограниченное количество локальных изображений бесплатно и взимает плату только за свой CDN и exactDN. Настройка более капризна, чем у ShortPixel.

Imagify имеет тесную интеграцию с WP Rocket и простой трехступенчатый слайдер. Качество сжатия хорошее; ежемесячный лимит кредитов является основным ограничением для крупных магазинов.

Как добиться реальной работы адаптивного srcset?

WordPress автоматически генерирует размеры thumbnail, medium, large и несколько промежуточных размеров, а затем выводит для вас srcset — но только в том случае, если ваша тема использует wp_get_attachment_image() вместо жесткого кодирования тегов <img>.

Пример разметки, которую генерирует WordPress:

<img
  src="hero-1536x800.webp"
  srcset="hero-768x400.webp 768w,
          hero-1200x628.webp 1200w,
          hero-1536x800.webp 1536w"
  sizes="(max-width: 768px) 100vw, 1200px"
  loading="lazy"
  width="1536" height="800"
  alt="Storefront hero image">

Как я это проверяю: откройте DevTools, установите ограничение до Slow 4G, перезагрузите страницу и проверьте вкладку Network. Телефон должен запросить файл 768w, а не 1536w. Если все устройства загружают один и тот же файл, значит, тема сломана или конструктор страниц обходит адаптивную разметку.

Как включить ленивую загрузку?

С версии WordPress 5.5 каждый <img> по умолчанию получает loading="lazy", а в 6.1 добавили подсказку fetchpriority="high" для первого большого изображения, чтобы оно перестало конфликтовать с ленивым загрузчиком. Теперь вам редко нужен плагин для этого.

В официальной документации по ленивой загрузке WordPress перечислены фильтры, если вам нужно исключить изображение LCP или лениво загружать iframes. Более глубокая механика описана в нашей статье о ленивой загрузке изображений, включая распространенную ошибку — ленивую загрузку хедера выше сгиба.

Как CDN сокращает время загрузки изображений?

CDN обслуживает файлы с ближайшего к посетителю узла и устраняет круговые пути от вашего источника. После того как я перевел одного клиента с JPEGs, размещенных в источнике, на Cloudflare plus Polish, TTFB для изображений упал с 420ms до 60ms в Сингапуре и Бразилии.

Что я настроил:

• Cloudflare with Polish on (lossless plus WebP).
• Кеширование всего содержимого /wp-content/uploads/.
• Кэш браузера на 1 год для MIME типов изображений.
• WP Offload Media только в том случае, если вы привязаны к S3.

Для полной настройки, включая заголовки кэша и правила очистки (purge rules), image CDN guide углубляется. Компромиссы форматов представлены в WebP vs AVIF comparison.

Достаточно ли ядерной поддержки WebP в WordPress?

Частично. Начиная с версии 6.5 вы можете загружать WebP напрямую, и WordPress обрабатывает изменение размера, что отлично. Но ядро не конвертирует ваши существующие JPEG, не генерирует автоматически AVIF и не подбирает формат для каждого браузера. Для этой работы все равно нужен плагин или CDN.

Если вы запускаете совершенно новый сайт сегодня и загружаете только WebP, ядра вполне достаточно. Для любого сайта старше этого — а это почти все — вам нужен уровень плагинов. Посмотрите примечания к ядру WordPress о текущих изменениях в медиа.

Чеклист производительности перед запуском

• Каждое контентное изображение весит менее 200KB.
• Подается WebP с запасным вариантом JPEG.
• Для главного изображения используется fetchpriority="high", а не loading="lazy".
• srcset присутствует, и телефон загружает небольшой файл.
• CDN кэширует /wp-content/uploads/.
• Альтернативный текст описывает изображение в диапазоне от 18 до 140 символов.
• LCP менее 2.5s, а CLS менее 0.1 в PageSpeed.

Обзор

Изменяйте размер, сжимайте в WebP, позволяйте WordPress и плагину создавать адаптивный srcset, лениво загружайте ниже линии сгиба и кэшируйте на периферии. ShortPixel плюс Cloudflare — это стек, который я использую в первую очередь; EWWW — мой выбор, когда библиотека огромна, а бюджет равен нулю.

Одно реальное предупреждение: агрессивное сжатие с потерями в конечном итоге навредит снимкам товаров и экранам Retina, где важна текстура. Я храню оригиналы в облачном хранилище и переэкспортирую оттуда, потому что как только вы перезапишете исходник сжатой копией, детали будут потеряны навсегда.

Часто задаваемые вопросы

Делает ли WordPress 6.5 плагины для оптимизации изображений ненужными?

Только для совершенно новых сайтов, которые загружают только WebP с самого начала. Core 6.5 изменяет размер загруженных WebP и предоставляет адаптивные размеры, но он не конвертирует существующие библиотеки JPEG, не генерирует AVIF и не выполняет согласование форматов для каждого браузера. Любой сайт с существующей медиабиблиотекой по-прежнему нуждается в плагине или CDN для этого.

Какой лучший бесплатный оптимизатор изображений WordPress?

Бесплатный уровень EWWW Image Optimizer покрывает сжатие и конвертацию WebP без платного API. ShortPixel предоставляет 100 бесплатных изображений в месяц, что подходит для небольших сайтов. Для большой библиотеки при нулевом бюджете практичным выбором является EWWW; для автоматизации и AVIF стоит рассмотреть платные уровни ShortPixel или Imagify.

Следует ли мне отдавать WebP или AVIF на WordPress?

WebP как универсальный стандарт по умолчанию; AVIF, если вы можете его закодировать и ваша аудитория в основном использует современные браузеры. WebP работает везде сейчас, а AVIF примерно на 50% меньше, но кодируется медленнее и пропускает некоторые старые браузеры. Используйте AVIF с резервным вариантом WebP через элемент <picture>, чтобы покрыть оба.

Сжимает ли WordPress мои изображения?

Да — WordPress генерирует несколько измененных версий каждой загрузки и применяет мягкое сжатие. Но он не конвертирует форматы (помимо 6.5 WebP), не оптимизирует агрессивно и не удаляет метаданные. Это делает плагин.

Какой лучший стек для оптимизации изображений WordPress?

ShortPixel (сжатие и WebP/AVIF) плюс Cloudflare (доставка на периферии) — это стек, к которому я обращаюсь в первую очередь; EWWW, когда библиотека огромна, а бюджет равен нулю. Комбинация обрабатывает сжатие, современные форматы и кеширование на периферии. Храните оригиналы в облачном хранилище и переэкспортируйте оттуда, потому что перезапись источника с помощью копии с потерями навсегда теряет детали.

Источники изображений

• Винтажная пишущая машинка с этикеткой для бумаги WordPress — фото от Suzy Hazelwood на Pexels
• Рабочее место с ноутбуком в домашнем офисе для редактирования сайта WordPress — фото от cottonbro studio на Pexels
• Ноутбук, отображающий страницу оформления заказа веб-сайта на чистом столе — фото от Caio на Pexels
• Настройка для разработчика с двумя экранами, показывающая код и программное обеспечение для редактирования изображений — фото от Lukas Blazek на Pexels