На типичной странице коммерческого сайта изображения занимают 50–70% общего веса. Одно неоптимизированное фото на первом экране может весить больше, чем весь код, шрифты и стили вместе взятые. При этом картинки — главный инструмент, который формирует первое впечатление и доверие. Задача в том, чтобы изображения работали на смысл и при этом не тормозили сайт: правильно подобраны, сохранены в подходящем формате, сжаты и отданы в нужном размере каждому устройству.
Зачем изображения сайту и когда они мешают
Хорошее изображение отвечает на вопрос посетителя быстрее текста. Фото готового объекта показывает качество работ производственной компании, снимок товара в интерьере помогает понять масштаб, фотография команды делает компанию живой. Плохое изображение занимает место и ничего не сообщает: улыбающиеся люди в костюмах на фоне офиса, рукопожатие, абстрактная лампочка как символ идеи.
Мы используем простой тест для каждой картинки в макете: что пользователь узнает из неё такого, чего не узнает из соседнего текста? Если ответ «ничего», изображение либо заменяем, либо убираем. Пустое пространство часто работает лучше, чем случайный сток. Сокращение числа картинок на странице заодно уменьшает её вес и упрощает адаптивную вёрстку.
Отдельный случай — интернет-магазины, где изображения товара напрямую влияют на продажи. Там счёт идёт не на «нужна ли картинка», а на количество ракурсов, качество зума и единообразие фона. Об этом подробно — в статье про фотографии товаров, а здесь сосредоточимся на технической стороне и общих принципах подбора.
Где брать изображения: собственные, сток, генерация
Источник изображений определяет и качество, и юридические риски. У каждого варианта есть своя ниша.
Собственная съёмка
Лучший вариант для команды, производства, объектов, офиса и товаров. Вызывает доверие и не встречается у конкурентов. Съёмочный день обходится от 25 000 ₽ и окупается годами.
Фотобанки
Подходят для фоновых и иллюстративных задач. Важно брать снимки с коммерческой лицензией и избегать самых популярных кадров, которые уже стоят на сотнях сайтов.
Иллюстрации и генерация
Уместны для абстрактных понятий и схем. Сгенерированные изображения требуют внимательной проверки деталей и не должны выдаваться за фото реальных объектов.
Юридическая сторона важнее, чем кажется. Картинка «из интернета» без лицензии может обернуться претензией правообладателя, причём суммы компенсаций за одно фото бывают сопоставимы со стоимостью небольшого сайта. Сохраняйте лицензии и ссылки на источник для каждого купленного изображения в отдельной папке проекта.
Форматы: какой выбрать для каждой задачи
Выбор формата — первое и самое важное решение в оптимизации. Неправильный формат нельзя компенсировать никаким сжатием: PNG-фотография всегда будет весить в разы больше, чем такая же фотография в JPEG или WebP.
| Формат | Для чего подходит | Особенности |
|---|---|---|
| JPEG | Фотографии, сложные изображения с плавными переходами | Универсальная поддержка, нет прозрачности, артефакты на резких краях и тексте |
| PNG | Скриншоты интерфейсов, изображения с прозрачностью и текстом | Сжатие без потерь, для фото слишком тяжёлый |
| WebP | Фото и графика, в том числе с прозрачностью | На 25–35% легче JPEG при сопоставимом качестве, поддерживается всеми современными браузерами |
| AVIF | Фото, особенно крупные баннеры | Ещё на 20–30% легче WebP, медленнее кодируется, нужен запасной вариант |
| SVG | Логотипы, иконки, простые иллюстрации, схемы | Векторный, резкий на любых экранах, весит единицы килобайт |
Наша стандартная схема для новых проектов: фотографии отдаём в AVIF с запасным WebP или JPEG для старых браузеров, логотипы и иконки — в SVG, скриншоты интерфейсов — в WebP без потерь или PNG. Браузер сам выбирает первый поддерживаемый вариант, а пользователь получает самый лёгкий файл, который способен отобразить.
Не сохраняйте логотип в JPEG. Мы регулярно видим логотипы весом 200–400 КБ с серой «грязью» вокруг букв, хотя SVG-версия того же знака весит 3–5 КБ и остаётся чёткой на любом экране. Если векторного исходника нет, его стоит заказать у дизайнера — это разовая работа на пару часов.
Сжатие без заметной потери качества
Сжатие с потерями убирает из изображения информацию, которую глаз почти не замечает. Ключевой параметр — уровень качества. Для JPEG и WebP оптимальная зона обычно 70–82 из 100: файл уменьшается в 3–5 раз по сравнению с качеством 100, а визуальной разницы на экране нет. Ниже 60 начинают проступать артефакты — «квадраты» на градиентах и ореолы вокруг контрастных краёв.
Пример из практики: на главной странице сайта мебельной фабрики стоял слайдер из пяти баннеров по 1,8–2,4 МБ каждый — исходники из фотокамеры, просто уменьшенные по ширине. После пересохранения в AVIF с качеством 65 и WebP с качеством 78 каждый баннер стал весить 140–220 КБ. Общий вес главной упал с 12 МБ до 1,6 МБ, а время до отображения основного контента на мобильном интернете сократилось с 7 до 2,3 секунды.
Что ещё уменьшает вес
- Удаление метаданных: сведения о камере, геолокация и миниатюры внутри файла могут занимать десятки килобайт.
- Прогрессивная загрузка для крупных JPEG: изображение появляется сразу в низком качестве и уточняется по мере загрузки.
- Обрезка лишнего: если на странице показывается только центральная часть фото, нет смысла передавать края.
- Сокращение цветовой палитры для простой графики: PNG с 64 цветами вместо миллионов весит в разы меньше.
Вручную оптимизировать каждое изображение на живом сайте нереально — контент-менеджеры загружают фото как есть. Поэтому сжатие и конвертацию нужно автоматизировать на стороне сервера: при загрузке файл автоматически пересохраняется в нужных форматах и размерах. Это настраивается на любой из популярных CMS и должно быть частью технического задания.
Адаптивные изображения: нужный размер для каждого экрана
Смартфону с экраном шириной 390 точек не нужна картинка шириной 2 400 пикселей, даже с учётом плотности экрана. Но если в вёрстке указан один файл, его скачают все устройства. Адаптивные изображения решают эту проблему: в разметке перечисляется несколько вариантов одного изображения разной ширины, и браузер выбирает подходящий сам.
На практике для контентных изображений достаточно 4–5 вариантов ширины: примерно 480, 800, 1 200, 1 600 и 2 000 пикселей. Для полноэкранных баннеров добавляют 2 400. Также можно отдавать разную кадровку: на десктопе — широкий снимок с интерьером, на мобильном — вертикальный кроп с акцентом на товар. Это особенно важно для первого экрана, где горизонтальное фото на узком экране превращается в полоску с мелкими деталями.
Обязательно указывайте ширину и высоту изображения в разметке или задавайте пропорции стилями. Без этого браузер не знает, сколько места оставить под картинку, и при её загрузке контент «прыгает» вниз. Такие сдвиги раздражают пользователей — особенно когда человек уже тянулся нажать кнопку, а она уехала — и ухудшают показатели скорости, которые учитывают поисковые системы.
Ленивая загрузка и приоритеты
Ленивая загрузка означает, что изображения ниже первого экрана скачиваются только тогда, когда пользователь до них прокручивает страницу. Для длинной страницы каталога с 48 товарами это экономит мегабайты трафика и ускоряет отображение верхней части. Современные браузеры поддерживают ленивую загрузку одним атрибутом без скриптов.
Но есть важная оговорка: главное изображение первого экрана лениво загружать нельзя. Наоборот, ему нужно повысить приоритет, чтобы браузер начал скачивать его как можно раньше. Ошибка «всем картинкам поставили lazy» встречается постоянно и замедляет отображение ключевого контента на 0,5–1,5 секунды.
Определите главное изображение
Обычно это баннер первого экрана, первое фото товара в карточке или обложка статьи. Ему — высокий приоритет загрузки и никакой ленивой загрузки.
Отложите остальное
Все изображения ниже первого экрана, в том числе в слайдерах и вкладках, загружайте лениво.
Добавьте заглушку
Пока изображение грузится, показывайте фон в доминирующем цвете фото или размытую миниатюру весом 1–2 КБ, чтобы страница не выглядела пустой.
Проверьте на медленной сети
Включите в инструментах разработчика эмуляцию медленного мобильного соединения и посмотрите, как страница появляется на самом деле.
Если сайт обслуживает аудиторию по всей стране, стоит отдавать изображения через CDN — сеть серверов, которая хранит копии файлов ближе к пользователю. Многие CDN умеют на лету конвертировать картинки в WebP и AVIF и подгонять размер, что снимает часть работы с сервера сайта.
Изображения и поисковые системы
Поисковые системы индексируют изображения и показывают их в отдельной выдаче, откуда тоже приходит трафик — особенно в нишах, где люди выбирают глазами: мебель, одежда, ремонт, ландшафтный дизайн. Чтобы картинки участвовали в поиске, нужны осмысленные имена файлов («divan-uglovoj-seryj.webp» вместо «IMG_0045.jpg»), содержательный атрибут alt и окружающий текст, который объясняет, что изображено.
Атрибут alt пишется для человека, который не видит изображение, а не для робота. «Угловой диван серого цвета в гостиной со светлыми стенами» — хорошо. «Диван купить недорого Москва диван угловой» — плохо и может навредить. Декоративным картинкам, которые не несут смысла, alt оставляют пустым, чтобы экранные дикторы их пропускали. Эти и другие базовые настройки мы закладываем в проект в рамках SEO-подготовки при запуске.
Коротко о главном
Изображения на сайте должны работать на смысл: показывать продукт, команду, результат, а не заполнять пустоты стоковыми улыбками. Лучший источник — собственная съёмка, стоки допустимы для второстепенных задач при наличии лицензии.
Технически важно выбрать правильный формат (AVIF и WebP для фото, SVG для логотипов и иконок), сжимать с качеством в районе 70–80, отдавать разные размеры разным экранам, лениво грузить всё, кроме главного изображения первого экрана, и обязательно задавать пропорции, чтобы страница не прыгала. Если автоматизировать эти правила на уровне CMS один раз, сайт останется быстрым, даже когда контент-менеджеры загрузят сотни новых фотографий.
Нужен сайт или интернет-магазин?
Обсудим задачу, подскажем подходящую платформу и оценим сроки и бюджет — бесплатно и без обязательств.
Обсудить проект
