Руководство по форматам изображений: PNG, JPG, WebP, SVG — когда какой использовать

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

Таблица быстрого выбора

Подробный обзор форматов

JPEG (JPG)

Стандарт для фотографий с 1992 года. Использует сжатие с потерями на основе дискретного косинусного преобразования (DCT).

Лучше всего подходит для: Фотографий, природных сцен, сложных изображений с градиентами. Избегайте для: Текста, логотипов, скриншотов, изображений с резкими краями.

Оптимальные настройки качества:

• Качество 85: Визуально без потерь для большинства фотографий (лучший вариант по умолчанию)
• Качество 75: Хороший баланс для веб-миниатюр
• Качество 95: Почти без потерь для печати или архивирования

Совет: JPEG не поддерживает прозрачность. Если вам нужно фото с прозрачным фоном, используйте WebP или PNG.

PNG

Сжатие без потерь — каждый пиксель сохраняется в точности. Поддерживает полную альфа-прозрачность.

Лучше всего подходит для: Скриншотов, элементов интерфейса, логотипов на цветном фоне, любых изображений с текстом. Избегайте для: Фотографий (файлы будут в 5–10 раз больше, чем JPEG).

PNG-8 vs PNG-24:

• PNG-8: 256 цветов, меньший размер файла, подходит для простой графики
• PNG-24: 16 миллионов цветов, больший размер файла, нужен для фотографий или градиентов

WebP

Современный формат от Google, который поддерживает сжатие с потерями и без потерь, прозрачность и анимацию.

Лучше всего подходит для: Всего в вебе — это лучший универсальный формат. Избегайте для: Печати (ограниченная поддержка ПО), электронной почты (некоторые клиенты не отображают WebP).

Преимущества перед JPEG: На 25–35% меньше при эквивалентном качестве, поддерживает прозрачность. Преимущества перед PNG: На 26% меньше для изображений без потерь, поддерживает сжатие с потерями. Поддержка браузерами: 97%+ по всему миру.

Конвертируйте и оптимизируйте изображения с нашим Оптимизатором изображений.

SVG

Векторный формат на основе XML. Изображения описываются математическими фигурами, а не пикселями.

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

Уникальные преимущества:

• Бесконечное масштабирование без потери качества
• Крошечный размер файла для простой графики (часто менее 1 КБ)
• Стилизуется с помощью CSS (изменение цветов, анимация)
• Доступность (текст в SVG индексируется поиском и читается экранными дикторами)
• Редактируется в любом текстовом редакторе

<!-- SVG иконка: 200 байт vs PNG: 5000 байт -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <circle cx="12" cy="12" r="10"/>
  <path d="M12 8v4l3 3"/>
</svg>

AVIF

Новейший формат, основанный на видеокодеке AV1. Превосходное сжатие по сравнению с WebP.

Лучше всего подходит для: Главных изображений, фотографий продуктов, любых приоритетных изображений, где важно максимальное сжатие. Что учитывать: 92% поддержка браузерами, более медленное кодирование, ограниченная поддержка инструментов редактирования. Экономия: На 50% меньше, чем JPEG при эквивалентном качестве.

GIF

Старейший веб-формат изображений (1987). Ограничен 256 цветами.

Лучше всего подходит для: Простых анимаций (но анимированный WebP лучше). Избегайте для: Почти всего остального — WebP или APNG являются лучшими альтернативами. Унаследованное использование: По-прежнему широко поддерживается в мессенджерах и социальных сетях для реакций и мемов.

Сравнение размеров (одно и то же изображение)

Фотография 1200×800, оптимизированная для веба:

Та же графика (логотип, 500×200):

Современная лучшая практика: элемент Picture

Подавайте оптимальный формат для каждого браузера:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Описание" loading="lazy">
</picture>

Браузеры выбирают первый поддерживаемый формат. Каждый получает лучшее доступное качество при минимальном размере.

Рабочий процесс оптимизации

1. Начинайте с источника максимального качества — никогда не оптимизируйте из уже сжатого изображения
2. Выберите правильный формат, используя таблицу выше
3. Измените размер до отображаемых размеров — не отдавайте изображение 4000px в контейнере 800px
4. Сожмите — используйте наш Компрессор изображений для быстрой оптимизации
5. Подавайте адаптивные размеры — используйте srcset для разных ширин экрана
6. Включите ленивую загрузку — loading="lazy" для изображений ниже первого экрана

Подробнее об оптимизации читайте в нашем руководстве по оптимизации изображений.

Часто задаваемые вопросы

Стоит ли конвертировать все изображения в WebP?

Для веб-доставки — да. WebP — лучший универсальный формат с поддержкой браузерами 97%+. Сохраняйте оригинальные файлы в их родном формате (JPEG, PNG) для архивирования и редактирования, а для отдачи конвертируйте в WebP. Используйте элемент <picture>, чтобы обеспечить JPEG-фолбэк для редких браузеров, не поддерживающих WebP.

AVIF готов к продакшену?

AVIF готов к продакшену с поддержкой браузерами 92%+. Основные соображения — более медленное кодирование (в 3–10 раз медленнее WebP) и ограниченная поддержка инструментов редактирования. Для статических сайтов, где изображения кодируются один раз при сборке, скорость кодирования не является проблемой. Всегда предоставляйте WebP или JPEG в качестве запасного варианта.

Связанные ресурсы

• Оптимизатор изображений — Сжатие изображений для веба
• Изменение размера изображений — Изменение до точных размеров
• Оптимизация изображений для веба — Полное руководство по оптимизации