Каждый раз, когда я открываю PageSpeed Insights для нового клиента, одна и та же картина: оценка 45 из 100, красная зона LCP, а в диагностике — «Уменьшите размер изображений». При этом владелец бизнеса тратит месяцы на переписывание текстов и перенастройку рекламы, а главный тормоз сидит прямо перед ним — в папке с фотографиями товаров и баннерами.

Оптимизация изображений — это не про «сделать красиво». Это про то, чтобы ваш сайт не терял клиентов из-за того, что картинка в 4K грузится пять секунд на мобильном. И это единственная доработка, которая даёт мгновенный и измеримый результат без программиста.

Почему изображения — главный тормоз

Современные сайты на 60–80% состоят из медиа. Фотографии товаров, hero-баннеры, иконки, фоны — всё это весит больше, чем весь текст, CSS и JavaScript вместе взятые . И если картинка весит 2 мегабайта вместо 200 килобайт, браузер тратит время на скачивание, а клиент — на ожидание.

Цифры простые: 39% пользователей закроют сайт, если медиа грузится слишком долго . А каждая лишняя секунда загрузки снижает конверсию на 7% . При этом решение — технически простое и не требует редизайна.

Шаг 1. Меняем формат — от JPEG к WebP и AVIF

JPEG и PNG появились в 1990-х. Они работают, но неэффективны. Современные форматы дают то же качество при значительно меньшем весе :

• WebP — файлы легче JPEG и PNG на 25–35%, поддерживает прозрачность и анимацию .
• AVIF — ещё эффективнее. Тот же снимок, который в PNG весит 2100 КБ, в AVIF — 82 КБ. Это в 25 раз меньше при визуально неотличимом качестве .

Практически все современные браузеры поддерживают WebP и AVIF. Для старых версий настраивается fallback — автоматическая подмена на JPEG/PNG . Если вы используете WordPress, плагины Imagify или ShortPixel конвертируют библиотеку в один клик .

Шаг 2. Сжимаем без потери качества

Формат — полдела. Второе половина — сжатие. Я рекомендую целевой вес для веб-изображений: 200–300 КБ для больших фото, 50–100 КБ для средних . Достичь этого можно тремя путями:

Онлайн-сервисы — TinyPNG, Squoosh, Kraken.io. Загружаете файл, получаете сжатую версию. Удобно для разовой обработки .

Плагины CMS — для WordPress: Smush, ShortPixel, Imagify, EWWW Image Optimizer. Они сжимают автоматически при загрузке и могут обработать всю существующую библиотеку .

Графические редакторы — Photoshop, GIMP. Дают контроль над степенью сжатия и качеством. Подходит, если у вас есть дизайнер .

Важно: сжатие «без потерь» (lossless) уменьшает вес на 10–20%, «с потерями» (lossy) — до 80%, но при правильных настройках разница глазу не видна .

Шаг 3. Правильные размеры — никаких 5000 пикселей под 500

Классическая ошибка: загрузить фото с камеры в 4000×3000, а на сайте оно отображается в 800×600. Браузер всё равно скачивает 4000×3000. Решение — ресайзить до реальных размеров контейнера .

Для адаптивности используйте атрибуты srcset и sizes. Они позволяют браузеру выбрать подходящий файл в зависимости от ширины экрана: маленький для смартфона, средний для планшета, полный только для десктопа .

Шаг 4. Ленивая загрузка — но не для первого экрана

Lazy loading (loading="lazy") откладывает загрузку картинок до тех пор, пока пользователь не прокрутит к ним. Это ускоряет начальную отрисовку страницы и экономит трафик .

Но есть критическое исключение: никогда не применяйте lazy loading к LCP-изображению — той картинке, которая является самым крупным видимым элементом первого экрана . Если главный баннер или фото товара загружается лениво, браузер сначала пропускает её, потом считает layout, потом понимает, что она нужна, и только тогда начинает скачивание. Это добавляет 500 мс и более к LCP — прямой путь в красную зону .

Правило простое:

• Первый экран — fetchpriority="high", без loading="lazy".
• Всё ниже — loading="lazy".

В WordPress с версии 5.5 lazy loading включён по умолчанию для всех изображений. Для LCP-картинок его нужно принудительно отключить через фильтр или CSS-класс .

Шаг 5. SVG для иконок и простой графики

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

Практическая польза для бизнеса

Когда вы оптимизируете изображения, результат измеряется сразу:

• Вес страницы падает на 60–80%. Это напрямую снижает LCP и улучшает оценку в PageSpeed Insights .
• Мобильная скорость растёт. А 60–70% ваших клиентов заходят со смартфонов .
• Конверсия растёт. Быстрый сайт удерживает пользователей, а качественные фото товаров — убеждают покупать .
• Расходы на трафик падают. Легкие картинки = меньше данных через CDN и меньше нагрузка на сервер .

Для интернет-магазина это означает: клиент видит товар мгновенно, может увеличить фото без ожидания, и не уходит к конкуренту из-за «виснущей» страницы.

Типичные ошибки владельцев бизнеса

За годы работы я выделил пять ловушек:

