Оптимизация картинок на сайте держится на четырёх приёмах: правильный формат (WebP вместо тяжёлых JPEG и PNG), сжатие без видимой потери качества, отдача изображения в размере под экран посетителя и ленивая загрузка (lazy load) всего, что ниже первого экрана. Вместе они сокращают вес страницы в 3-5 раз - а именно картинки обычно занимают 60-80 процентов трафика сайта.

Проверьте себя за минуту. Откройте любую карточку товара, нажмите F12, вкладка Network, фильтр Img, обновите страницу. Если отдельные файлы весят по 1-3 МБ, а суммарно набегает 5-10 МБ - вы нашли главный тормоз своего сайта. Норма для страницы целиком - 1-2 МБ.

Почему тяжёлые картинки убивают конверсию

Каждый лишний мегабайт - это секунды ожидания на мобильном интернете, за которым сидит больше половины аудитории. Медленная загрузка главного изображения напрямую портит метрику LCP - как её лечить, мы разобрали в статье про улучшение LCP. А ещё тяжёлые фото съедают лимиты хостинга и трафик посетителей, которым сайт «дорого обходится» в прямом смысле.

Какой формат выбрать: WebP, JPEG, PNG или SVG

ФорматДля чегоЭкономия
WebPФото и иллюстрации, основной формат для вебаНа 25-35 процентов легче JPEG при том же качестве
JPEGЗапасной вариант для старых браузеровБаза для сравнения
PNGСкриншоты и картинки с прозрачностью, где WebP недоступенТяжёлый, использовать точечно
SVGЛоготипы, иконки, схемыКилобайты вместо сотен килобайт, идеальная чёткость

Практическое правило: фотографии - в WebP с fallback на JPEG через тег picture, графика и иконки - в SVG. Формат AVIF жмёт ещё сильнее WebP, но кодируется медленнее - его имеет смысл включать, когда конвертация автоматизирована.

Как внедрить оптимизацию изображений: 5 шагов

  1. Сожмите то, что уже загруженоПрогоните существующую библиотеку изображений через оптимизатор: качество 80-85 процентов неотличимо на глаз, а вес падает вдвое. Оригиналы сохраните в архив.
  2. Включите WebPНастройте автоматическую конвертацию: сервер или CMS отдаёт WebP браузерам, которые его понимают, и JPEG остальным. В Битрикс это решается штатным ресайзером с доработкой или модулем - без ручной возни с каждым файлом.
  3. Отдавайте размер под экранНе грузите фото 2400 пикселей в блок шириной 300. Атрибуты srcset и sizes позволяют браузеру выбрать версию под своё разрешение: телефону - маленькую, ретине - крупную.
  4. Включите lazy loadАтрибут loading="lazy" всем изображениям ниже первого экрана: браузер скачает их, только когда посетитель докрутит. Первому экрану и главному фото - наоборот, loading="eager" и предзагрузка.
  5. Автоматизируйте на будущееКонтент-менеджер не должен думать о форматах: загрузил фото в админку - сайт сам сжал, сконвертировал и нарезал размеры. Иначе через полгода библиотека снова растолстеет.
Важно. Не включайте lazy load для главного изображения первого экрана: браузер отложит его загрузку, и LCP станет хуже, а не лучше. Ленивая загрузка - только для того, что посетитель увидит после прокрутки.

Ускорим сайт через оптимизацию изображений

Сожмём библиотеку, настроим автоконвертацию в WebP, srcset и lazy load на Битрикс. Страницы полегчают в разы - проверите замерами до и после.

Оптимизировать картинки

Что настроить в Битрикс, чтобы картинки жались сами

В 1С-Битрикс есть штатный механизм ресайза CFile::ResizeImageGet - его достаточно применить во всех шаблонах компонентов, чтобы каталог перестал отдавать оригиналы. Дальше подключается конвертация в WebP на лету, кэш нарезанных версий и водяные знаки, если нужны. Разово настроенная схема работает годами и не зависит от аккуратности контент-менеджеров.

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

Совет. После оптимизации проверьте сайт глазами, а не только тестами: пробегитесь по каталогу, карточкам и статьям. Если где-то картинки исчезли или стали мыльными - у ресайзера не хватило прав на папку кэша или качество сжатия занижено. Как чинить пропавшие изображения, разбирали в статье про незагружающиеся картинки.

Типичные ошибки при оптимизации изображений

  • Пересжатие уже сжатого - файл прогоняют через оптимизатор повторно: вес почти не падает, артефакты растут
  • Удаление оригиналов - сжали библиотеку и стёрли исходники; при смене дизайна крупные версии взять неоткуда
  • Lazy load на первом экране - главное фото грузится с задержкой, и метрика LCP проваливается
  • WebP без fallback - у части старых устройств картинки просто пропадают
  • Оптимизация один раз - через полгода новые загрузки контент-менеджеров возвращают всё как было

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

Частые вопросы про оптимизацию картинок

Потеряют ли фото качество после сжатия для сайта?
При качестве 80-85 процентов разницу не видно даже на ретина-экранах - проверено на тысячах товарных фото. Потери заметны при агрессивном сжатии ниже 70 или при повторном пересжатии уже сжатого файла. Храните оригиналы отдельно и жмите всегда от них.
Поддерживают ли все браузеры WebP в 2026 году?
Все актуальные браузеры WebP понимают давно. Fallback на JPEG нужен только ради редких старых устройств - тег picture отдаёт каждому браузеру подходящий формат автоматически, посетитель разницы не замечает.
Сколько стоит настроить оптимизацию изображений на Битрикс?
Типовой проект - 200-500 BYN: сжатие текущей библиотеки, автоконвертация WebP, ресайз в шаблонах, lazy load. Большой каталог со сложными шаблонами может стоить дороже - смету считаем после экспресс-аудита за один день.
Картинки оптимизировали, а сайт всё равно медленный. Куда смотреть?
Значит, узкое место не в весе страницы: проверьте время ответа сервера, сторонние скрипты и кэширование. Начните с TTFB - если сервер думает больше 800 мс, никакие лёгкие картинки не спасут.

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