Содержание статьи
Не загружайте .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. Экспериментируйте, отключайте выборочно. Всё зависит от шаблона.