PNG или JPG — чем отличаются и что выбрать для каждой задачи
Сохранить в PNG или в JPG? Вопрос, который возникает по сто раз на дню — при экспорте макета, загрузке товара на маркетплейс, отправке сканов. Отвечают на него обычно наугад, а зря: выбор неправильного формата — это либо файл в пять раз тяжелее нужного, либо грязные разводы вокруг текста. Правило на самом деле одно, и оно простое.
JPG — для фотографий: миллионы оттенков, плавные переходы, маленький вес за счёт сжатия с потерями. PNG — для графики: логотипы, скриншоты, схемы, текст на картинке, всё с чёткими краями и прозрачностью. Перепутаете — получите либо тяжёлый файл (фото в PNG), либо артефакты (логотип в JPG).
Главное различие: как они сжимают
JPG сжимает с потерями. Алгоритм выбрасывает детали, которые глаз замечает слабо: микропереходы оттенков, высокочастотный шум. На фотографии потери невидимы, зато файл худеет в 5–10 раз. Степень сжатия настраивается: качество 80–90% — золотая середина для веба.
PNG сжимает без потерь. Каждый пиксель восстанавливается в точности. Платой за честность становится вес: фотография в PNG весит в разы больше своего JPG‑близнеца при неотличимой картинке.
Отсюда вся логика выбора: где потери незаметны (фото) — берём JPG и экономим вес; где каждая граница важна (графика) — берём PNG.
Почему логотип в JPG — всегда ошибка
JPG‑алгоритм устроен блоками 8×8 пикселей и хуже всего справляется с резкими границами: вокруг букв, линий и контуров появляется характерная «грязь» — артефакты сжатия. Плюс два структурных ограничения:
- Нет прозрачности. Логотип навсегда впаян в белый прямоугольник — что с этим делать, мы разбирали в статье про прозрачный фон.
- Потери накапливаются. Каждое пересохранение JPG — новый раунд сжатия. Файл, прошедший через пять редактирований, выглядит заметно хуже оригинала.
Для логотипов и иконок иерархия форматов такая: SVG (вектор — лучший вариант), затем PNG, и никогда JPG. Почему вектор вне конкуренции — в сравнении SVG и PNG.
Почему фото в PNG — тоже ошибка
Обратная ситуация безобиднее, но расточительна: фотография в PNG весит 5–20 МБ там, где JPG отдал бы 500 КБ без видимой разницы. На сайте это медленная загрузка и штраф к Core Web Vitals, в письме — недоставка из‑за лимитов, на телефоне — забитая память. Единственный случай, когда фото хранят в PNG, — промежуточные версии при многоэтапном редактировании, чтобы не накапливать JPG‑потери.
Таблица: что в чём сохранять
| Задача | Формат |
|---|---|
| Фотография для сайта, соцсетей | JPG (или WebP) |
| Логотип, иконка | SVG, если нельзя — PNG |
| Скриншот интерфейса | PNG |
| Схема, график, диаграмма | PNG или SVG |
| Картинка с текстом (мем, баннер) | PNG |
| Скан документа | JPG (или PDF) |
| Изображение с прозрачностью | PNG |
| Фото для печати | JPG максимального качества / TIFF |
А как же WebP и AVIF?
Современные форматы, которые умеют и то и другое: сжатие с потерями лучше JPG (на 25–35% легче при том же качестве) и без потерь с прозрачностью лучше PNG. Все актуальные браузеры их поддерживают, и для веба WebP — правильный дефолт: не случайно наш каталог отдаёт превью логотипов именно в WebP.
Почему тогда JPG и PNG живы? Совместимость за пределами браузера: старые программы, госпорталы, маркетплейсы и типографии по‑прежнему просят классику. Рабочая схема: храните оригиналы в PNG/JPG (или вообще в исходниках), для сайта конвертируйте в WebP автоматически.
Как конвертировать туда‑сюда
- JPG → PNG: можно всегда, но бессмысленно для качества — потери JPG уже случились и не вернутся. Конвертируют обычно ради прозрачности после удаления фона.
- PNG → JPG: уместно для фотографий, случайно сохранённых в PNG. Прозрачные области зальются белым — проверьте, что их нет.
- Инструменты: любой графический редактор, Preview на Mac, «Фотографии» на Windows, онлайн‑конвертеры. Для пакетной обработки — командная строка или Squoosh.
Откройте картинку в масштабе 100% и посмотрите на границы объектов и текста. Грязные разводы — пересжатый JPG, ищите исходник получше. Файл фотографии больше 1–2 МБ — конвертируйте в JPG/WebP с качеством 80–85%: разницу не увидит никто, кроме счётчика скорости загрузки.
Под капотом: почему JPG «блочный», а PNG «честный»
Немного механики — она объясняет все внешние эффекты.
JPG делит картинку на блоки 8×8 пикселей и описывает каждый через частотное преобразование (DCT): плавные переливы кодируются несколькими коэффициентами, резкие перепады требуют многих. Сжатие обрезает «дорогие» высокочастотные коэффициенты — на фото это незаметно, а на границе буквы превращается в звон и грязь вокруг контура. Отсюда же блочность в тенях сильно сжатых фото: блоки 8×8 перестают сходиться по яркости.
PNG работает как архиватор: предсказывает каждый пиксель по соседям и сжимает разницу алгоритмом deflate (тот же, что в ZIP). Ничего не выбрасывается — поэтому большие области одного цвета и повторяющиеся узоры сжимаются великолепно, а фотографический шум (где каждый пиксель непредсказуем) — почти никак.
Один и тот же скриншот с текстом: PNG — 80 КБ и идеальные буквы; JPG 80% — 120 КБ и грязь вокруг шрифта. Одно и то же фото заката: JPG 85% — 400 КБ без видимых потерь; PNG — 6 МБ. Формат надо выбирать под природу картинки, а не «какой лучше вообще».
Тонкости PNG, о которых мало кто знает
- PNG-8 против PNG-24. PNG с палитрой до 256 цветов (PNG-8) в разы легче полноцветного — для простой графики без градиентов это легальный способ срезать вес. Экспортёры Figma и Photoshop дают выбор.
- Прозрачность бывает разной. PNG-8 умеет только «пиксель есть/нет» (как GIF) — полупрозрачные тени требуют PNG-24 с альфа‑каналом.
- Метаданные весят. Скриншоты с телефона таскают EXIF‑данные; оптимизаторы (TinyPNG, Squoosh, oxipng) срезают их и перепаковывают сжатие — минус 20–70% без потерь.
- PNG не для CMYK. Формат живёт только в RGB — для типографской печати с цветоделением нужны TIFF или PDF.
Тонкости JPG, которые экономят нервы
- Качество 100 ≠ без потерь. Даже на максимуме JPG прогоняет картинку через DCT — потери меньше, но есть. «Сотка» лишь раздувает файл; рабочий диапазон — 80–90.
- Прогрессивный JPG грузится «от мутного к чёткому» вместо построчного — субъективно быстрее на медленных сетях; галочка есть в любом экспортёре.
- Каждое сохранение — деградация. Правило одного сжатия: редактируйте в исходнике (PSD, PNG, RAW), а в JPG выходите один раз в самом конце.
- Резкие повороты без потерь. Поворот JPG на 90° возможен без пересжатия (jpegtran и часть просмотрщиков это умеют) — мелочь, полезная при массовой обработке сканов.
Коротко
Одно правило закрывает 95% случаев: фото — JPG, графика — PNG, веб — по возможности WebP, логотипы — в идеале вообще SVG. Не сохраняйте логотипы в JPG, не храните фото в PNG, и картинки перестанут быть ни тяжёлыми, ни грязными.
Кстати, в нашем каталоге логотипов выбор формата уже сделан правильно за вас: вектор — в SVG, растровые версии — в PNG с прозрачностью, а превью в каталоге автоматически отдаются в лёгком WebP.