Когда использовать jpg а когда png?

Для каких устройств или в каких случаях следует использовать png вместо jpg и наборот? Например для ретины следует юзать jpg ну или что в этом духе
  • Вопрос задан
  • 38331 просмотр
Решения вопроса 2
SmthTo
@SmthTo Куратор тега Вёрстка
Все перепёлки мира будут оплакивать мою смерть.
Типичные примеры использования:

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

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

GIF — анимации. Ну тут вообще отдельная песня. Ему на смену пророчат APNG и MP4, но воз и ныне там.

SVG — иконки, иллюстрации. Поддерживает прозрачность, бесконечно тянется. Обычно те же иконки в SVG весят меньше, чем в PNG при одинаковом фактическом размере использования. Можно анимировать (отдельная тема и куча особенностей) и управлять с помощью CSS и JS, если встраивать inline (можно и через #use, но с ограничениями). Наверное, самый чувствительный к ошибкам формат, потому что состоит из кода: сложный SVG-файл может убить производительность. Можно очень легко зашить вредоносный код, поэтому запрещён в вёрстке писем.

P. S. Я не могу описать все случаи, бывают уникальные, так как процесс выбора формата зависит от контента вашего изображения. В каждом конкретном нетипичном случае — думайте сами. К примеру, если векторная иллюстрация весит много, то есть смысл перевести её в JPG или PNG. Иногда SVG-иконка может весить в разы больше её PNG-аналога (при одинаковом фактическом размере использования, например, 100 на 100 пикселей при 1:1 размере viewport к физическому разрешению экрана) — тут многое зависит от методов и качества создания таких иконок. Как правильно отметил @Adamosу, иногда затраты на рендеринг SVG (на стороне клиента) не окупают его преимуществ, и приходится использовать растровые изображения. Ну и т. д… Особенностей использования форматов — куча.

P. P. S. Почитайте о Retina, ибо нет никакого «для ретины следует юзать JPG».
Ответ написан
Stalker_RED
@Stalker_RED
PNG для тех изображений, где нужна прозрачность или где много одноцветных областей, но при этом вектора почему-то нет.

JPEG для фоточек, и всего такого, где много мелких разноцветностей.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 4
lukoie
@lukoie
если сравнивать только эти два формата, то их отличие в двух нюансах:
1 поддержка прозрачности у png, чего jpg не может
2 метод сжатия изображения у jpg зависит от соседних пикселей. Потому если у изображения есть четкие линии, jpg сделает их нечеткими, а png сохранит такие переходы.
Потому, если у Вас просто фоточки, и/или стоит задача экономии - используйте jpg, а если есть технические чертежи, или тем более прозрачности - png.
Ответ написан
saboteur_kiev
@saboteur_kiev
software engineer
Почитайте на википедии более подробно об алгоритмах сжатия PNG и JPG, чтобы понимать их преимущества и недостатки.

В среднем -
JPG занимает меньше, а PNG качественнее.
JPG жмет все одним алгоритмом (но зато работает быстрее, и меньше весит), правда артефакты и смазанность границ...
PNG пытается разделять фото, схемы, надписи и сжимать их с минимальными артефактами (но больше обрабатывается и больше весит)
Ответ написан
Комментировать
Margari
@Margari
Если мы говорим про сайты, то тут еще приходится следить за размером. SVG, как правило, намного качественнее (т.к. векторная графика) и весит меньше png. К тому же его не надо ужимать, что приходится делать с png и jpg через плагины, проги или сервисы. SVG применяют в основном для иконок, логотипов компаний. На всех устройствах будет качественно выглядеть, особенно на Retina. PNG в таких случаях иногда бывает пиксельным при ближнем рассмотрении, поэтому я бы рекомендовала использовать svg там, где это возможно. На маках разница очевидна!
Ответ написан
daniilnikitin
@daniilnikitin
Контент-менеджер
Для видео лучше PNG, JPG - в полосочку получается.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы