Загрузка...
Загрузка...
Руководство по сжатию изображений для веб. Lossy и lossless, форматы WebP и AVIF, инструменты, настройки. Практические рекомендации для веб-разработчиков.
Практическое руководство по оптимизации SVG: удаление метаданных, упрощение путей, минификация. Инструменты и приёмы для веб-разработчиков.
УтилитыПолное руководство по Base64: принцип работы, применение в вебе, плюсы и минусы. Кодирование изображений, Data URI, ограничения.
AIРуководство по автоматической генерации alt-текстов с помощью AI. Почему alt важен для SEO и доступности, как работают vision-модели, лучшие практики.
УтилитыКак изменить размер картинки без потери качества. Форматы PNG, JPEG, WebP. Оптимизация для сайта и соцсетей. Бесплатный онлайн-инструмент.
Поделитесь с коллегами или изучите другие материалы блога
Изображения составляют значительную долю веса страницы. Сжатие без заметной потери качества ускоряет загрузку и улучшает 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 помогут проверить и оптимизировать.