Полное руководство по форматам изображений — когда использовать PNG, WebP, AVIF или JPEG

Почему выбор формата изображения важен

Один из самых простых способов улучшить производительность сайта — оптимизация изображений. Google PageSpeed Insights часто выдает рекомендацию "Serve images in next-gen formats" — и не без причины. Выбор формата изображения напрямую влияет на время загрузки, показатели Core Web Vitals и, в конечном счете, на позиции в поисковой выдаче.

Основное сравнение: четыре главных формата

JPEG (Joint Photographic Experts Group)

Выпущен: 1992 | Сжатие: с потерями | Прозрачность: нет

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

Используйте JPEG для: обычных фотографий, изображений для соцсетей, ситуаций, где требуется универсальная совместимость

PNG (Portable Network Graphics)

Выпущен: 1996 | Сжатие: без потерь | Прозрачность: да

Сжатие PNG без потерь сохраняет каждый пиксель — идеально для изображений, где важны четкие края, текст или прозрачность. Цена за это — больший размер файлов. Фотография JPEG, сохраненная как PNG, обычно получается в 2–3× больше.

Используйте PNG для: логотипов, скриншотов интерфейса, изображений с текстом, графики, которой нужен прозрачный фон

WebP

Выпущен: 2010 (Google) | Сжатие: с потерями + без потерь | Прозрачность: да

WebP создавался как замена и JPEG, и PNG. При сопоставимом визуальном качестве он дает файлы на 25–35% меньше, чем JPEG, и поддерживает прозрачность — объединяя сильные стороны обоих форматов. Поддержка анимации тоже есть.

Поддержка браузерами: 96%+ по миру по состоянию на 2025 год.

Используйте WebP для: почти всего на современных сайтах — фотографий, графики, изображений с прозрачностью

AVIF (AV1 Image File Format)

Выпущен: 2019 | Сжатие: с потерями + без потерь | Прозрачность: да

AVIF продвигает сжатие дальше, чем WebP: обычно файлы получаются на 50% меньше, чем JPEG, при сопоставимом качестве. Кроме того, он лучше любого другого формата работает с HDR-контентом (high dynamic range). Компромисс — более медленное кодирование и немного более низкая совместимость с браузерами.

Поддержка браузерами: ~92% по миру по состоянию на 2025 год.

Используйте AVIF для: hero-изображений, страниц с высоким трафиком, где важно максимальное сжатие, проектов с конвейерами обработки изображений на этапе сборки

Схема выбора: какой формат использовать?

Бесплатные способы конвертации

Онлайн (без установки)

• Squoosh (squoosh.app) — собственный инструмент Google; сравнение форматов бок о бок
• Convertio — пакетная конвертация для нескольких форматов
• remove.bg + download as WebP — удаление фона + экспорт в WebP в одном процессе

Командная строка

# WebP conversion (requires libwebp / cwebp)
cwebp -q 80 photo.jpg -o photo.webp

# AVIF conversion (requires ImageMagick 7+)
magick photo.jpg -quality 60 photo.avif

Next.js (автоматически)

Компонент next/image автоматически выбирает оптимальный формат с учетом поддержки браузера:

import Image from 'next/image'
<Image src="/photo.jpg" alt="Auto-optimized" width={800} height={600} />

Браузеры с поддержкой AVIF получают AVIF; браузеры с поддержкой WebP получают WebP; остальные получают JPEG — все автоматически.

Реальный эффект: до и после

Типичная запись в блоге с 5 встроенными изображениями, изначально сохраненными как JPEG:

• Общий вес изображений: 2.1 MB
• После конвертации в WebP (качество 80%): 1.25 MB (−40%)
• После конвертации в AVIF (качество 70%): 0.85 MB (−60%)
• Улучшение LCP (измеренное): 0.8s → 0.4s

Заключение

Перестаньте по умолчанию использовать JPEG и PNG для всего. В 2026 году WebP — безопасный вариант по умолчанию для 95%+ веб-сценариев. AVIF стоит дополнительного шага для страниц с высоким трафиком. Начните конвертировать сегодня — прирост производительности и SEO будет заметен сразу.