Как сжимать изображения для сайтов (руководство по скорости)

У вашего сайта проблема со скоростью. И виновник почти наверняка — изображения.

Изображения составляют более половины общего веса большинства веб-страниц. Одна неоптимизированная фотография может весить больше, чем весь HTML, CSS и JavaScript вместе взятые. Этот лишний вес замедляет загрузку страниц, раздражает посетителей и вредит поисковому ранжированию.

Хорошая новость? Сжатие изображений — это быстро, просто, а результаты впечатляют. Это руководство покажет, как сжимать изображения для веба. Правильные настройки, правильные форматы и правильный рабочий процесс для минимального размера файлов без видимой потери качества.

Почему несжатые изображения замедляют сайт?

Каждый раз, когда кто-то посещает вашу страницу, браузер скачивает каждое изображение. Большие файлы скачиваются дольше. Долгая загрузка означает медленные страницы.

Вот типичные цифры. Фотография прямо с камеры может весить 5-8 МБ. Скриншот с Retina-дисплея — 2-3 МБ. Даже изображения, экспортированные из Figma или Canva, часто весят от 500 КБ до 1 МБ.

Теперь умножьте это на количество изображений на странице. Статья в блоге с 5 неоптимизированными фотографиями может весить 15-25 МБ только в изображениях. На мобильной сети это загружается 10+ секунд. Большинство посетителей уходят через 3 секунды.

По данным Google, когда время загрузки увеличивается с 1 до 3 секунд, вероятность отказа вырастает на 32%. С 1 до 5 секунд — на 90%. Тяжёлые изображения — главная причина, по которой страницы превышают эти пороги.

Сжатие решает эту проблему. Хорошо сжатое изображение выглядит почти идентично оригиналу, но весит на 80-95% меньше. Фото продукта в 5 МБ превращается в 150 КБ. Страница загружается за 2 секунды вместо 8.

Какое качество использовать для веб-изображений?

Ползунок качества — самая важная настройка при сжатии. Слишком высокое — файлы остаются большими. Слишком низкое — выглядит плохо. Вот как найти оптимальный баланс.

Для фотографий (товарные фото, изображения для блога, фоны) используйте качество 75-85%. В этом диапазоне файлы JPEG и WebP на 80-90% меньше оригинала. Разница в качестве незаметна для большинства людей на экране.

При 85% вы не отличите от оригинала. При 75% может быть лёгкая мягкость в высокодетализированных областях, но она едва заметна. Ниже 60% начинают появляться артефакты. Блочные паттерны вокруг краёв. Полосы цвета в градиентах. Смазанные мелкие детали.

Для графики и иллюстраций (иконки, логотипы, диаграммы) не используйте сжатие с потерями вообще. Используйте PNG для чётких краёв и текста. Если размер файла важен, конвертируйте в lossless WebP. Lossless WebP обычно на 25% меньше аналогичного PNG.

Для скриншотов используйте PNG или WebP с качеством 90%+. Текст на скриншотах становится размытым при слишком сильном сжатии. Если скриншот содержит читаемый текст, сохраняйте высокое качество или используйте lossless.

Краткая справочная таблица:

Тип изображения	Формат	Качество	Ожидаемый размер
Товарное фото	WebP или JPEG	75-85%	50-200 КБ
Hero-изображение блога	WebP или JPEG	80-85%	100-200 КБ
Миниатюра	WebP или JPEG	70-80%	15-50 КБ
Логотип/иконка	PNG или SVG	Lossless	5-30 КБ
Скриншот	PNG или WebP	90-100%	100-400 КБ

Эти цели подходят для большинства сайтов. Стремитесь к менее 200 КБ на изображение, и менее 100 КБ, где возможно.

Нужно ли изменять размер изображений перед сжатием?

Да. Всегда. Изменение размера даёт наибольшую экономию, а большинство людей пропускают этот шаг.

