Одно-единственное неоптимизированное главное изображение может весить больше, чем весь HTML, CSS и JavaScript страницы вместе взятые. Изображения составляют примерно 50 % общего объёма данных средней веб-страницы, что делает их единственным крупнейшим рычагом для улучшения производительности. Тем не менее оптимизация изображений остаётся одним из самых неправильно понимаемых аспектов веб-разработки и создания контента.
Влияние выходит далеко за рамки скорости загрузки. Размер изображений влияет на ваши поисковые позиции, счёт за хостинг, тарифные планы пользователей и даже на конверсию.
Связь с производительностью: Core Web Vitals и LCP
Core Web Vitals от Google — набор метрик, напрямую влияющих на поисковые позиции. Среди них Largest Contentful Paint (LCP) измеряет, сколько времени проходит до отрисовки самого крупного видимого элемента на экране. В большинстве случаев этот элемент — изображение.
Google считает LCP менее 2,5 секунд «хорошим». От 2,5 до 4 секунд — «требует улучшения». Более 4 секунд — «плохо». Главное изображение размером 3 МБ на стандартном соединении легко выводит LCP за 4-секундный порог, перемещая всю страницу в категорию «плохо».
Последствия ощутимы:
- Падение SEO-позиций — Core Web Vitals являются сигналом ранжирования; медленные страницы теряют позиции
- Рост показателя отказов — 53 % мобильных посетителей уходят, если страница загружается дольше 3 секунд
- Снижение конверсии — каждая дополнительная секунда загрузки сокращает конверсию примерно на 7 %
Правило 100 КБ Для контентных изображений на веб-странице стремитесь к объёму менее 100 КБ на изображение. Для главных изображений на всю ширину страницы — менее 200 КБ. Эти показатели достижимы с современными форматами и правильным сжатием без какой-либо заметной потери качества.
С потерями и без потерь: понимание компромисса
Всё сжатие изображений делится на две категории, и неправильный выбор — распространённая причина раздутых файлов.
Сжатие без потерь уменьшает размер файла, находя более эффективные способы кодирования тех же данных. Каждый пиксель сохраняется точно. Уменьшение скромное — обычно 10–30 %. PNG использует сжатие без потерь.
Сжатие с потерями отбрасывает информацию, которую человеческий глаз вряд ли заметит. Точность цветопередачи в градиентах, мелкие текстурные детали и тонкие тональные вариации упрощаются. Уменьшение значительное — обычно 70–90 %. JPEG и WebP (в режиме с потерями) используют этот подход.
Ключевой вывод: сжатие с потерями при качестве 80–85 % визуально неотличимо от оригинала для фотографий. Воспринимаемая разница практически нулевая, а разница в размере файла — огромная.
| Подход | Уменьшение размера | Потеря качества | Лучше всего для |
|---|---|---|---|
| Без потерь (PNG) | 10–30 % | Нет | Логотипы, скриншоты, графика с текстом |
| С потерями при 85 % (JPEG/WebP) | 70–85 % | Незаметна | Фотографии, иллюстрации, фоны |
| С потерями при 60 % (JPEG/WebP) | 85–95 % | Заметна при внимательном рассмотрении | Миниатюры, декоративные изображения |
Типичная ошибка — использование сжатия без потерь для фотографического контента или сжатия с потерями при слишком низком качестве для важных визуалов. Понимание того, какие изображения требуют какой обработки, — ключ к эффективной оптимизации.
Формат имеет значение: одно изображение, совершенно разные размеры
Выбор формата изображения влияет не меньше, чем уровень сжатия. Фотография, сохранённая в PNG, может быть в 5–10 раз больше, чем то же изображение в JPEG при качестве 85 %, без заметной разницы.
JPEG остаётся универсальным стандартом для фотографий. Он поддерживается везде и обеспечивает отличное сжатие с потерями для фотографического контента.
WebP даёт файлы на 25–35 % меньше, чем JPEG, при эквивалентном визуальном качестве, с дополнительным преимуществом поддержки прозрачности. Все современные браузеры поддерживают его. Это лучший универсальный формат для веба на сегодняшний день.
AVIF — новейший претендент, предлагающий ещё лучшее сжатие, чем WebP (примерно на 20 % меньше), но поддержка браузерами и скорость кодирования пока догоняют.
PNG — правильный выбор только для изображений, требующих точного воспроизведения пикселей: логотипы, иконки, скриншоты с текстом или изображения с прозрачностью, когда WebP недоступен.
Трафик и хранение: скрытые расходы
Для личных блогов и небольших сайтов расходы на трафик могут казаться незначительными. Но они быстро растут:
- Страница с 2 МБ изображений при 10 000 просмотрах в месяц передаёт 20 ГБ данных изображений ежемесячно
- Оптимизируйте изображения до 400 КБ суммарно — и вы передаёте 4 ГБ — сокращение на 80 %
- Для сайтов с лимитированным хостингом это напрямую снижает счета
Хранилище тоже накапливается. Интернет-магазин с 5 000 товарами, каждый с 4 неоптимизированными изображениями по 2 МБ, использует 40 ГБ только на фотографии товаров. При оптимизации до 200 КБ каждое объём падает до 4 ГБ.
Адаптивные изображения и проблема устройств
Изображение шириной 1920 пикселей, отображаемое на экране телефона шириной 375 пикселей, тратит впустую более 96 % своих пикселей. Браузер скачивает полное изображение, а затем отбрасывает большую часть данных для подгонки под экран.
Решение — адаптивные изображения — предоставление разных размеров изображений разным устройствам. Мобильный посетитель получает изображение шириной 400px; десктопный — версию шириной 1200px. Концепция проста, но реализация требует понимания атрибутов srcset, дескриптора sizes и управления отображением через элемент picture.
Lazy loading: не загружайте невидимое
Изображения ниже сгиба — те, что не видны без прокрутки — не нужно загружать сразу. Lazy loading откладывает их загрузку до тех пор, пока пользователь не прокрутит к ним. Это означает, что начальная загрузка страницы включает только изображения, реально видимые на экране, что значительно улучшает воспринимаемую производительность.
Современные браузеры поддерживают нативный lazy loading с помощью одного HTML-атрибута. Это одна из самых простых и эффективных доступных оптимизаций.
CDN: раздача изображений с ближайшего узла
Content Delivery Network хранит копии ваших изображений на серверах, распределённых по всему миру. Посетитель из Токио получает изображения с ближайшего сервера, а не с вашего сервера в Париже. Это снижает задержку, улучшает время загрузки и уменьшает нагрузку на вашу инфраструктуру.
Многие современные CDN также предлагают преобразование изображений на лету — автоматическую конвертацию в WebP, изменение размера для разных устройств и оптимальное сжатие без вмешательства в исходные файлы.
Узнать больше
Оптимизация изображений — тема, где небольшие улучшения дают кумулятивный значительный эффект. Если вы хотите поэкспериментировать с уровнями сжатия и увидеть компромисс качество/размер в реальном времени, на toolk.io есть компрессор изображений, который обрабатывает всё в вашем браузере. Руководства по сжатию изображений и конвертации между форматами также доступны на сайте.