Изображения составляют значительную долю веса страницы. Сжатие без заметной потери качества ускоряет загрузку и улучшает Core Web Vitals. В этом руководстве разберём методы сжатия, форматы и инструменты. Сжать изображения онлайн можно в Image Compressor на reChecker. Проверить оптимизацию изображений на сайте — в анализаторе изображений reChecker. Дополнительный контекст: оптимизация изображений для SEO и форматы WebP и AVIF.
Зачем сжимать изображения
- Скорость загрузки — меньше байт, быстрее отрисовка
- Экономия трафика — важно для мобильных пользователей
- SEO — скорость страницы влияет на ранжирование
- Core Web Vitals — LCP зависит от размера и формата изображений
Типичный сайт может сбросить 30–50% веса изображений без визуальной потери качества. На больших галереях экономия измеряется мегабайтами.
Lossy и lossless
Lossless (без потерь)
Алгоритм сохраняет все пиксели. Размер уменьшается за счёт сжатия данных (дедупликация, энтропийное кодирование). Качество не меняется. Форматы: PNG, WebP lossless, AVIF lossless, GIF.
Применение: логотипы, скриншоты, изображения с чёткими границами, где артефакты недопустимы.
Lossy (с потерями)
Алгоритм отбрасывает часть информации. При разумных настройках потери незаметны. Форматы: JPEG, WebP lossy, AVIF lossy.
Применение: фотографии, сложные градиенты, изображения с большим количеством цветов.
Визуальное сравнение lossy
При одинаковом уровне качества (субъективно) размеры файлов различаются:
| Формат | Относительный размер | Примечание |
|---|---|---|
| JPEG | 100% | Базовый |
| WebP | 70–80% | При том же визуальном качестве |
| AVIF | 50–60% | Ещё меньше при том же качестве |
AVIF даёт максимальную экономию, но кодирование медленнее. Для статического контента это не критично.
Форматы изображений
JPEG
Классический формат для фото. Lossy по определению. Параметр качества (1–100) управляет степенью сжатия. Рекомендуемый диапазон для веб: 75–85. Ниже 70 — заметные артефакты, выше 90 — избыточный размер.
Не поддерживает прозрачность.
PNG
Lossless, поддержка прозрачности. Подходит для логотипов, иконок, скриншотов. Размер больше, чем у JPEG при том же визуальном качестве для фото. PNG-8 (256 цветов) — для простых изображений, PNG-24 — для сложных с прозрачностью.
WebP
Формат Google. Поддержка lossy и lossless, прозрачность, анимация. При том же качестве даёт на 25–35% меньший размер, чем JPEG и PNG. Поддержка во всех современных браузерах.
AVIF
На базе AV1. Ещё лучше сжатие, чем WebP (до 50% экономии при том же качестве). Поддержка растёт, но Safari добавил поддержку относительно недавно. Проверяйте на целевой аудитории.
Выбор формата
| Тип контента | Рекомендуемый формат |
|---|---|
| Фотографии | WebP или AVIF, fallback JPEG |
| Логотипы, иконки | PNG или SVG |
| Скриншоты | PNG или WebP lossless |
| Простые иллюстрации | SVG |
| Анимации | WebP или GIF |
Инструменты сжатия
Онлайн
Image Compressor на reChecker — сжатие без потери визуального качества, поддержка основных форматов. Удобно для разовых задач без установки софта.
Другие: TinyPNG, Squoosh (от Google) — аналогичный функционал.
Командная строка
ImageMagick — конвертация и сжатие:
# JPEG, качество 80
convert input.jpg -quality 80 output.jpg
# WebP
convert input.jpg -quality 85 output.webp
# Изменение размера + сжатие
convert input.jpg -resize 1200x -quality 80 output.jpg
cwebp (из libwebp) — специализированное сжатие в WebP:
cwebp -q 80 input.jpg -o output.webp
cwebp -lossless input.png -o output.webp
avifenc (из libavif) — сжатие в AVIF:
avifenc --min 20 --max 30 input.jpg output.avif
Пакетная обработка
Скрипт для массового сжатия JPEG:
for f in *.jpg; do
convert "$f" -quality 82 -strip "optimized_$f"
done
-strip удаляет метаданные (EXIF, ICC), что дополнительно уменьшает размер.
В сборке проекта
Плагины для Webpack, Vite, Gulp автоматизируют сжатие при сборке. Примеры: imagemin, sharp, image-minimizer-webpack-plugin. Интеграция в CI/CD обеспечивает оптимизацию всех загружаемых изображений.
Настройки качества
JPEG
| Качество | Применение | Ориентир размера |
|---|---|---|
| 60–70 | Превью, миниатюры | Минимальный размер |
| 75–85 | Основной контент | Баланс |
| 90–95 | Галереи, портфолио | Высокое качество |
| 100 | Практически без потерь | Максимальный размер |
WebP
Параметр -q аналогичен JPEG. Для lossy WebP 80–85 обычно даёт отличный результат. Lossless WebP для PNG часто даёт на 25–35% меньший размер при том же качестве.
AVIF
Диапазон 20–35 (min-max в avifenc) соответствует высокому качеству при малом размере. Точные значения зависят от кодировщика.
Адаптивные изображения
Один размер не подходит для всех устройств. Используйте srcset и sizes:
<img src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 800px"
alt="Описание">
Браузер выбирает подходящий размер. Меньшее изображение — меньше байт на мобильных.
Lazy loading
Отложенная загрузка изображений за пределами viewport:
<img src="photo.jpg" loading="lazy" alt="Описание">
Сокращает начальный объём загрузки. Поддержка нативная во всех современных браузерах.
Чек-лист оптимизации
- Выбран подходящий формат (WebP/AVIF для фото)
- Качество JPEG/WebP в диапазоне 75–85
- Удалены метаданные (EXIF) где не нужны
- Ресайз под целевой размер отображения
- srcset для адаптивности
- loading="lazy" для изображений ниже fold
- Alt-теги для доступности и SEO
Проверить изображения на сайте можно в анализаторе изображений на reChecker. Подробнее об SEO-аспектах — в оптимизации изображений для SEO, о форматах — в руководстве по WebP и AVIF.
Метаданные и приватность
EXIF содержит данные камеры, GPS-координаты, дату съёмки. Для публичных изображений удаляйте EXIF — это защищает приватность и немного уменьшает размер. Инструменты: exiftool, jhead, ImageMagick -strip.
Прогрессивная загрузка
Прогрессивный JPEG отображает размытую версию сразу, затем уточняет. Пользователь видит контент быстрее. При сохранении в редакторах или через ImageMagick включайте опцию progressive.
CDN и автоматическое сжатие
Многие CDN (Cloudflare, imgix, Cloudinary) автоматически сжимают и конвертируют изображения по параметрам URL. Это избавляет от предварительной обработки, но создаёт зависимость от сервиса. Для полного контроля — сжатие на этапе сборки или загрузки.
Сравнение форматов на практике
| Исходник | JPEG 80% | WebP 80% | AVIF 30 | Экономия |
|---|---|---|---|---|
| 500 KB фото | 120 KB | 80 KB | 60 KB | до 88% |
| 200 KB PNG | — | 45 KB (lossless) | 35 KB | до 82% |
Реальные цифры зависят от содержимого. Тестируйте на своих изображениях.
Резюме
Сжатие изображений — обязательный этап оптимизации веб-страниц. Выбирайте WebP или AVIF для фото, сохраняйте качество 75–85, используйте адаптивные размеры и lazy loading. Image Compressor и анализатор изображений на reChecker помогут проверить и оптимизировать.