PNG, JPG или SVG: что использовать?
Какой формат изображений лучше всего подходит для использования их на сайте?
Выбор состоит из: PNG, JPG и SVG.
- Вопрос задан более трёх лет назад
- 2247 просмотров
3 комментария
Простой 3 комментария
Чем лучше пользоваться: руками или ногами?
Все эти форматы для разных задач.
Странный вопрос, давайте следующий.
longclaps, или головой.
Решения вопроса 1
Для фото — JPEG.
Для схематических изображений (иконки, схемы, чертежи, графические примитивы) — PNG или SVG. Для сложных схематических изображений PNG может быть выгоднее.
Также замечу, что внедрение растрового изображения в SVG — возможно, но бессмысленно.
Ответ написан более трёх лет назад
Комментировать
Нравится 7 Комментировать
Ответы на вопрос 2
Для иконок svg, для фотографий — jpg, если нужна прозрачность на фотке — png
Ответ написан более трёх лет назад
Комментировать
Нравится 7 Комментировать
Для разных целей разные форматы.
Добавлю свое мнение к предыдущему ответу.
Скажем, фон. Может быть простым, неким абстрактным, но который нельзя отобразить с помощью чистого css. Для этих целей svg тоже будет идеальным выбором, поскольку может быть в пару килобайтов при неограниченном размере, при том что для jpg это же изображение может быть очень сложным и при самом идеальном варианте его можно будет ужать до пары сотен кб.
Однако, если тот же svg фон будет переполнен мелкими элементами, с достаточно большим количеством точек, то такой svg использовать в качестве фона будет нецелесообразно, поскольку даже при весе, меньшем чем в аналогичном по размеру jpg, этот svg будет визуально долго отрисовываться.
Еще момент, для chrome настоятельно рекомендуется использовать webp, которые при том же визуальном качестве существенно меньше по весу, чем jpg и png. Да и google любит его как свой формат и как следствие очень благоволит ему — достаточно прогнать сайт через PageSpeed Insights и посмотреть, что он там будет рекомендовать.
Если на сайте нет webp, таки рекомендация будет обязательно )
Ответ написан более трёх лет назад
Нравится 2 3 комментария
и посмотреть, что он там будет рекомендовать
Если вам не посрать на то, что там Гугль в своих интересах рекомендует.
К вашим интересам — оптимизации сайта ради ускорения выдачи клиентам и повышения в поисковых запросах — это благоволение никакого отношения не имеет.
Adamos, вообще то уже год как минимум гугл учитывает скорость — или я что то пропустил и они это уже отменили?
А так да, если вам гугл неважен, то и вопросов нет.
lagudal, разница в скорости от того, что вы специально для Хрома будете использовать webp, не настолько велика, чтобы вообще обращать на нее внимание.
SVG vs. PNG: в чем разница и когда их использовать
Просто люблю писать, переводить и давать людям возможность читать интересный контент. И пусть я не всегда идеальна — есть к чему стремиться.
В цифровом мире существуют десятки типов файлов изображений, каждый из которых различается в зависимости от типа сжатия, форматирования и поддержки браузера. При этом два наиболее часто используемых формата — SVG и PNG.
Эти два типа файлов не могут быть более разными — каждый из них лучше подходит для конкретных ситуаций. Они, конечно же, не взаимозаменяемы во всех аспектах, но вы можете обнаружить, что SVG способны выполнять определенные задачи лучше, чем стандартное изображение формата PNG.
Давайте узнаем разницу между SVG и PNG и в каких случая лучше применять тот или иной тип изображения.
Что такое SVG?
SVG расшифровывается как «масштабируемая векторная графика», и это наиболее широко используемый формат векторных файлов в Интернете. Предлагаем разобраться с этим:
- Масштабируемость: SVG-файлы можно увеличивать или уменьшать без ущерба для качества изображения, которое остается совершенно четким, независимо от того, насколько оно большое или маленькой.
- Вектор: Большинство типов файлов изображений содержат пиксели. Векторы — это, по сути, фрагменты кода, визуализирующие изображение в режиме реального времени, преобразуя его в пиксели, которые вы видите на экране.
- Графика: Хотя SVG может быть не так хорошо известен, это тип файла изображения, такой же как PNG, JPEG или GIF. Просто с данным типом файла все происходит немного по-другому.
Векторы — это фрагменты кода, написанные в формате XML, которые представляют формы, линии и цвета для уточнения того, как это работает.
Несмотря на то, что создание изображения с помощью только кода вполне возможно, большинство людей используют редакторы векторной графики, такие как Inkscape или Adobe Illustrator. Вы также можете конвертировать PNG или другие растровые изображения в формат SVG, вот только результат не всегда будет ожидаемо хорошим.
Когда страница загружается, этот код преобразуется в графику, поэтому вы не можете сразу отличить SVG от PNG. Но поскольку SVG — просто строки кода, преобразованные в пиксели — это означает, что они могут масштабироваться до любого разрешения, большого или малого, без потери качества.
SVG также поддерживает анимацию и прозрачность, что делает его универсальным форматом.
Единственная проблема заключается в том, что он не так широко используется, как более стандартные форматы, например, PNG, поэтому данный тип файла менее поддерживается в старых браузерах, и его не всегда легко загрузить на свой сайт, заставив правильно отображаться.
Плюсы и минусы SVG
Хотя векторная графика все еще не так широко используется, как растровые типы файлов, такие как PNG, популярность векторной графики быстро растет. Они выполняют некоторые важные задачи, которые просто не под силу растровым изображениям. Вот почему люди любят SVG:
- Изображения SVG масштабируются. Вы можете создать такой файл в любом разрешении, и он будет увеличиваться или уменьшаться в размерах без ущерба для качества или пикселизации. С растровыми изображениями вам нужно знать с самого начала, какой размер необходим, иначе вы рискуете сделать изображение слишком большим или слишком маленьким.
- SVG всегда выглядят четкими и красивыми, потому что никогда не теряют качество. Растровые изображения могут получиться размытыми даже при незначительном изменении размера.
- Поскольку SVG — это просто код, их размер файла минимален и хорошо оптимизирован. Опять же, существуют оптимизаторы SVG, чтобы сделать их еще более управляемыми. Ваш сайт, вероятно, будет загружаться немного быстрее, если вы воспользуетесь такого рода инструментами.
- В отличие от PNG, SVG поддерживают анимацию.
Файл SVG имеет довольно много преимуществ по сравнению с PNG, но он подойдет далеко не в каждой ситуации. Вот недостатки векторных типов файлов:
- Несмотря на то, что SVG поддерживаются во всех основных современных браузерах, вы можете столкнуться с проблемами совместимости при их отображении в старых браузерах и на старых устройствах. Если значительная часть ваших посетителей использует именно их, такой выбор может оказаться плохой идеей.
- С изображениями SVG сложнее работать: для их создания и редактирования требуются специальные программы. Безусловно, вы можете создавать их только с помощью XML, но это не всегда выполнимо. К тому же, инструменты премиум-класса, такие как Adobe Illustrator, могут быть весьма дорогими.
- SVG-файлы не так просто встраивать, как PNG. Если вы используете WordPress, этот формат не поддерживается медиатекой по умолчанию, поэтому вам понадобится специальный лагин для их загрузки.
- SVG должны отображаться браузером при загрузке страницы, поэтому их избыток или большой файл со множеством векторов может привести к нагрузке на устройство.
Когда использовать SVG вместо PNG
Вам определенно не следует конвертировать все ваши PNG в SVG, поскольку векторная графика может стать отличной заменой некоторым изображениям. При этом стоит помнить, что SVG подходят исключительно для декоративной графики веб-сайтов, логотипов, иконок, графиков и диаграмм, а также других простых изображений.
Однако они не так хорошо работают со сложными изображениями, включающими множество цветов и форм, такими как скриншоты, фотографии и даже детализированные иллюстрации. Хотя любое изображение можно преобразовать в SVG, браузеры не всегда хорошо обрабатывают сложные векторы с сотнями цветов, поскольку их необходимо отображать при загрузке страницы.
Бесспорно, иллюстрации в формате SVG могут быть красивыми, но создание сложных изображений требует много времени, усилий и навыки владения передовыми инструментами редактирования. Придерживайтесь простоты, когда создаете свои векторные изображения. Если же у вас есть детальные изображения, обязательно используйте формат PNG.
Однако SVG лучше подходят для адаптивного и «retina-ready» дизайна из-за их масштабируемости и отсутствия ухудшения качества. Кроме того, они поддерживают анимацию, в то время как PNG — нет, а у всех остальных типов растровых файлов, поддерживающих анимацию, таких как GIF, APNG и WebP, есть свои проблемы.
Для простой графики, которая может потребовать анимации и гарантированно хорошую масштабируемость на любом размере экрана, используйте SVG.
Что такое PNG?
PNG расшифровывается как «портативная сетевая графика», и это название отражает то, насколько широко распространен данный тип файлов. Любой, кто когда-либо пользовался компьютером, скорее всего, работал с PNG, так как это самый распространенный тип файлов в Интернете после JPEG.
PNG — тип файла растрового изображения, аналогичный большинству распространенных форматов изображений. Это означает, что он состоит из пикселей, одинаковых маленьких точек, отображаемых на вашем мониторе или экране. Хотя это значительно упрощает отображение, это также означает, что качество изображения зависит от разрешения — количества пикселей в изображении.
Поэтому, если вы увеличите или уменьшите размер растрового изображения, это повлияет на качество. Иногда ущерб незначителен, особенно при уменьшении масштаба, а иногда это может сделать изображение размытым и совершенно непригодным для использования.
Тем не менее, распространенность PNG делает его хорошим кандидатом для универсального использования. Однако помните, что данный тип файлов поддерживает прозрачность, но не анимацию.
Плюсы и минусы PNG
Что делает PNG наиболее широко используемым форматом файлов изображений в Интернете? Конечно же, его преимущества, среди которых:
- Файлы PNG легко редактируются и открываются в любом распространенном инструменте редактирования изображений. Нет необходимости платить за продвинутые программы для создания или изменения изображения PNG: в лучшем случае вам может потребоваться скачать бесплатный редактор, такой как GIMP.
- Независимо от того, пишите ли вы код с нуля или используете медиа-менеджер WordPress, отображение изображений PNG на вашем сайте — простая задача.
- PNG использует сжатие без потерь, что делает его более четким, чем файлы JPEG со сжатием с потерями. Однако это требует большего размера файла и не может сравниться с векторными изображениями.
С другой стороны, формат PNG был создан десятилетия назад и имеет несколько заметных недостатков, которые не были обновлены для современной эпохи:
- Вы не можете изменять размер файлов PNG без потери качества. Вам необходимо тщательно планировать разработку растровой графики и убедиться, что она имеет правильный размер, иначе вы можете потратить время на создание непригодных изображений.
- PNG-файлы очень большие из-за их сжатия без потерь. Таким образом, они могут замедлить работу вашего сайта. Исправление этого требует еще большего сжатия и ухудшения качества.
- Создание изображений «retina-ready» с помощью PNG более утомительно и с большей вероятностью приведет к размытости.
- PNG не поддерживает анимацию. Другие типы анимированных растровых файлов, такие как GIF, могут иметь серьезные проблемы: например, GIF-файлы очень низкого качества и поддерживают только 256 цветов.
Когда использовать PNG вместо SVG
PNG является наиболее распространенным типом файлов по определенной причине: он очень универсален и подходит практически для любой ситуации. Однако при его использовании следует учитывать всего несколько недостатков, таких как большой размер файла и недостаточная масштабируемость.
Файлы PNG подходят для отображения детализированных изображений, иллюстраций и фотографий — всего, с чем не может справиться векторное изображение. Все, что имеет сотни цветов и большое разрешение определенно должно быть в формате PNG. Это вовсе не значит, что вы не можете использовать PNG для более простых изображений, таких как логотипы и декоративная графика, но SVG все же лучше подходят для этой задачи.
Если вы не уверены, сможет ли платформа обрабатывать более новый, менее поддерживаемый тип файлов SVG, вам подойдет PNG — хотя бы для того, чтобы обезопасить себя.
Например, вы не можете загружать SVG-файлы в большинство социальных сетей, а поскольку некоторые почтовые клиенты могут испытывать трудности с векторами, обычно рекомендуется использовать PNG в шаблонах электронной почты.
В целом PNG хорошо работают с любыми сложными, не анимированными изображениями, особенно с теми, которые требуют прозрачности. Вы можете использовать данный формат практически где угодно — просто иногда SVG подойдет лучше.
Что лучше: SVG или PNG?
Ни один из типов файлов не лучше и не хуже другого: у каждого есть свои ограничения. Хотя SVG превосходит PNG в нескольких областях, PNG намного лучше справляется с определенными вещами.
В целом, однако, вы должны придерживаться SVG везде, где это уместно, и использовать PNG во всех других ситуациях, с которыми векторы не могут справиться. Возможно, вы технически сможете использовать либо то, либо другое в этих случаях, но SVG предпочтительнее в нескольких конкретных областях.
В то время как SVG поддерживает анимацию, PNG — нет. Альтернативой могут считаться такие типы растровых файлов, как GIF и APNG. Тем не менее, не существует идеального анимированного растрового формата, который широко поддерживался бы, был хорошо известен, отличался высоким качеством и приводил бы к небольшим размерам файлов. SVG, более-менее, удовлетворяют всем этим параметрам.
Файлы SVG также идеально масштабируются под любой размер экрана, что делает их отзывчивыми и «retina-ready» по умолчанию. В то же время PNG теряют качество при изменении размера, и заставить их хорошо масштабироваться — непростая задача, особенно если у вас есть только крошечные изображения, которые плохо отображаются на больших экранах.
Наконец, SVG, как правило, меньше PNG, поэтому они менее обременительны для вашего сервера, несмотря на необходимость рендеринга при загрузке. Используйте их для простых, плоских цветных иллюстраций, логотипов и декоративной графики на вашем сайте.
С другой стороны, PNG подходят для отображения сложной графики с большим разрешением или изображений с тысячами цветов. Увы, на данный момент SVG не может обрабатывать такое количество цветов и форм, а подобного рода сложные изображения зачастую составляют большинство изображений на сайтах, так что еще не время отказываться от PNG.
К тому же PNG более широко поддерживаются в браузерах и на определенных платформах, таких как почтовые клиенты. Если вы не уверены, будет ли правильно отображаться SVG, проявите осторожность и используйте PNG.
В заключение
SVG и PNG — это два совершенно разных формата файлов. В конце концов, не имеет большого значения, используете ли вы PNG или JPEG на своем сайте за пределами узкоспециализированных вариантов использования, однако стоит помнить, что выбор между SVG и PNG является куда более важным делам, чем может показаться.
Вы с большей вероятностью будете использовать PNG в своих проектах, так как это более простой, доступный и универсальный формат файлов. И хотя SVG сложнее создавать и редактировать, этот формат имеет ряд преимуществ по сравнению с PNG всякий раз, когда уместно использовать векторные изображения, такие как декоративная графика и логотипы.
Всем успешной работы и творчества!
GIF, PNG, JPG или SVG. Какой использовать?
Если эта статья кажется вам немного знакомой, мы опубликовали ее первый выпуск еще в 2009 году. Хотя SVG добавила в веб-дизайн совершенно новое измерение, такие вопросы, как «В чем разница между JPEG и PNG?», Все еще актуальны как всегда. Мы подумали, что пришло время по-новому взглянуть на состояние игры в форматах веб-изображений.
Сегодняшнее краткое руководство даст вам краткое изложение различных типов файлов и того, где они работают лучше всего. Наслаждаться.
JPG против PNG против GIF против SVG — в чем разница?
| категория | палитра | Использовать для | |
| JPG | с потерями | Миллионы цветов | Неподвижные изображения фотография |
| GIF | Lossless | Максимум 256 цветов | Простые анимации Графика с плоскими цветами Графика без градиентов |
| PNG-8 | Lossless | Максимум 256 цветов | Похож на GIF Лучшая прозрачность, но без анимации Отлично подходит для икон |
| PNG-24 | Lossless | Неограниченное количество цветов | Аналогично PNG-8 Обрабатывает неподвижные изображения и прозрачность |
| SVG | Вектор / без потерь | Неограниченное количество цветов | Графика / логотипы для веб Сетчатки / с высоким разрешением экрана |
GIF: графический формат обмена
256 цветовая палитра.
Если только вы не вышли из слегка курящего DeLorean прямо с 1985 года , вы, скорее всего, уже знакомы с самым глупым форматом изображений в сети — GIF (Graphics Interchange Format).
Формат GIF является типом растрового изображения, но в отличие от JPEG или PNG, файлы GIF ограничены максимальной палитрой из 256 цветов. По сути, каждое GIF-изображение содержит предустановленную «коробку с карандашами», и невозможно по-настоящему смешать эти цвета для создания новых цветов.
В то время как 256 может показаться большим количеством мелков для работы, сложные фотографии обычно имеют много тысяч тонов. Этот цветовой диапазон теряется в процессе преобразования GIF, и это является основной причиной не использовать GIF для цветных фотографий.
Хотя GIF, как правило, является плохим выбором для изображений с широкими цветовыми вариациями, ограничение в 256 цветов может помочь сохранить небольшие размеры файлов, что идеально подходит даже для самых медленных интернет-скоростей. В течение многих лет GIF предоставлял единственную опцию прозрачности в Интернете — хотя PNG и SVG теперь предлагают это тоже.
Категория: без потерь
Выберите GIF для:
- Простые анимации
- Маленькие иконки
- Графика с небольшим разбросом пикселей (т. Е. Много плоских цветов, таких как логотипы и флаги)
JPEG
В зависимости от ваших предпочтений вы можете ссылаться на этот формат как «JPEG» или «JPG» — оба варианта являются приемлемыми вариациями одного и того же аббревиатуры — Joint Photographic Experts Group .
В отличие от GIF, JPEG является 16-битным форматом, что означает, что он может смешивать красный, синий и зеленый свет для отображения миллионов цветов. Это делает JPG очень «фото-дружественным». Это частично, почему это стандартный формат, когда речь идет о большинстве цифровых камер на рынке.
Формат JPEG также позволяет гибко выбирать степень сжатия изображения — от 0% (сильное сжатие) до 100% (без сжатия). Как правило, настройка сжатия 60% -75% значительно сократит ваш файл, сохраняя при этом изображение на большинстве экранов приличным.
Хотя JPEG хорошо подходит для сжатия и рендеринга фотографий, он представляет собой тип сжатия с потерями, что означает, что он менее полезен для постоянного редактирования изображения. Экспорт JPEG приводит к потере качества, и эти потери ухудшаются с каждым последующим экспортом — как фотокопия фотокопии. Вот почему профессиональные фотографы обычно снимают в формате RAW без потерь.
Также обратите внимание, что, в отличие от GIF и PNG, JPEG не может сохранить прозрачность.
Категория: потеря
Используйте JPEG для:
- Неподвижные изображения
- фотография
- Изображения со сложными цветами и динамикой
PNG
PNG (Portable Network Graphics) — более новый формат файлов, чем GIF и JPEG, — это своего рода брак между форматами GIF и JPEG благодаря двум его вариантам.
PNG-8
PNG-8 во многом похож на GIF и использует ту же самую 256-цветовую палитру (максимум). У этого есть лучшие варианты прозрачности и обычно экспортирует немного меньшие размеры файла. Однако PNG-8 не имеет функции анимации.
PNG-24
PNG-24 позволяет отображать изображения с миллионами цветов — во многом как JPEG — но также предлагает возможность сохранить прозрачность. Поскольку PNG-24 — это файл формата без потерь, вы, скорее всего, получите файлы большего размера, но если качество изображения важнее размера файла, PNG-24 — ваш лучший вариант. Несмотря на это, такие сервисы, как TinyPNG.com, часто могут сильно повлиять на размер вашего файла. По сравнению с их кузеном JPEG, файлы PNG-24 не так универсально совместимы с каждым приложением и платформой, что делает формат немного менее идеальным для совместного использования в Интернете. Тем не менее, он может быть отредактирован без ухудшения качества.
Категория: без потерь
Используйте PNG для:
- Веб-графика, требующая прозрачности
- Цветные тяжелые и сложные фотографии и графика
- Изображения, которые требуют повторного редактирования и реэкспорта
SVG
В отличие от трех форматов, упомянутых выше, SVG (масштабируемая векторная графика) не является чисто растровым форматом. Вместо этого это векторный формат — близкий родственник формата AI Illustrator и AI и EPS — который постоянно становится привлекательным вариантом для веб-дизайнеров и дизайнеров пользовательского интерфейса.
Иногда полезно думать о SVG как о «HTML для иллюстраций», и вам нужно думать об этом совсем по-другому, чем другие форматы изображений, которые мы перечислили.
SVG лучше всего подходит для отображения логотипов, значков, карт, флагов, диаграмм и другой графики, созданной в приложениях векторной графики, таких как Illustrator, Sketch и Inkscape. Написанный в разметке на основе XML, ваш SVG можно редактировать в любом текстовом редакторе и изменять с помощью JavaScript или CSS. Поскольку векторы можно масштабировать до любого размера, сохраняя при этом четкое качество изображения, они идеально подходят для адаптивного дизайна.
Хотя SVG по своей сути является векторным форматом, можно (даже часто) встраивать растровую графику в файл SVG — так же, как вы можете встраивать JPEG в HTML.
Вы можете сделать это, либо связавшись с источником изображения через его URL (как вы могли бы сослаться на JPG на веб-странице), либо инкапсулировав пиксельное изображение в виде URI данных . Это дает SVG бесспорную гибкость и мощь.
Хотя SVG может способствовать тому, чтобы ваши изображения выглядели красиво в Интернете, это не обязательно тот формат, который обычный человек может использовать для сохранения и загрузки изображений через свой веб-сайт или платформы социальных сетей.
Онлайн-сервисы, такие как WordPress, Flickr, Medium, Tumblr и Facebook, либо принудительно преобразуют ваш SVG в формат, который им нравится, либо, что более вероятно, напрямую блокируют загрузку SVG. Алекс продемонстрировал несколько вариантов хостинга SVG, включая svgur.com , imgh.us и даже Github .
Несмотря на то, что я рад видеть, что меньшие хостинговые услуги решают проблемы SVG, Github в настоящее время является единственным SVG-дружественным сервисом, который, я уверен, будет на 99% через 5 лет. Если вы используете SVG для веб-дизайна, вы обнаружите, что вы почти всегда можете уменьшить размер файла по сравнению с чем-то вроде JPEG или PNG. Но учтите, что чем сложнее ваш SVG, тем больше будет размер файла.
Категория: Вектор / Без потерь
Используйте SVG для:
- Логотипы и значок с сильным, геометрическим, дружественным к вектору дизайном
- Графика, которая может потребоваться отображать в нескольких размерах и экранах
- Графика, которая отвечает на их устройство
- Графика, которую нужно отредактировать, обновить и перераспределить.
Сравнивать и противопоставлять
Теперь, когда мы рассмотрели различия между популярными форматами файлов, пришло время увидеть их рядом. Ниже вы увидите, как форматы GIF, JPEG, PNG и SVG обрабатывают изображения как простых, так и сложных цветов вместе с фотографическими изображениями.
Плоская цветная графика
Первый тип изображения, который мы собираемся рассмотреть, это плоская цветная графика. Это охватывает большинство логотипов и брендинга, значки, простые карты, диаграммы и диаграммы. Исходное изображение PNG размером 23,4 КБ с размером 1280 x 1280.
Ниже вы сможете увидеть разницу в размере сжатия, а также качество изображения. Обратите внимание, что изображения были сохранены с помощью опции «Сохранить для Интернета и устройств» в Photoshop с настройками высочайшего качества.
GIF, PNG, JPG или SVG: что использовать?
От автора: если вы только что не выпрыгнули из дымящегося Делориана прямиком из 1985 года, то вам должен быть знаком самый бестолковый формат в интернете — GIF (Graphics Interchange Format). GIF – формат растровых изображений. Однако в отличие от JPEG и PNG этот формат файлов ограничен цветовой палитрой в 256 цветов. По сути, в каждом GIF изображении предустановлен «бокс с цветными мелками», и вы не можете получить новый цвет путем их смешивания.
Может показаться, что 256 цветов это много. Для сравнения в сложных фотографиях тысячи оттенков. В процессе преобразования в GIF диапазон цветов сильно сужается, и это основная причина не использовать GIF для цветных фотографий.
GIF плохо подходит для изображений с широким диапазоном цветов, но ограничение в 256 цветов может помочь сохранить низкий вес файла, что идеально подходит даже для самых медленных соединений. На протяжении долгого времени только GIF имел функцию прозрачности. Сейчас она есть в PNG и SVG.
Категория: без потери качества
графика с низкой вариацией пикселей (т.е. монотонные цвета типа логотипов и флагов).
JPEG
В зависимости от вашего предпочтения вы можете использовать этот формат в виде «JPEG» или «JPG» — оба являются приемлемыми вариантами одного акронима — Joint Photographic Experts Group.
В отличие от GIF формат JPEG 16-битный, т.е. он умеет смешивать красный, синий и зеленый. Это позволяет отображать миллионы цветов и делает его очень дружелюбным к фотографиям. Отчасти так сложилось потому, что это стандартный формат, в большинстве цифровых камер на рынке.
JPEG позволяет гибко настраивать степень сжатия изображения: от 0% (сильное сжатие) до 100% (без сжатия). Как правило, 60%-75% хватит, чтобы значительно снизить вес файла, сохраняя отличное качество на большинстве экранов.
JPEG хорошо подходит для сжатия и рендеринга фотографий, но это тип сжатия с потерями. То есть он мало подходит для постоянного редактирования изображений. Экспорт в JPEG приводит к потере качества, и потери становятся все больше с последующими экспортами. Поэтому профессиональные фотографы в основном снимают в формате без потерь RAW.
Также в отличие от GIF и PNG формат JPEG не сохраняет прозрачность.
Категория: с потерями качества
изображения со сложными цветами и динамикой.
PNG
В отличие от GIF и JPEG формат PNG (Portable Network Graphics) более новый. Благодаря двум версиям формат похож на микс GIF и JPEG.
PNG-8
PNG-8 сильно похож на GIF и использует также цветовую палитру в 256 цветов (максимум). У него чуть лучше прозрачность и чуть меньше вес файла. Однако в PNG-8 нет функции анимации.
PNG-24
PNG-24 позволяет рендерить изображения с миллионами цветов, почти как JPEG, но также сохраняет прозрачность.
PNG-24 – формат без потерь качества, что увеличивает вес файлов. Если качество изображений важнее веса файлов, PNG-24 лучший выбор. Сервисы типа TinyPNG.com зачастую могут сильно снизить вес файла.
По сравнению со своим сводным братом JPEG, PNG-24 не являются универсально совместимыми со всеми приложениями и платформами, что делает формат неподходящим для совместного использования в сети. Тем не менее, формат можно редактировать без потерь качества.
Категория: без потерь качества
веб-графика с прозрачностью;
сложные фотографии с множеством цветов и графика;
изображения, которые необходимо повторно редактировать и экспортировать.
SVG
В отличие от трех форматов выше SVG (Scalable Vector Graphics) – не чисто растровый формат. Это векторный формат, близкий к AI в Adobe Illustrator и EPS. Векторная графика постепенно приобретает популярность в сети и у UI дизайнеров.
Иногда удобно представлять SVG как «HTML для иллюстраций». Этот формат немного отличается от других.
SVG лучше всего подходит для отображения логотипов, иконок, карт, флагов, графиков и другой графики, созданной в векторных графических редакторах типа Illustrator, Sketch и Inkscape. SVG написан на XML разметке, его можно редактировать в любом текстовом редакторе, а также с помощью JS и CSS. Векторная графика масштабируется под любой размер без потери качества, что идеально подходит для адаптивного дизайна.
SVG – векторный формат, однако в него можно (часто так и делается) вставить растровую графику точно так же, как JPEG вставляется в HTML.
Вставить изображение можно по URL (как ссылка на JPG на странице) или с помощью инкапсуляции пиксельного изображения в виде Data URI. Это делает SVG максимально гибким и мощным форматом.
SVG сохраняет хорошую картинку на сайте, но это не тот формат, который обычный пользователь сможет сохранить и загрузить через сайт или социальные сети.
Онлайн сервисы типа WordPress, Flickr, Medium, Tumblr и Facebook* будут либо принудительно конвертировать SVG в подходящий для них формат, либо, что более вероятно, сразу заблокируют загрузку SVG. В сети есть куча хостингов SVG, среди которых svgur.com , imgh.us и даже Github, как Alex продемонстрировал здесь .
Мне нравится, что есть маленькие хостинги SVG, однако я на 99% уверен, что следующие 5 лет только GitHub будет SVG-friendly. При использовании SVG в веб-дизайне почти всегда можно сжать вес файла в отличие от JPEG и PNG. Но чем сложнее SVG, тем больше вес файла.
Категория: векторная графика/без потерь качества
логотипы и графика в веб-дизайне;
Сравнение
Мы узнали про отличия популярных форматов, теперь пора сравнит их лицом к лицу. Ниже вы увидите, как GIF, JPEG, PNG и SVG обрабатывают изображения с простыми и сложными цветами, а также изображения.
Графика с монотонными цветами
Первый тип, который мы рассмотрим – графика с монотонными цветами. Она покрывает большую часть логотипов и брендов, иконок, простых карт, графиков и диаграмм. Исходный размер изображения 23.4 Кб с разрешением 1280 х 1280.
Ниже показано сравнение веса файлов и качество. Изображения были сохранены через функцию в Photoshop «Сохранить для web и устройств» с максимальным качеством.
JPEG 100% (без сжатия): 53.3 KB
SVG: 6 KB (чистая векторная графика)
В случае с этим изображением не заметно больших потерь качества при сравнении шести форматов. Хотя можно заметить небольшие артефакты по краям сжатого JPEG.
Не всегда все будет так с графикой с монотонными цветами, но в большинстве случаев проблем с такими изображениями не возникнет. Для этого изображения наилучший вариант при условии, что у нас есть оригинал – SVG с весом в 6Кб. Если векторной графики нет, на замену можно использовать PNG-8. Вес файла снижается с 23,4Кб до 11,8Кб.
Изображения со сложными цветами
Оригинал – 328Кб JPEG с разрешением 1280 х 960. Ниже показано сравнение веса файлов и качества. Изображения были сохранены через функцию в Photoshop «Сохранить для web и устройств» с максимальным качеством.
У нас нет векторной версии этого изображения, поэтому любая SVG версия будет представлять собой просто JPEG внутри SVG. Этот формат здесь будет лишним.
JPEG 100% (без сжатия): 776 KB
Изображения со сложными цветами лучше выглядят в JPEG, PNG-24 и SVG. Цвета по большей части сохраняются, и нет этих страшных колец и шума, который обычно вылезает в GIF и PNG-8.
Цветные фотографии
Оригинал – 215Кб JPEG с разрешением 1280 х 710. Ниже показано сравнение веса файлов и качества. Изображения были сохранены через функцию в Photoshop «Сохранить для web и устройств» с максимальным качеством.
SVG здесь также мало что даст.
JPEG 100% (без сжатия): 90 KB
Как и со сложными изображениями, фотографии лучше всего сохранять в JPEG, PNG-24 или SVG. В фото сверху цвета сохраняются во всех форматах кроме PNG-8 и GIF, где вылезают кольца и шум в тени волос, на заднем фоне, а также в верхней части фото.
Автор: Gabrielle Gosha , Jennifer Farley
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
* Признана экстремистской организацией и запрещена в Российской Федерации.