PNG или JPG: какой формат выбрать и в чём разница

Короткий ответ за 30 секунд

Если нет времени читать всё — вот правило, которое закрывает 95% случаев:

• Фотография (люди, природа, еда, плавные переходы цвета) → JPG. Файл будет в разы меньше, а разницу с оригиналом глаз почти не заметит.
• Графика (логотипы, иконки, схемы), скриншоты, текст или нужна прозрачность → PNG. Резкие края останутся идеально чёткими, без грязи и ореолов.

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

Главное различие: с потерями против без потерь

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

JPG использует сжатие с потерями. Чтобы сделать файл маленьким, он буквально выбрасывает часть данных — те детали, которые глаз почти не замечает. Технически он разбивает изображение на квадраты 8×8 пикселей, переводит их в набор частот и отбрасывает «высокие частоты» (резкие переходы цвета). На фотографии с её мягкими градиентами это незаметно. Но выброшенное не вернуть — отсюда и слово «потери».

PNG использует сжатие без потерь. Он применяет тот же алгоритм DEFLATE, что и ZIP-архивы: ищет повторяющиеся узоры и кодирует их компактнее, но не теряет ни одного пикселя. Что положили — то и достанете, бит в бит. Поэтому PNG идеален там, где важна абсолютная точность: текст, тонкие линии, ровные заливки цвета.

PNG vs JPG: таблица сравнения

Вот вся разница на одном экране — критерий за критерием. Эту таблицу удобно держать перед глазами, когда сомневаетесь.

Размер и качество: где кто выигрывает

Здесь ломаются интуитивные ожидания. Многие думают, что PNG «всегда качественнее, а JPG всегда легче». На деле всё зависит от содержимого картинки.

Возьмём обычную фотографию 4000×3000 пикселей. В несжатом виде это около 36 МБ. Сравните, как её сожмут разные форматы:

На фотографии JPG выигрывает с разгромным счётом: в 8 раз легче PNG при качестве, которое глаз не отличит от оригинала. Именно поэтому камеры, мессенджеры и соцсети по умолчанию выдают JPG.

Но теперь возьмём плоскую графику — логотип или схему 800×600 с ровными заливками цвета. Картина переворачивается: PNG сожмёт её примерно до 25 КБ, а JPG раздует до 60 КБ — больше по размеру и хуже по качеству, с заметной грязью на краях. На таком контенте сильная сторона JPG превращается в слабость.

Прозрачность: почему логотипы — это PNG

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

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

А что будет, если сохранить прозрачный логотип в JPG? Прозрачные области зальются сплошным белым (или другим фоновым) цветом. Поставите такой «логотип» на тёмную страницу — получите некрасивый белый прямоугольник вокруг него. Поэтому простое правило: нужна прозрачность — это всегда PNG (или WebP, о нём ниже).

Артефакты JPG: откуда грязь на тексте

Если вы хоть раз сохраняли скриншот в JPG, то наверняка видели результат: вокруг чёрных букв на белом фоне появляются мутные цветные ореолы, а тонкие линии «звенят» и расплываются. Это не баг — это естественное следствие того, как устроен JPG.

Помните про выброшенные «высокие частоты»? Резкая граница между чёрной буквой и белым фоном — это и есть высокая частота в чистом виде. JPG пытается её усреднить, и на месте чёткого края возникает зона размытых полутонов. На фотографии таких резких границ мало, поэтому артефакты не бросаются в глаза. А на тексте, скриншоте интерфейса или штриховом рисунке резкие границы повсюду — и каждая обрастает грязью.

А что насчёт WebP?

Закономерный вопрос: если у каждого формата свои слабые места, нет ли чего-то получше? Для веба — есть. Это WebP от Google.

WebP — гибрид, который вобрал лучшее из обоих миров. Он умеет и сжатие с потерями (как JPG), и без потерь (как PNG), и прозрачность (как PNG), и анимацию. При этом файлы у него обычно на 25–35% меньше, чем у JPG, и заметно меньше, чем у PNG, при сопоставимом качестве. Для скорости загрузки сайта это прямая выгода.

Где же подвох? В совместимости. Современные браузеры WebP понимают, но многие старые программы, редакторы и устройства — нет. Отправите коллеге WebP на проверку — он, возможно, не сможет его открыть привычной программой.

Как конвертировать туда и обратно

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

Полный список преобразований — от JPG в PNG до PNG в WebP — всегда на странице всех форматов. А если хотите глубже понять сам PNG — загляните в гид «Что такое PNG».