Загрузка...
Загрузка...
Нашли баг, сбой или ошибку в работе reChecker? Есть предложение по улучшению? Напишите нам, чтобы мы проверили и исправили проблему в сервисе.
Руководство по сжатию изображений для веб. Lossy и lossless, форматы WebP и AVIF, инструменты, настройки. Практические рекомендации для веб-разработчиков.
Быстрые определения и связанные понятия из SEO-глоссария reChecker.
Lazy Loading (ленивая загрузка) — техника оптимизации, при которой изображения и контент загружаются только когда попадают в область просмотра.
Читать в глоссарии →Core Web Vitals — три метрики Google для оценки пользовательского опыта: LCP, INP и CLS. Влияют на ранжирование и скорость работы сайта.
Читать в глоссарии →WebP — современный формат изображений от Google. На 25-35% меньше JPEG при том же качестве. Поддерживается всеми современными браузерами.
Читать в глоссарии →FID — устаревшая метрика Core Web Vitals, измерявшая задержку первого взаимодействия. В марте 2024 года заменена на INP. Узнайте почему INP точнее.
Читать в глоссарии →Сравнение форматов PNG, JPG, WebP, AVIF. Когда конвертировать, как влияет качество на размер файла. Конвертер изображений онлайн.
УтилитыКак обрезать изображение онлайн, какое соотношение сторон выбрать для соцсетей, YouTube, Instagram. Обрезка без потери качества.
УтилитыКак изменить размер картинки без потери качества. Форматы PNG, JPEG, WebP. Оптимизация для сайта и соцсетей. Бесплатный онлайн-инструмент.
УтилитыПолный список размеров favicon для всех платформ. Apple Touch Icon, Android, Windows, PWA. Таблицы и разметка для полной совместимости.
Поделитесь с коллегами или изучите другие материалы блога
Изображения составляют значительную долю веса страницы. Сжатие без заметной потери качества ускоряет загрузку и улучшает Core Web Vitals. В этом руководстве разберём методы сжатия, форматы и инструменты. Сжать изображения онлайн можно в Image Compressor на reChecker. Проверить оптимизацию изображений на сайте — в анализаторе изображений reChecker. Дополнительный контекст: оптимизация изображений для SEO и форматы WebP и AVIF.
Типичный сайт может сбросить 30–50% веса изображений без визуальной потери качества. На больших галереях экономия измеряется мегабайтами.
Алгоритм сохраняет все пиксели. Размер уменьшается за счёт сжатия данных (дедупликация, энтропийное кодирование). Качество не меняется. Форматы: PNG, WebP lossless, AVIF lossless, GIF.
Применение: логотипы, скриншоты, изображения с чёткими границами, где артефакты недопустимы.
Алгоритм отбрасывает часть информации. При разумных настройках потери незаметны. Форматы: JPEG, WebP lossy, AVIF lossy.
Применение: фотографии, сложные градиенты, изображения с большим количеством цветов.
При одинаковом уровне качества (субъективно) размеры файлов различаются:
| Формат | Относительный размер | Примечание |
|---|---|---|
| JPEG | 100% | Базовый |
| WebP | 70–80% | При том же визуальном качестве |
| AVIF | 50–60% | Ещё меньше при том же качестве |
AVIF даёт максимальную экономию, но кодирование медленнее. Для статического контента это не критично.
Классический формат для фото. Lossy по определению. Параметр качества (1–100) управляет степенью сжатия. Рекомендуемый диапазон для веб: 75–85. Ниже 70 — заметные артефакты, выше 90 — избыточный размер.
Не поддерживает прозрачность.
Lossless, поддержка прозрачности. Подходит для логотипов, иконок, скриншотов. Размер больше, чем у JPEG при том же визуальном качестве для фото. PNG-8 (256 цветов) — для простых изображений, PNG-24 — для сложных с прозрачностью.
Формат Google. Поддержка lossy и lossless, прозрачность, анимация. При том же качестве даёт на 25–35% меньший размер, чем JPEG и PNG. Поддержка во всех современных браузерах.
На базе 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 обеспечивает оптимизацию всех загружаемых изображений.
| Качество | Применение | Ориентир размера |
|---|---|---|
| 60–70 | Превью, миниатюры | Минимальный размер |
| 75–85 | Основной контент | Баланс |
| 90–95 | Галереи, портфолио | Высокое качество |
| 100 | Практически без потерь | Максимальный размер |
Параметр -q аналогичен JPEG. Для lossy WebP 80–85 обычно даёт отличный результат. Lossless WebP для PNG часто даёт на 25–35% меньший размер при том же качестве.
Диапазон 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="Описание">
Браузер выбирает подходящий размер. Меньшее изображение — меньше байт на мобильных.
Отложенная загрузка изображений за пределами viewport:
<img src="photo.jpg" loading="lazy" alt="Описание">
Сокращает начальный объём загрузки. Поддержка нативная во всех современных браузерах.
Проверить изображения на сайте можно в анализаторе изображений на reChecker. Подробнее об SEO-аспектах — в оптимизации изображений для SEO, о форматах — в руководстве по WebP и AVIF.
EXIF содержит данные камеры, GPS-координаты, дату съёмки. Для публичных изображений удаляйте EXIF — это защищает приватность и немного уменьшает размер. Инструменты: exiftool, jhead, ImageMagick -strip.
Прогрессивный JPEG отображает размытую версию сразу, затем уточняет. Пользователь видит контент быстрее. При сохранении в редакторах или через ImageMagick включайте опцию progressive.
Многие 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 помогут проверить и оптимизировать.