Перейти к содержимому

PNG или JPG — когда какой формат

PNG сохраняет острые края и прозрачность; JPG меняет немного деталей на гораздо меньшие фотофайлы. Ошиблись — логотипы размываются, скриншоты мутнеют, прозрачный фон схлопывается в чёрные прямоугольники. Страница сопоставляет типичные ситуации — товарные кадры, UI-снимки, стикеры — с правильным форматом, включая случай, когда форма требует JPG, а у макета нет фона.

Быстрое решение

Фото, портреты, путешествия, всё что должно ощущаться «с камеры» → JPG (или WebP на своём сайте).

Логотипы, иконки, UI-скриншоты, оверлеи или всё с острыми краями и прозрачными пикселями → PNG (или WebP с альфой).

Портал требует JPG, а у файла прозрачность → сначала добавьте цвет фона, потом конвертируйте. Не ждите, что прямой PNG→JPG угадает нужную заливку.

Когда PNG окупается

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

Альфа-канал важен для стикеров, водяных знаков и логотипов поверх фото — у JPG просто негде хранить «прозрачность».

Цена — размер на фотоконтенте. Сохранить закат пляжа как PNG часто даёт файл в несколько раз больше разумного JPG при похожем качестве просмотра.

Когда JPG — лучший инструмент

Сжатие с потерями заточено под непрерывные тона фото. Почтовые клиенты, соцсети, киоски печати и бесчисленные формы загрузки по-прежнему стандартизируют JPEG.

Прозрачности нет. Когда конвертеры сплющивают альфу без выбранного фона, полупрозрачные пиксели могут стать грязно-серыми или сплошным чёрным — это ограничение формата, не баг файла.

JPG также слабый архивный формат для дизайна, который будете много править. Держите PNG, TIFF или нативный исходник, если пиксели должны пережить круговые поездки.

Прозрачный PNG → JPG: заливка перед экспортом

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

Используйте прозрачный PNG→JPG, чтобы явно выбрать заливку, а не надеяться на автоматическую конвертацию.

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

Где WebP (не заменяя основы)

На сайте, которым вы управляете, WebP часто закрывает и «маленькое фото», и «иконку с прозрачностью» одним форматом. Если это ваш мир, читайте WebP vs AVIF vs JPG.

Наш поток сжатия PNG ведёт к WebP, потому что повторное сохранение PNG в браузере редко режет байты — смена формата обычно да.

Конвертация с заливкой фона

Когда форма принимает только JPG, а у логотипа прозрачность, откройте прозрачный PNG→JPG и сначала выберите цвет заливки, чтобы не получить чёрный мат.

Прозрачный PNG → JPG

Вопросы PNG vs JPG

PNG всегда больше?
Для фото — почти всегда. Для простых плоских иконок с малым числом цветов PNG может быть и меньше, и острее JPG — всегда смотрите размер экспорта.
Можно JPG→PNG вернуть потерянные детали?
Нет. PNG только меняет контейнер; размытие и блоки сжатия JPG остаются. Нужен исходный несжатый оригинал.
Скриншот в чат — PNG или JPG?
PNG, если нужно читать мелкий текст. JPG или WebP, если платформа всё равно пережмёт и вы боретесь с лимитом загрузки — превью перед отправкой.
Типография принимает только JPG
Следуйте их спецификации. Макетам с прозрачностью сначала нужен прозрачный PNG→JPG; для критичного цвета спросите, принимают ли PDF или TIFF.
Можно ли оба формата в одном проекте?
Да — JPG для фотоассетов, PNG для UI и логотипов нормально. Подбирайте формат под каждый ассет, а не форсируйте одно расширение на весь сайт.

Связанное