Почему это важно. Фото с современного смартфона — 4000x3000 пикселей. Ваш блог показывает его шириной 800px. Это значит, вы отправляете в 15 раз больше пикселей, чем нужно экрану. Все лишние данные скачиваются и выбрасываются.

Сначала измените размер изображения до размера отображения. Потом сжимайте. Результаты впечатляющие.

Возьмём фото 4000x3000 в 5 МБ:

1. Масштабируем до 1200px по ширине (подходит для большинства блогов): ~1 МБ
2. Сжимаем в WebP с качеством 80%: ~100 КБ
3. Удаляем метаданные: ещё 20-30 КБ

Итог: около 80 КБ. Это на 98% меньше оригинала.

Для Retina-экранов отдавайте изображения в 2x от размера отображения. Если колонка блога 600px шириной, масштабируйте до 1200px. Дополнительные пиксели делают изображение чётким на экранах высокой плотности, не расходуя столько, сколько оригинальные 4000px.

Не забывайте об адаптивных изображениях. Используйте srcset для разных размеров под разные ширины экранов. Мобильному пользователю на экране 375px не нужно изображение 1200px.

<img
  src="/photo-800.webp"
  srcset="/photo-400.webp 400w, /photo-800.webp 800w, /photo-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  alt="Фото продукта"
>

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

Какой формат изображений лучше для скорости сайта?

Выбор формата сильно влияет на размер файла. Одна и та же фотография в разных форматах может отличаться на 50% и более.

WebP — лучший универсальный выбор для веб-изображений сегодня. Сжимает на 25-35% лучше JPEG. Поддерживает и lossy, и lossless сжатие. Работает с прозрачностью. И 97%+ браузеров его поддерживают.

JPEG по-прежнему самый распространённый формат для фотографий. Хорошо сжимает и работает везде. Если вы ещё не готовы перейти на WebP, JPEG с качеством 75-85% — всё ещё хороший вариант.

PNG лучше всего для изображений, которым нужна прозрачность или попиксельная точность. Логотипы, иконки, скриншоты с текстом. Но файлы PNG в 3-5 раз больше эквивалентных JPEG для фотографий. Не используйте PNG для фотографий.

AVIF предлагает лучшие коэффициенты сжатия на данный момент. До 50% меньше JPEG. Но кодирование медленнее, а поддержка браузерами пока не универсальна. Стоит попробовать, если ваш стек это поддерживает.

Для более глубокого понимания того, как работает каждый формат, ознакомьтесь с нашим полным руководством по сжатию изображений. Оно охватывает lossy vs lossless, когда использовать каждый формат и как избежать распространённых ошибок.

Как эффективно сжимать изображения пакетами?

Сжимать по одному изображению подходит для быстрого исправления. Но если вы оптимизируете целый сайт, нужен более быстрый рабочий процесс.

Вариант 1: Онлайн-инструмент для пакетного сжатия. CompressIMG и подобные инструменты позволяют загрузить до 20 изображений за раз. Задайте качество, сожмите и скачайте в ZIP. Не нужно устанавливать ПО. Не нужен аккаунт.

Это самый быстрый вариант для большинства людей. Загрузите изображения для блога, поставьте качество 80% и скачайте сжатый пакет. Весь процесс занимает меньше минуты.

Вариант 2: Автоматизация через инструменты сборки. Если вы разработчик, добавьте оптимизацию изображений в пайплайн сборки. Next.js, Astro и другие фреймворки имеют встроенную оптимизацию изображений. Они автоматически масштабируют, сжимают и конвертируют изображения при сборке или по запросу.

Вариант 3: API для автоматизированных процессов. Если ваш сайт обрабатывает пользовательские загрузки или берёт изображения из CMS, сжатие должно происходить автоматически. API сжатия изображений обрабатывает файлы программно. Никаких ручных шагов.

