На коммерческих сайтах изображения — это половина и больше веса страницы. Разбираем, какие форматы выбирать, как готовить размеры под разные экраны и где ленивая загрузка помогает, а где вредит.
Почему картинки — первое, что стоит оптимизировать
Когда мы проводим аудит скорости, изображения почти всегда оказываются в тройке главных проблем. Причина понятна: контент-менеджер загружает фотографию прямо с камеры или из фотобанка — 4000 пикселей по ширине, 5–8 мегабайт, — а сайт показывает её в карточке шириной 300 пикселей. Браузер добросовестно скачивает все мегабайты и уменьшает картинку сам.
На одном сайте-каталоге производителя мебельной фурнитуры главная страница весила 14 МБ, из которых 12,5 МБ приходилось на баннеры и фото категорий. После оптимизации изображений без какой-либо потери визуального качества вес снизился до 1,8 МБ, а время отображения главного экрана на мобильном интернете сократилось примерно в три раза. Никакой переделки дизайна не понадобилось.
Хорошая новость: оптимизация изображений — одна из немногих задач, где результат предсказуем, а трудозатраты невелики, особенно если настроить автоматическую обработку один раз.
Форматы: что использовать в 2026 году
Выбор формата — это баланс между степенью сжатия, качеством и поддержкой браузерами. Сегодня современные форматы поддерживаются практически всеми актуальными браузерами, но запасной вариант для старых устройств всё ещё стоит предусматривать.
| Формат | Для чего подходит | Экономия относительно JPEG | Особенности |
|---|---|---|---|
| JPEG | Фотографии, запасной вариант | — | Универсальная поддержка, нет прозрачности |
| PNG | Скриншоты интерфейсов, изображения с прозрачностью и чёткими краями | Для фото — проигрывает в разы | Сжатие без потерь, большой вес фотографий |
| WebP | Фото и графика с прозрачностью | 25–35% | Надёжный стандарт по умолчанию |
| AVIF | Фотографии, баннеры, крупные изображения | 40–55% | Лучшее сжатие, более медленное кодирование |
| SVG | Логотипы, иконки, схемы, простые иллюстрации | Не применимо | Векторный, масштабируется без потерь, весит килобайты |
Наша рабочая схема для большинства проектов: основной формат AVIF, запасной — WebP, для совсем старых браузеров — JPEG. Логотипы и иконки только в SVG. PNG оставляем для редких случаев, когда нужна точная передача интерфейса, например на скриншотах в инструкциях.
Отдельно про анимацию: GIF для анимированных вставок устарел. Короткий ролик в формате MP4 или WebM без звука весит в 5–10 раз меньше аналогичного GIF и выглядит лучше.
Размеры: одна картинка — несколько версий
Даже идеально сжатое изображение будет избыточным, если его размер не соответствует месту на экране. Правильный подход — готовить несколько версий одной картинки и позволять браузеру выбрать подходящую.
Адаптивные изображения
С помощью атрибутов srcset и sizes браузер получает список доступных вариантов с их шириной и информацию о том, какую часть экрана займёт картинка. Дальше он сам выбирает оптимальный вариант с учётом ширины экрана и плотности пикселей. Телефон скачает версию на 640 пикселей, широкий монитор — на 1600.
Сколько версий готовить
Для полноэкранных баннеров обычно достаточно четырёх-пяти вариантов: 480, 800, 1200, 1600 и 2400 пикселей по ширине. Для карточек товаров в сетке — двух-трёх, с учётом экранов высокой плотности. Больше версий почти не даёт выигрыша, но увеличивает объём хранилища.
Художественная адаптация
Иногда на мобильном нужна не уменьшенная, а другая картинка. Широкий баннер с продукцией на фоне цеха на телефоне превращается в полоску, где ничего не разобрать. Элемент picture позволяет подставить для узких экранов отдельную вертикальную композицию. Это задача не только разработчика, но и дизайнера: такие варианты стоит закладывать ещё в макетах.
Ленивая загрузка: где включать, а где нет
Ленивая загрузка откладывает скачивание изображений, пока пользователь до них не долистал. Сегодня для этого достаточно атрибута loading со значением lazy — никаких сторонних скриптов не требуется.
Но у технологии есть типичная ловушка. Если включить ленивую загрузку для всех изображений подряд, она затронет и главный баннер на первом экране. Браузер начнёт грузить его с задержкой, и ключевой показатель скорости — время отрисовки самого крупного элемента — ухудшится, иногда на секунду и больше.
- Не откладывайте изображения первого экрана: главный баннер, логотип, первые карточки каталога. Для главного изображения, наоборот, стоит указать высокий приоритет загрузки.
- Откладывайте всё, что ниже: галереи, отзывы, блоки партнёров, товары в нижних рядах.
- Всегда указывайте ширину и высоту или соотношение сторон, чтобы браузер заранее зарезервировал место. Иначе при подгрузке картинок контент будет «прыгать», что раздражает пользователей и ухудшает оценку стабильности вёрстки.
- Используйте заглушки: однотонный фон в цвет изображения или размытое превью весом в сотню байт делают подгрузку незаметной.
Совет студии: проверьте главную и типовую карточку товара на слабом мобильном соединении с отключённым кешем. Если первый экран «пустует» дольше пары секунд, начните с изображений — в девяти случаях из десяти причина именно в них.
Качество сжатия: как не перестараться
Сжатие с потерями регулируется параметром качества. Слишком низкое значение даёт артефакты — «грязь» вокруг контрастных краёв, полосы на градиентах. Слишком высокое — лишние килобайты без видимой разницы.
Ориентиры, которые мы используем как стартовые: для JPEG — качество 75–82, для WebP — 72–80, для AVIF — 50–60 по его собственной шкале. Но единого числа не существует. Фотографии продукции на белом фоне сжимаются легко, а снимки текстур — ткани, дерева, камня — требуют более высокого качества, иначе теряется то, ради чего их показывают. Для каталога отделочных материалов мы, например, держали качество выше стандартного именно на детальных фото фактур, а на остальных изображениях — стандартным.
Не забывайте об удалении метаданных. Фотографии с камеры содержат данные о модели устройства, настройках съёмки, иногда геолокацию. На сайте они не нужны и могут весить десятки килобайт.
Фоновые изображения, иконки и прочие «невидимые» килобайты
Оптимизируя фотографии в контенте, легко забыть о картинках, которые подключаются через стили: фоновые текстуры, декоративные подложки, иконки. Браузер находит их позже, чем обычные изображения, поэтому крупный фон первого экрана, заданный в CSS, часто становится главным тормозом. Если такой фон важен для восприятия, его лучше вынести в разметку как обычное изображение с высоким приоритетом или заранее подсказать браузеру его загрузку.
Наборы иконок в виде десятков отдельных PNG-файлов стоит заменить на SVG — встроенные в страницу или собранные в один спрайт. На одном корпоративном сайте так удалось убрать около сорока лишних запросов к серверу. Туда же — фавиконки и превью для соцсетей: они не влияют на скорость страницы, но нередко весят сотни килобайт без всякой необходимости.
Автоматизация: чтобы оптимизация не зависела от контент-менеджера
Ручная оптимизация работает до первого нового сотрудника. Надёжное решение — автоматическая обработка на стороне сайта или через CDN с функцией преобразования изображений. Схема выглядит так: контент-менеджер загружает исходник любого размера, система сохраняет оригинал, а при запросе генерирует нужные версии в нужных форматах и кеширует их.
Дополнительно полезно ограничить максимальный размер загружаемого файла и показывать в админке предупреждение, если исходник слишком мал для полноэкранного баннера. Такие мелочи мы закладываем в панель управления при разработке сайтов, и они избавляют от проблем на годы вперёд.
Не забывайте и про поисковую сторону: осмысленные имена файлов и заполненный атрибут alt помогают изображениям попадать в поиск по картинкам, а для каталогов это заметный дополнительный источник трафика.
Чек-лист оптимизации изображений
- Проведите аудит: выясните, сколько весят изображения на главной, в каталоге и на карточке товара.
- Переведите фотографии в AVIF или WebP с запасным JPEG, логотипы и иконки — в SVG.
- Настройте несколько размеров каждого изображения и адаптивную выдачу.
- Включите ленивую загрузку для всего, кроме первого экрана, а главному изображению задайте высокий приоритет.
- Указывайте размеры или соотношение сторон, чтобы вёрстка не прыгала.
- Подберите качество сжатия по типам изображений и удаляйте метаданные.
- Автоматизируйте обработку при загрузке, чтобы результат не зависел от людей.
- Заполняйте alt и давайте файлам понятные имена.
