Форматы изображений: чем JPEG отличается от PNG, SVG и других

Все изображения делятся на два больших типа: растровые и векторные.

Растровая графика состоит из сетки пикселей — маленьких цветных точек. Каждая точка хранит свой цвет, поэтому качество изображения напрямую зависит от его разрешения. Если увеличить растровую картинку сильнее исходного размера, станут заметны отдельные пиксели. К растровым форматам относятся JPEG, PNG, GIF, WebP, AVIF, TIFF, BMP и многие другие.

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

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

JPEG и PNG — два самых распространённых растровых формата. Внешне они похожи, но решают разные задачи. Главное отличие — способ сжатия и поддержка прозрачности.

JPEG: лучший выбор для фотографий

JPEG (Joint Photographic Experts Group) создавался специально для фотографий. Это растровый формат со сжатием с потерями: при сохранении алгоритм удаляет часть данных, которые человеческий глаз почти не замечает на снимках с плавными переходами цвета. Благодаря этому файл получается значительно меньше.

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

Ещё одна особенность JPEG — отсутствие поддержки альфа-канала. Если сохранить изображение с прозрачностью в этот формат, прозрачные области будут заменены сплошным цветом — чаще всего белым.

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

PNG: прозрачность и идеальная чёткость

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

Часто можно встретить обозначения PNG-8, PNG-24 и PNG-32. Это условные названия, которые получили распространение благодаря графическим редакторам, в частности Adobe. PNG-8 использует палитру до 256 цветов и подходит для простых иконок и схем. PNG-24 обычно означает полноцветное изображение без альфа-канала, а PNG-32 — полноцветное изображение с 8-битной прозрачностью. При этом всё это один и тот же формат PNG, который поддерживает разные варианты хранения данных.

Цветовая глубина PNG-24 сопоставима с JPEG, но размер файла обычно заметно больше, потому что PNG не удаляет информацию при сжатии. Для фотографий это чаще всего невыгодно: визуальная разница минимальна, а вес файла значительно выше.

В 2025 году вышла третья редакция спецификации PNG. Она официально закрепила поддержку анимированного PNG (APNG), HDR и хранения Exif-метаданных.

SVG (Scalable Vector Graphics) — основной векторный формат для веба. Файл с расширением .svg содержит обычный XML-код с описанием фигур, линий и трансформаций. Поэтому его можно открыть даже в текстовом редакторе, а редактировать — в Figma, Inkscape или Adobe Illustrator.

Один и тот же логотип одинаково хорошо выглядит и в размере 32 пикселей в шапке сайта, и на огромном рекламном баннере.

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

Кроме JPEG, PNG и SVG существуют форматы, которые лучше подходят для анимации или позволяют сильнее уменьшить размер файлов.

GIF: простая анимация

GIF появился ещё в 1987 году, но используется до сих пор благодаря поддержке покадровой анимации и простой прозрачности. Именно поэтому GIF стал стандартом для мемов, небольших анимаций, индикаторов загрузки и других коротких движущихся изображений.

Главное ограничение — палитра всего из 256 цветов. Для фотографий этого недостаточно: появляются заметные полосы и грубые переходы цветов. Поэтому GIF используют только там, где важнее анимация, чем качество изображения.

WebP: современный формат для веба

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

• сжатие с потерями;
• сжатие без потерь;
• прозрачный фон;
• анимацию.

Благодаря этому WebP может заменить и JPEG, и PNG в большинстве веб-задач. При одинаковом визуальном качестве изображения обычно занимают меньше места, что помогает быстрее загружать страницы сайта.

В 2026 году WebP поддерживается более чем в 97% современных браузеров, поэтому его можно безопасно использовать практически на любом сайте.

AVIF и HEIC: форматы нового поколения

AVIF и HEIC используют алгоритмы сжатия, которые пришли из современных видеокодеков. Благодаря этому изображения могут занимать значительно меньше места.

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

Их главный недостаток — совместимость. На старых устройствах и в устаревших браузерах AVIF и HEIC могут открываться некорректно или не открываться вовсе. Если неизвестно, на каком устройстве будут смотреть изображение, JPEG по-прежнему остаётся самым универсальным вариантом.

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

TIFF — формат для хранения изображений высокого качества. Он поддерживает цветовое пространство CMYK, которое используется в типографиях, а также высокую глубину цвета. Благодаря этому TIFF подходит для печати и архивирования изображений. При этом сегодня многие типографии принимают итоговые макеты в формате PDF/X, а TIFF чаще используется как исходный или промежуточный файл.

RAW — это семейство форматов цифровых камер. RAW хранит необработанные данные с матрицы фотоаппарата. Именно из таких файлов фотографы выполняют цветокоррекцию, после чего экспортируют изображения в JPEG, TIFF или PNG.

BMP — один из старейших графических форматов Windows. Хотя спецификация поддерживает несколько способов сжатия, включая RLE, на практике большинство BMP-файлов сохраняются без сжатия и поэтому занимают очень много места. Сегодня этот формат почти полностью вытеснен более эффективными решениями.

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

Для сайта и соцсетей

Для фотографий самым универсальным вариантом остаётся JPEG. Он позволяет сохранить хорошее качество изображения при сравнительно небольшом размере файла и без проблем открывается практически на любом устройстве.

Если сайт поддерживает WebP, лучше отдать предпочтение этому формату. При сопоставимом качестве изображения обычно весят меньше, благодаря чему страницы загружаются быстрее.

Для логотипов, иконок и других элементов с прозрачным фоном лучше выбрать PNG. Если же графика создана в векторе, оптимальным решением станет SVG.

Для логотипов и презентаций

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

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

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

Для печати и хранения

Для полиграфии обычно используют TIFF или PDF/X в высоком разрешении. Чтобы получить качественный отпечаток, изображение должно иметь разрешение не менее 300 dpi и, при необходимости, цветовое пространство CMYK.

JPEG тоже подходит для печати, но только при минимальном уровне сжатия. Если файл много раз пересохранялся, накопившиеся артефакты могут стать заметны на готовом отпечатке.

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

Если нужно уменьшить размер JPEG без заметного ухудшения качества, лучше использовать специальные инструменты, например Squoosh. При экспорте качество около 75–85% обычно позволяет значительно уменьшить размер файла, а разницу большинство людей практически не замечает.

Универсального графического формата не существует. Каждый из них решает свою задачу:

• JPEG подходит для фотографий;
• PNG — для графики с прозрачностью и чёткими границами;
• SVG — для логотипов и иконок;
• WebP помогает уменьшить вес изображений на сайте;
• AVIF обеспечивает ещё более эффективное сжатие;
• TIFF — формат для профессиональной печати и архивирования.

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