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

Форматы файлов изображений

Каждое цифровое изображение хранится в определённом формате файла, и этот выбор определяет три вещи: размер файла, точность передачи картинки и поддерживаемые дополнительные возможности, такие как прозрачность или анимация. Правильный выбор важнее, чем кажется: подходящий формат сохраняет скорость сайта, чёткость логотипа и точность печати. В этом руководстве рассмотрены семь форматов, с которыми вы встретитесь чаще всего: JPEG, PNG, WebP, AVIF, GIF, SVG и TIFF. Для каждого описаны сильные и слабые стороны и оптимальные сценарии использования.

Прежде чем сравнивать форматы, стоит запомнить одно важное различие. Большинство форматов изображений — растровые: они хранят фиксированную сетку пикселей, поэтому при увеличении сверх исходного размера изображение становится размытым. Векторные форматы, такие как SVG, напротив, описывают фигуры математически, поэтому их можно масштабировать до любого размера без потери чёткости. Все форматы ниже, кроме SVG, — растровые.

JPEG

JPEG (Joint Photographic Experts Group), появившийся в 1992 году, остаётся самым распространённым форматом для фотографий. Он хранит до 16,7 миллиона цветов (24 бита) и использует сжатие с потерями: безвозвратно отбрасывает те детали изображения, которые человеческий глаз замечает меньше всего, поэтому фотография в JPEG может занимать лишь малую долю размера несжатого оригинала. Большинство программ позволяют управлять этим компромиссом с помощью настройки качества, обычно по шкале от 0 до 100, а сам формат поддерживается практически каждым браузером, приложением и устройством.

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

PNG

PNG (Portable Network Graphics) — открытый, свободный от патентов формат, основанный на сжатии без потерь: сохранённое изображение попиксельно идентично оригиналу, сколько бы раз его ни редактировали и ни пересохраняли. Он поддерживает глубину цвета от экономичных палитр из 256 цветов до 48 бит, а его фирменная особенность — полноценный альфа-канал: каждый пиксель может быть от полностью непрозрачного до полностью прозрачного. Это делает PNG стандартным выбором для логотипов, иконок, скриншотов и любой графики с текстом или резкими границами. Его недостаток — размер: для фотографий файл PNG обычно в несколько раз больше визуально сопоставимого JPEG, поэтому он плохо подходит для фотогалерей и других крупных изображений в вебе.

WebP

WebP, выпущенный Google в 2010 году, был задуман как замена JPEG и PNG в вебе. Он поддерживает сжатие с потерями и без потерь, полную альфа-прозрачность в обоих режимах и анимацию. В режиме с потерями файлы WebP обычно на 25–35 % меньше файлов JPEG сопоставимого визуального качества; в режиме без потерь они, как правило, примерно на четверть меньше соответствующих файлов PNG. С 2020 года WebP поддерживают все основные браузеры, поэтому прежние опасения о совместимости в вебе больше не актуальны, хотя некоторые устаревшие настольные программы по-прежнему не могут его открыть. Для изображений, публикуемых на сайте, WebP — один из самых надёжных современных вариантов по умолчанию.

AVIF

AVIF — самый новый формат в этом списке; он основан на видеокодеке AV1 и был завершён в 2019 году. Он сжимает ещё эффективнее, чем WebP: файл AVIF может быть примерно вдвое меньше JPEG аналогичного визуального качества. Кроме того, он поддерживает прозрачность, анимацию, 10-битный цвет и HDR. Сейчас его поддерживают все основные браузеры. Главные недостатки — более медленное кодирование и неполная поддержка в настольных программах, поэтому пока его лучше рассматривать как формат доставки для веба, а не как рабочий формат для редактирования.

GIF

GIF (Graphics Interchange Format) появился в 1987 году и сегодня живёт почти исключительно благодаря одной возможности: простой и повсеместно поддерживаемой анимации. Каждый кадр ограничен палитрой из 256 цветов, что делает GIF плохим выбором для фотографий: сведение фото к 256 цветам заметно ухудшает его, хотя само сжатие технически происходит без потерь. Прозрачность здесь тоже устроена по принципу «всё или ничего»: пиксель либо полностью непрозрачен, либо полностью невидим, без промежуточных степеней, из-за чего на другом фоне часто появляются неровные края. Для новых проектов анимированные WebP или AVIF дают лучшее качество при значительно меньшем размере файла, но GIF остаётся самым универсальным способом поделиться короткой анимацией.

SVG

SVG (Scalable Vector Graphics) — единственный векторный формат в этом списке. Файл SVG — это текстовый документ, описывающий фигуры, контуры и текст, поэтому он остаётся идеально чётким при любом размере и на любом экране: один и тот же файл может служить и крошечным фавиконом, и большим баннером. Файлы простой графики очень малы, а поскольку SVG — это обычный текст, разработчики могут стилизовать и анимировать его с помощью CSS. Это формат выбора для логотипов, иконок, графиков и диаграмм. Однако фотографии он передать не может — для них единственный вариант — растровый формат.

TIFF

TIFF (Tagged Image File Format) — рабочая лошадка полиграфии, сканирования и архивного хранения. Это гибкий контейнер, поддерживающий сжатие без потерь (или вовсе без сжатия), глубину цвета до 16 бит на канал, цветовую модель CMYK для профессиональной печати и несколько страниц в одном файле, и именно поэтому фотографы, издательства и архивы используют его для эталонных копий. Цена этому — размер: файлы TIFF слишком велики для веба, и браузеры, как правило, их не отображают. Храните в TIFF мастер-копии и архивы, а для публикации экспортируйте изображение в веб-формат.

Как выбрать подходящий формат

  • Фотографии в вебе: WebP или AVIF; JPEG — когда важна максимальная совместимость.
  • Логотипы и иконки: SVG, если есть векторный исходник; иначе PNG.
  • Скриншоты и графика с текстом: PNG или WebP без потерь.
  • Анимация: анимированный WebP или AVIF для лучшего качества и размера; GIF — для универсальной совместимости.
  • Печать, сканирование и архивные мастер-копии: TIFF с экспортом в JPEG или WebP для публикации.

Если изображение сохранено в неподходящем формате, быстрее всего поможет онлайн-конвертер: Picapto преобразует изображения между JPEG, PNG и WebP прямо в вашем браузере, так что ваши файлы никогда не покидают устройство.