SEO-оптимизация изображений в WordPress для повышения скорости и видимости в поисковых системах

Не загружайте .png, если можно обойтись .webp. Поддержка формата webp встроена в большинство браузеров и тем WordPress с 5.8. Если работаете на версии ниже – обновляйтесь или подключайте поддержку через фильтр upload_mimes.

Избыточная детализация на фото с шириной 300px – бессмысленна. Сжатие без пересчёта размеров – путь в никуда. Используйте add_image_size(), чтобы задать собственные пропорции и не надеяться на кривую работу thumbnail и medium_large.

Важно: WordPress автоматически генерирует до 10 дубликатов при загрузке. Отключите ненужные через фильтр intermediate_image_sizes_advanced.

CDN не решает всех проблем. Он ускоряет отдачу, но не убирает мусор из медиабиблиотеки. Работайте с физическим весом. Используйте wp_get_attachment_image_src() и избегайте вызова оригинала в wp_get_attachment_url().

Минимум – это включить image/webp через functions.php. Максимум – рендерить картинки через picture и задавать srcset вручную. WordPress не всегда корректно подставляет sizes при кастомных блоках.

Внимание! Использование плагинов с авто-сжатием без контроля приводит к потере деталей даже на ретина-дисплеях. Проверяйте результат вручную или через Lighthouse.

Удаляйте неиспользуемые вложения. Плагин Media Cleaner помогает, но обязательно делайте резервную копию базы. Некоторые темы хранят ссылки на изображения в мета-данных – удаление может сломать вёрстку.

Не используйте lazyload глобально – он ломает встраивание в первом экране. Обходите стандартный фильтр wp_lazy_loading_enabled и отключайте по условию через is_front_page().

Каждое изображение должно быть частью задачи, а не украшением. Не тяните мусор в продакшн. Контент без структуры – это просто пиксели.

Выбор формата изображений для быстрой загрузки страниц

WebP – приоритетный тип. Поддерживается большинством браузеров, сжимается лучше, чем JPEG и PNG. Файлы меньше, качество выше. Используйте его в первую очередь.

JPEG подходит только если WebP не работает на вашем сервере или вы сохраняете старые записи. Он хуже по компрессии, но совместим везде. PNG – только для прозрачности. Не используйте PNG для фотографий. Это ошибка.

Важно: если на сайте включена поддержка WebP, отключите автоматическое создание дубликатов JPEG. Это нагружает диск и увеличивает бэкапы.

Внимание! WordPress с версии 5.8 умеет работать с WebP, но не во всех темах и плагинах реализована полная поддержка. Проверьте вручную, чем рендерится <img>.

AVIF – новый претендент. Сжимает лучше, чем WebP. Проблема – слабая поддержка и ошибки при загрузке в медиатеку. Не рискуйте без тестов. Для массовых сайтов пока не стоит.

SVG? Используйте только для логотипов и иконок. Никогда не загружайте SVG напрямую без фильтрации. Это потенциальный XSS. Подключайте SVG через functions.php с проверкой MIME-типа:


