Выбор правильного формата изображения может сократить вес страницы на 50 % и более, не ухудшив при этом визуальное качество. Как вы решаете, учитывая конкуренцию JPEG, PNG, WebP, AVIF, GIF и SVG?
TL;DR: По умолчанию используется WebP для фотографий и сложных изображений. Используйте PNG для графики, требующей прозрачности и резких краев. Используйте SVG для значков и логотипов. Рассмотрите возможность использования AVIF, если вы можете использовать резервные варианты.
Разбивка по форматам
JPEG
Формат фотографий по умолчанию в Интернете уже 30 лет. Хорошо обрабатывает фотографический контент, но создает файлы большего размера, чем WebP, с тем же визуальным качеством. Никакой прозрачности. Используйте, когда: максимальная совместимость с электронной почтой или очень старые системы.
PNG
Формат без потерь идеально подходит для графики с текстом, снимков экрана и изображений, требующих альфа-прозрачности. Создает огромные файлы для фотографий — никогда не используйте PNG для фотографий.
ВебП
Разработано Google. И с потерями, и без потерь. Создает файлы на 25–35 % меньше, чем JPEG, и на 26 % меньше, чем PNG. Поддерживает прозрачность и анимацию. Более 97% поддержки браузеров в 2026 году. Лучший универсал для Интернета.
АВИФ
Формат нового поколения, обеспечивающий размер файлов на 20–50 % меньше, чем в WebP. Кодирование медленнее, поддержка браузеров ~93%. Идеально подходит для резервных копий WebP/JPEG через <picture>.
гифка
Устарело. Ограничение до 256 цветов, огромные размеры файлов для анимации. Замените анимацией WebP или видео MP4/WebM, чтобы файлы стали на 80–90 % меньше.
Сравнение размеров файлов
| Формат | Фото (1920×1080) | Графика (800×600) | Примечания |
|---|---|---|---|
| JPEG (q80) | 285 КБ | 145 КБ | Базовый уровень |
| PNG | 2,1 МБ | 95 КБ | Отлично подходит для графики, ужасно для фотографий |
| WebP (q80) | 195 КБ | 68 КБ | ~ на 32% меньше, чем JPEG |
| АВИФ (q80) | 142 КБ | 52 КБ | ~ на 50% меньше, чем JPEG |
Блок-схема принятия решения
- Логотип, значок или иллюстрация? → SVG
- Нужна прозрачность? → WebP (с потерями или без потерь) или PNG
- Фото? → WebP (с потерями, q75–85)
- Максимальное сжатие? → AVIF с резервным вариантом WebP/JPEG
- Электронная почта? → JPEG (лучшая поддержка почтового клиента)
✅ Как обслуживать несколько форматов
Используйте HTML <picture> элемент с <source> теги для AVIF и WebP, возвращаясь к JPEG/PNG в <img> . Браузер выбирает первый поддерживаемый формат.
🔧 Конвертируйте и сжимайте в любой формат — бесплатно
Перетащите изображения и конвертируйте их в форматы JPEG, PNG и WebP с контролем качества. Запускается локально в вашем браузере.
Открыть сжатие изображения →Заключение
Для большинства веб-сайтов в 2026 году правильным значением по умолчанию будет WebP. Он предлагает лучший баланс сжатия, качества, поддержки браузера и функций. Используйте PNG для прозрачности с острыми краями, SVG для векторов и рассмотрите AVIF для страниц, критичных к производительности.