1. Гонятся за оценкой 100 в PSI, жертвуя качеством фото. Картинка в 5 КБ выглядит как мыло — клиент не купит. Баланс: вес 150–300 КБ, качество 80–85%.
2. Забывают про мобильные. На десктопе всё летает, а на 4G страница весит 8 МБ. Проверяйте через эмулятор мобильной сети.
3. Используют lazy loading как «магию». Вешают на все картинки подряд, включая hero. LCP улетает в красную зону .
4. Игнорируют alt-тексты. Оптимизация изображений — это не только вес. Пустые alt — упущенный трафик из поиска по картинкам и минус в доступности .
5. Не чистят старые файлы. Библиотека WordPress разрастается: 10 версий одного фото, неиспользуемые заглушки, тяжёлые PDF-превью.

Вывод

Оптимизация изображений — единственная доработка, которая не требует программиста, даёт результат за день и напрямую влияет на деньги. Вы меняете формат, сжимаете файлы, настраиваете правильную загрузку — и получаете страницу, которая открывается в два раза быстрее.

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

Хотите узнать, сколько весят картинки на вашем сайте прямо сейчас?

Закажите экспресс-аудит. Проанализирую 10 ключевых страниц, покажем, какие изображения тормозят загрузку, и дам готовый план: что сжать, во что конвертировать и как настроить lazy loading — с конкретными цифрами экономии веса и времени загрузки

Заказать в телеграм

ЧЕК-ЛИСТ: Оптимизация изображений для бизнеса

• Проверить вес главной страницы через PageSpeed Insights или GTmetrix, зафиксировать текущий LCP
• Составить список всех изображений на первом экране (LCP-кандидаты)
• Убедиться, что LCP-изображения НЕ имеют атрибута loading="lazy"
• Добавить fetchpriority="high" к LCP-изображению
• Проверить фактические размеры отображения картинок и сравнить с загружаемыми
• Ресайзить все изображения до реальных размеров контейнера (не более 2× от отображаемого)
• Конвертировать все растровые изображения в WebP (минимум) или AVIF (оптимально)
• Настроить fallback на JPEG/PNG для старых браузеров через <picture> или плагин
• Сжать все файлы до целевого веса: hero-баннеры 150–300 КБ, обычные фото 50–150 КБ, иконки — SVG
• Настроить srcset и sizes для адаптивной подгрузки под разные экраны
• Включить lazy loading (loading="lazy") для всех изображений ниже первого экрана
• Заменить растровые иконки и логотипы на SVG
• Прописать релевантные alt-тексты для всех значимых изображений
• Проверить библиотеку CMS на неиспользуемые и дублирующие файлы, удалить лишнее
• Повторно замерить LCP и общий вес страницы после всех правок

ГАЙД: Оптимизация изображений в WordPress за 30 минут

Шаг 1. Установка плагина
Установите Imagify, ShortPixel или Smush. Imagify — лучший выбор для автоматической конвертации в WebP и AVIF .

Шаг 2. Массовая оптимизация
Запустите bulk-оптимизацию существующей медиабиблиотеки. Выберите режим «Smart Compression» — баланс качества и веса .

Шаг 3. Настройка форматов
В настройках плагина включите автоматическую конвертацию в WebP и AVIF. Включите fallback для старых браузеров .

⚠️ Предупреждение: Не включайте lazy loading в плагине без исключений. Убедитесь, что featured images и hero-баннеры исключены из отложенной загрузки. Иначе LCP провалится .

Шаг 4. Ресайз при загрузке
Установите максимальные размеры: например, 1920 px по ширине. WordPress не должен хранить 4000×3000 фото с камеры.

Шаг 5. Проверка LCP
Откройте Chrome DevTools → вкладка Performance, найдите LCP-элемент. Убедитесь, что его изображение загружается первым, а не после скриптов.

Шаг 6. Очистка библиотеки
Удалите неиспользуемые файлы через плагин Media Cleaner. Удалите промежуточные размеры, которые не используются темой.

FAQ: Оптимизация изображений

Вопрос 1. Стоит ли переходить на AVIF или пока хватит WebP?
AVIF эффективнее WebP примерно на 20–30%, но поддерживается чуть меньшим числом браузеров. Оптимальная стратегия: генерировать оба формата с fallback на WebP, если AVIF не поддерживается .

Вопрос 2. Потеряется ли качество при сжатии?
При правильных настройках (качество 80–85% для JPEG, Smart Compression для WebP/AVIF) визуальная разница незаметна. Файл же уменьшается в 5–25 раз .

Вопрос 3. Можно ли оптимизировать изображения без плагинов?
Да. Сжимайте через TinyPNG или Squoosh перед загрузкой, используйте <picture> для WebP/AVIF с fallback, прописывайте srcset вручную. Но для больших библиотек плагины экономят часы .

Вопрос 4. Почему после оптимизации PageSpeed Insights всё ещё ругается на картинки?
Возможно, LCP-изображение всё ещё загружается лениво, или CDN отдаёт неоптимизированную версию, или сторонние скрипты (чаты, метрики) блокируют отрисовку .

Вопрос 5. Нужно ли оптимизировать изображения, если у меня CDN?
CDN ускоряет доставку, но не уменьшает вес файла. Некоторые CDN (Cloudflare, Selectel) имеют встроенную оптимизацию (Image Stack), которая конвертирует и сжимает на лету .

Вопрос 6. Как часто нужно проводить аудит изображений?
После каждого крупного обновления контента и раз в квартал. Новые баннеры, фото товаров и иллюстрации быстро раздувают страницу.

Вопрос 7. Влияют ли alt-тексты на скорость?
Нет, они не влияют на скорость загрузки. Но влияют на SEO и доступность. Пустой alt — упущенный трафик из Google Картинок.