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

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

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

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

GIF — анимации. Ну тут вообще отдельная песня.

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

P. S. Я не могу описать все случаи, бывают уникальные, так как процесс выбора формата зависит от контента вашего изображения. В каждом конкретном нетипичном случае, думайте сами. К примеру, если векторная иллюстрация весит много, есть смысл перевести её в JPG или PNG. Иногда SVG-иконка может весить больше её PNG-аналога (при одинаковом фактическом размере, например, 100 на 100 пикселей), тут многое зависит от методов и качества создания таких иконок. Как правильно отметил @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
build engineer
Почитайте на википедии более подробно об алгоритмах сжатия PNG и JPG, чтобы понимать их преимущества и недостатки.

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

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

Войти через TM ID
Похожие вопросы
AD-VI Нижний Новгород
от 30 000 до 50 000 руб.
WWHW Санкт-Петербург
от 40 000 до 100 000 руб.