function allow_svg_upload($mimes) {
  $mimes[\'svg\'] = \'image/svg+xml\';
  return $mimes;
}
add_filter(\'upload_mimes\', \'allow_svg_upload\');


На сайтах с WooCommerce избегайте тяжелых PNG. Продуктовая сетка должна летать. Используйте WebP, снижайте вес до 100 КБ.

Важно помнить: если ваш CDN не поддерживает WebP или AVIF, весь смысл их использования теряется. Проверяйте отклик через DevTools, а не по документации.

Тестируйте: Lighthouse покажет, где можно уменьшить размер. Но не верьте слепо – иногда качество страдает. Взвешивайте. Автоматизация – не панацея. TinyPNG, Squoosh, или ImageMagick в связке с WP-CLI – вот реальный контроль.

Картинки – это балласт или турбина. Выбирать вам.

Настройка автоматического сжатия изображений при загрузке

Подключите плагин Smush или ShortPixel. Первый работает на основе библиотеки reSmush.it, второй использует собственные API-серверы. У Smush бесплатный лимит – до 5 МБ за одно изображение, у ShortPixel – 100 картинок в месяц.

После активации ShortPixel перейдите в раздел Настройки → ShortPixel. Введите API-ключ. Установите тип сжатия – Lossy. Этот режим дает максимум. Без заметной потери качества. Обязательно активируйте опции:

• Удалять метаданные EXIF
• Создавать WebP версии
• Сохранять оригиналы в отдельной папке

Проверьте, чтобы функция автоматической обработки новых файлов была включена. Иначе придется сжимать вручную. Убедитесь, что кеш браузера сбрасывается. WebP может не подхватиться из-за устаревших заголовков.

Важно: не включайте одновременную работу нескольких плагинов сжатия. Конфликты неизбежны. Либо Smush, либо ShortPixel.

У Smush в разделе Bulk Smush активируйте автоматическую оптимизацию при загрузке. Не используйте функцию Lazy Load, если уже настроена от темы или другого плагина. Будет дублирование и глюки. Раздел Smush → Настройки – уберите галочку с «Изменить размеры на лету», если тема сама делает ресайзы.

Внимание! Некоторые темы генерируют десятки копий каждого файла. Проверьте через wp_get_attachment_image_src() – какие реально используются. Остальные – в утиль.

Чтобы ускорить ресайз и избежать нагрузки при массовой загрузке, используйте фоновую обработку через WP-CLI:

wp media regenerate --only-missing --yes

Если доступ к серверу ограничен, применяйте add_filter( \'wp_image_editors\', ... ) для замены стандартной библиотеки обработки на Imagick. Это позволит использовать асинхронную генерацию миниатюр и снизить нагрузку на память.

Сжатие без контроля – потеря времени. Проверяйте результат через DevTools. WebP должен грузиться по умолчанию. JPEG и PNG – только как fallback через <picture>.

Не забудьте о проверке разрешений сервера. Если права доступа к wp-content/uploads установлены некорректно, автоматическая компрессия работать не будет. Также проверьте поддержку WebP на сервере через phpinfo().

Использование атрибутов alt и title для улучшения SEO

Указывайте alt только тогда, когда картинка передаёт смысл. Если это фоновая графика или декоративный элемент – оставьте атрибут пустым: alt=\"\". Экранные читалки вас поблагодарят.

Не вставляйте туда ключевые фразы ради ключевых фраз. Поисковики уже не в 2010 году. Точное описание содержания – вот что работает.

• Не копируйте заголовок статьи в alt. Это мусор. Алгоритмы вас вычислят.
• Пишите коротко: до 10 слов. Не пишите роман.
• Убирайте стоп-слова. Никаких \»на\», \»в\», \»это\», \»изображение\».

Внимание! Один и тот же alt у нескольких картинок – это сигнал поисковику: спам.

Атрибут title – не для ранжирования. Его функция – подсказка при наведении курсора. Но в некоторых темах он конфликтует с скриптами. Проверяйте в devtools.

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

<img src=\"cat-on-laptop.jpg\" alt=\"Кот сидит на клавиатуре ноутбука\" title=\"Домашний кот на ноутбуке\">

Теперь нюанс: WordPress генерирует alt на основе заголовка медиафайла. Автоматически. И часто криво. Заменяйте руками через медиабиблиотеку или плагин типа \»Media Library Assistant\».

• Не редактируйте alt в блоке <img> через визуальный редактор – после обновления он может исчезнуть.
• Используйте фильтр wp_get_attachment_image_attributes в functions.php, чтобы задать шаблон:


add_filter( \'wp_get_attachment_image_attributes\', function( $attr, $attachment ) {
  if ( empty( $attr[\'alt\'] ) ) {
    $attr[\'alt\'] = get_the_title( $attachment->ID );
  }
  return $attr;
}, 10, 2 );


Важно помнить: неправильный alt хуже, чем отсутствие. Искажает контекст. Убивает доступность.

Ленивая загрузка изображений без сторонних плагинов

Просто добавьте атрибут loading=\"lazy\" к каждому тэгу <img>. Никаких подключений. Никаких зависимостей. С версии 5.5 это встроено в ядро.

Так работает ядро: если браузер поддерживает отложенную подгрузку, он будет ждать, пока объект окажется в зоне видимости. Меньше запросов. Быстрее рендер.

Пример:


<img src=\"image.jpg\" alt=\"Описание\" loading=\"lazy\">


WordPress сам проставляет loading=\"lazy\" при использовании wp_get_attachment_image() или функции the_post_thumbnail(). Не вмешивайтесь – ядро всё делает корректно.

Но если вставляете через HTML вручную или используете кастомные поля – проверьте. Часто забывают. Пропустили? Потеряли скорость на первом экране.

Важно! Никогда не добавляйте loading=\"lazy\" на логотип в шапке или изображения, которые видны без прокрутки.

Управление вручную? Отключите автоматическое добавление лени при помощи фильтра:


add_filter( \'wp_lazy_loading_enabled\', \'__return_false\' );


Но только если точно понимаете, зачем. Иначе убьете весь смысл.

Если хотите полный контроль, напишите свою логику в фильтре wp_img_tag_add_loading_attr:


add_filter( \'wp_img_tag_add_loading_attr\', function( $value, $image, $context ) {
if ( $context === \'the_content\' ) return \'lazy\';
return false;
}, 10, 3 );


Контекст решает всё. Админ-панель? Не надо. Главная? Да. Карточки товаров? Однозначно.

Помните: ленивая загрузка экономит трафик, но злоупотребление ей убивает пользовательский опыт.

Не ставьте её вслепую. Анализируйте поведение, следите за LCP в Web Vitals. Экспериментируйте, отключайте выборочно. Всё зависит от шаблона.