Image Compression

Image Compression (сжатие изображений) — это уменьшение размера файла картинки в байтах без заметной потери качества, чтобы страница грузилась быстрее. Достигается сменой формата на WebP или AVIF, снижением избыточной детализации и удалением лишних метаданных. Прямая выгода — более лёгкие страницы, лучше Core Web Vitals и выше скорость загрузки.

Простыми словами: это как упаковать чемодан перед поездкой. Вещи те же, места занимают меньше — и нести легче.

Что такое Image Compression и зачем оно нужно

Изображения — обычно самая тяжёлая часть страницы. Во многих проектах именно картинки съедают 50–70% веса загрузки. Если их не сжимать, даже быстрый сервер и чистый код не спасут: браузер всё равно будет ждать, пока докачаются мегабайты графики. А медленная страница — это и хуже Core Web Vitals, и потерянные посетители, которые не дождались.

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

Как работает сжатие

• Lossy (с потерями) — часть данных выбрасывают навсегда (JPEG, WebP, AVIF). Файл легче в разы, а разницу глаз почти не замечает.
• Lossless (без потерь) — данные пакуются, но восстанавливаются полностью (PNG, WebP lossless). Легче оригинала, но тяжелее lossy.
• Смена формата — перевод старых JPEG/PNG в современные WebP или AVIF часто даёт наибольший выигрыш веса.

Форматы и инструменты

Ориентир по весу при одинаковом качестве:

Сжимают через онлайн-сервисы (Squoosh, TinyPNG), плагины CMS или на этапе сборки. WebP поддерживают все актуальные браузеры; AVIF — почти все, поэтому обычно отдают AVIF с запасным WebP или JPEG.

Пример

Фото товара весило 1,8 МБ в JPEG. После конвертации в WebP при том же качестве — около 480 КБ, то есть почти вчетверо легче. На карточке с десятком таких фото экономия превращается в несколько секунд загрузки — а это уже заметно и человеку, и Google.

Часто путают с…

• Image Optimization — более широкое понятие; сжатие лишь одна его составляющая наряду с alt, именами файлов и адаптивными размерами.
• Изменение размеров (resize) — это уменьшение пикселей (ширины/высоты), а сжатие работает с весом файла. Часто делают и то, и другое.

Вопросы и ответы

Сжатие портит качество изображений?

При разумных настройках — практически нет. Lossy-сжатие убирает детали, которые глаз почти не видит. Перебор со «сжатием до нуля» заметен, поэтому подбирают баланс качество/вес.

Какой формат выбрать — WebP или AVIF?

AVIF легче при одинаковом качестве, но WebP поддерживается чуть шире. Оптимально отдавать AVIF с фолбэком на WebP или JPEG для старых браузеров.

Влияет ли сжатие на SEO?

Косвенно, но существенно: более лёгкие изображения ускоряют страницу, а скорость — это и Core Web Vitals, и удобство, которые Google учитывает.

Страницы грузятся медленно из-за тяжёлой графики? Найдём и починим это в рамках SEO-аудита и исправления ошибок на сайте.

Похожие термины: Image Optimization, Скорость загрузки, PageSpeed, Core Web Vitals, Альтернативный текст.