Вариант 4: CDN с автоматической оптимизацией. Сервисы вроде Cloudflare, Imgix и Cloudinary могут сжимать и масштабировать изображения на лету. Вы загружаете оригинал, а CDN отдаёт оптимизированные версии в зависимости от устройства и браузера посетителя.

Для большинства контентных сайтов достаточно варианта 1. Загрузите изображения, сожмите и готово. Для крупных сайтов с частыми обновлениями варианты 2-4 экономят время за счёт автоматизации.

Сравнение TinyPNG, Squoosh и CompressIMG подробно описывает, какой инструмент подходит для разных процессов. Одни лучше справляются с пакетной обработкой. Другие дают тонкий контроль над настройками. Выберите тот, который подходит вашему рабочему процессу.

Какой размер файла оптимален для каждого типа изображений?

Хорошие ориентиры помогают понять, когда изображение "готово". Вот реалистичные бенчмарки:

Hero-изображения и баннеры на всю ширину: менее 200 КБ. Это самые большие изображения на странице и обычно LCP-элемент. Удержание в пределах 200 КБ помогает показателям Core Web Vitals.

Изображения в статьях блога: менее 100 КБ. Контентные изображения в текстовых колонках не должны быть большими. 800-1200px по ширине при качестве 80% легко достигают этой цели.

Миниатюры товаров: менее 50 КБ. Небольшие изображения в сетках или каруселях. Масштабируйте до размера отображения (обычно 300-400px) и сжимайте до 70-80%.

Иконки и логотипы: менее 20 КБ. Простая графика с небольшим количеством цветов. По возможности используйте SVG. Иначе — PNG или lossless WebP.

Общий вес изображений на странице: менее 500 КБ для начального вьюпорта. Lazy-загруженные изображения ниже сгиба не входят в начальную загрузку, но влияют на общий объём переданных данных.

Google PageSpeed Insights отмечает изображения, которые можно дополнительно оптимизировать. После сжатия запустите тест и проверьте, остались ли изображения, требующие доработки. Рекомендация "Используйте изображения в форматах нового поколения" означает, что нужно перейти с JPEG или PNG на WebP или AVIF.

Сжатие ухудшает качество изображений?

Это самое частое опасение. Честный ответ: технически да. Но визуально нет.

Сжатие с потерями удаляет данные. Так оно уменьшает файлы. Но современные алгоритмы умны в выборе того, что удалять. Они убирают детали, которые ваши глаза не видят. Мельчайшие вариации цвета. Субпиксельные паттерны. Данные, важные для компьютера, но не для человека.

При качестве 80% сжатый JPEG или WebP визуально идентичен оригиналу на экране. Чтобы заметить разницу, нужно увеличить до 400% и сравнивать попиксельно. Ни один посетитель этого не заметит.

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

Ключевое правило: всегда начинайте с исходного файла максимального качества. Не пересжимайте уже сжатый JPEG. Каждый раунд lossy-сжатия дополнительно ухудшает качество. Если сжать один раз из оригинала, качество остаётся отличным.

Используйте инструмент с предпросмотром "бок о бок" для проверки результата перед скачиванием. CompressIMG показывает оригинал и сжатое изображение с ползунком. Если видите разницу — поднимите качество. Если нет — готово.

Готовы ускорить свой сайт?

Сжатие изображений — самый быстрый способ ускорить загрузку сайта. Занимает минуты, ничего не стоит, а улучшения измеримы.

Начните с самых больших изображений. Hero-баннеры, товарные фото, изображения для блога. Масштабируйте до размера отображения. Сжимайте до качества 75-85%. Конвертируйте в WebP, если возможно.

CompressIMG делает всё прямо в браузере. Загрузите до 20 изображений, задайте качество и скачайте оптимизированные файлы. Аккаунт не нужен.

Более быстрый сайт — это довольные посетители, лучшее поисковое ранжирование и больше конверсий. Изображения — самое быстрое решение.