Что лучше png или svg
Перейти к содержимому

Что лучше png или svg

  • автор:

SVG, PNG или JPG, вот в чём вопрос…

2019 год — Модный, стильный и прогрессивный год дизайна, не так ли? Ещё в 2010 году разработчики не задумывались и выбирали для своего логотипа текстовой формат или же графический, разрешения JPEG или PNG. Однако не так давно многие пересмотрели свою точку зрения с вошедшим в моду «SVG», это новый вид который используется веб-мастерами и дизайнерами.

Так что же такое SVG и с чем его «едят»?
SVG — это разметка масштабируемой векторной графикой, который является расширением старого доброго XML языка. Суть SVG в том, что он не только поддерживает такую же прозрачность как в PNG, но и выделяется среди всех высоким качеством при любых разрешениях экрана! Да-да, вы не ослышались, SVG будет отлично выглядеть как на мобильном телефоне, так и на мониторе разрешения 1920×1080, его качество не портится, ведь по факту SVG это не картинка — а код .
Плюсами SVG является то, что он не «пикселится» на экране, пиксели в нём в принципе словно «Отсутствуют», его качество не портится, а изменять цвета можно редактировав SVG файл в обычном редакторе типа Notepad++. Это позволяет не только редактировать его без графического редактора, но и возможность в любое время сменить стилистику (цвет) сайта вместе с логотипом, ведь SVG это по факту ещё и CSS стиль.

Сравним PNG и SVG.

Вот пример относительно качества PNG и SVG, как наглядно видно — SVG не имеет пикселей. К слову, наш логотип сайта был на PNG, из-за чего был расплывчив, сейчас мы используем SVG формат, его качество можно видеть в шапке сайта, оно идеально 🙂

Оба формата поддерживают прозрачность и имеют неплохое качество, хотя SVG в нём выигрывает, помимо этого SVG не «пикселится», а так же является кодом, который всегда и везде возможно редактировать, даже в консоли браузера зайдя в CSS, разве не классно? Но, не спешим торопиться.

У SVG есть ограничения. Как и у любых других форматов, это логично. SVG рассчитывается математически — это значит, что формы и цвета всегда будут в порядке. Но растровые артефакты (т.е фотографические элементы) все равно не будут масштабируемыми, при этом будут занимать кучу места.

Тем самым если Вам настолько важна загрузка сайта (а она важна) — не стоит пихать все картинки SVG форматом.

Если же говорить о JPEG — то использовать его отлично если нужно сжимать изображения, ведь он отлично сжимается, но если Вам нужны прозрачные элементы, качество — забудьте о данном формате, используйте его для картинок публикаций на Вашем сайте, там он отлично подойдёт
А что, если мне нужно разработать сайт для экранов с разными разрешениями, в том числе и с 1920 на 1080, но SVG мне не подходит?

Ответ прост: используйте PNG, он так же отлично подойдёт, так как имеет высокое качество, а так же поддерживает прозрачность.

Вывод.

Если Вы действительно хотите следовать тренду и иметь красивый сайт — используйте SVG формат как минимум для логотипа, это сделает его более приятным, красивым и подчеркнет Ваш проект. Но! Не пихайте его везде — это увеличит время загрузки Вашего сайта, а анимации SVG формата — могут не поддерживаться на старых ОС Android и старых браузерах на подобии IE, что сделает логотип «не рабочим».

Удачи в Ваших начинаниях!

Оцените, данная информация была полезна для Вас?

нравится

0

не нравится

0

Работать дальше с png или перейти на SVG?

Ребята такой глупый вопрос
До этого момента работал только с PNG форматами изображение например: Логотип
Сегодня взял заказ Дизайн/Верстка Лендинг пейджа
Что лучше использовать SVG или PNG для Логотипа ?

  • Вопрос задан более трёх лет назад
  • 4951 просмотр

Комментировать
Решения вопроса 0
Ответы на вопрос 3
Евгений Вольф @Wolfnsex Куратор тега CSS
Если не хочешь быть первым — не вставай в очередь!

Что лучше использовать SVG или PNG для Логотипа ?

Лучше, подозреваю, что SVG. Так как SVG — это векторный формат и он хорошо выглядит на любом разрешении, в т.ч. на телефонах, у которых разрешение физическое может быть очень высоким, а фактическое — в несколько раз меньше.

К тому же, SVG обычно меньше занимает и т.д.

Но, не забывайте, что это два диаметрально противоположенных формата, и далеко не всё можно перевести в SVG-формат. Но то, что можно сделать — обычно делают именно в формате SVG.

Ответ написан более трёх лет назад
Комментировать
Нравится 3 Комментировать
FullStack Alex @FullStackAlex
Веб-разработчик, электрик, кочевник

в принципе для верстки сайтов svg должен быть первым выбором

но если логотип сделан на основе pixel и имеет очень много разной информации о цветах и формах то тогда никуда от png не денешься.

если же логотип создан как векторная графика, то зачем делать из нее пиксели то есть png? Только если векторная графика обратно же содержит много эффектов (например раскраска на основе сетей) и очень много anchors то прийдётся использовать png, так как размер файла svg будет в этом случае зашкаливать.

Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать

svg -> png = easy
png -> svg = время

вот и вся разница. ну и вектор и в африке вектор, масштабируется без потерь + требования заказчика на поддержку броузеров. если не динозавр — то свг норм

Форматы изображений SVG, PNG и JPG: плюсы и минусы

Просто люблю писать, переводить и давать людям возможность читать интересный контент. И пусть я не всегда идеальна — есть к чему стремиться.

Когда дело доходит до создания изображений для Интернета и других цифровых целей, какие форматы файлов могут предоставить вам лучший результат? Вы должны думать о скорости в противовес качеству и размеру изображения. Итак, что вы должны использовать: SVG, PNG или JPG?

Было время, когда вы просто использовали JPG, чтобы соответствовать пространству на 72 dpi и двигались дальше. Уже нет. Экраны с высоким разрешением, несколько видовых экранов и необходимость иметь быстрый веб-сайт сделали все это гораздо более сложным процессом. Давайте рассмотрим плюсы и минусы каждого из этих форматов!

SVG

SVG или, как расшифровывается, масштабируемая векторная графика, невероятно практична. Вот почему дизайнеры используют данный формат чаще.

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

SVG — это формат без потерь, то есть он не теряет никаких данных при сжатии, отображает неограниченное количество цветов и чаще всего используется для графики и логотипов в интернете, а также для проектов, которые будут просматриваться на Retina и других экранах с высоким разрешением.

Плюсы SVG

  • Векторный формат хорошо отображается в любом размере
  • Возможность создания простых SVG-рендерингов в коде или текстовом редакторе
  • Дизайн и экспорт сложной графики из Adobe Illustrator или Sketch
  • Доступен текст SVG
  • SVG легко стилизовать и написать
  • Форматы SVG поддерживаются современными браузерами и соответствуют завтрашнему дню
  • Формат очень сжимаемый и легкий
  • Хорошо подходит для поиска из-за текстового формата
  • Поддержка прозрачности
  • Позволяет сохранять неподвижные или анимированные изображения

Минусы SVG

  • Дизайн SVG может усложниться
  • Не отображается в некоторых устаревших браузерах
  • Ограниченная поддержка почтовых клиентов
PNG

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

Существует два типа PNG — PNG-8 и PNG-24. PNG-8 использует более ограниченную цветовую палитру всего с 256 цветами, имеет несколько лучшую прозрачность и экспортируется в небольшом размере. PNG-24 использует неограниченную цветовую палитру, поддерживает прозрачность, но экспортируется в большом размере. Оба типа PNG имеют сжатие без потерь.

Хотя форматы PNG похожи на GIF, они не поддерживают анимацию. Этот формат чаще всего используется для иконок, небольших неподвижных изображений или любого изображения, которое нуждается в прозрачности.

Плюсы PNG

  • Поддержка прозрачности
  • Подходит для изображений с текстом
  • Форматы PNG хорошо отображают логотипы
  • Включает встроенное текстовое описание для поисковых систем
  • PNG-8 имеет небольшой размер файла и является самым легким
  • Экспорт без неровных краев

Минусы PNG

  • Размеры файлов быстро растут для больших файлов, таких как изображения
  • Некоторые старые почтовые клиенты имеют проблемы с их визуализацией
  • Нет анимации
  • Файлы PNG-24 могут быть большими, что не совсем хорошо и удобно для обмена через Интернет
JPEG

JPG или JPEG, вероятно, самый известный формат изображения. Это опция по умолчанию для большинства изображений, потому что она удобна для фотографий благодаря практически неограниченному цветному дисплею.

JPG также предлагает возможность выбрать, каким сжатие изображения должно быть от 0% (сильное сжатие) до 100% (без сжатия). Большинство дизайнеров выбирают что-то в диапазоне от 60 до 70 процентов. Изображения по-прежнему хорошо выглядят на этом уровне сжатия, но размеры файлов значительно меньше.

JPG использует сжатие с потерями и не поддерживает исходные данные во время сжатия. Каждый раз, когда фото пересохраняется и экспортируется в формате JPG, оно ухудшается.

Формат JPG чаще всего используется для изображений, фотографий и всего, что имеет большое количество цветов.

Плюсы JPEG

  • Отлично подходит для многоцветности и фотографии
  • Легко уменьшить размер файла
  • Согласованно отображается в почтовых клиентах

Минусы JPEG

  • Нет прозрачности
  • Создает неровные края для текста
  • Без анимации
  • Формат с потерями
  • Автоматические метаданные для поиска не должны содержать информацию alt
Какой формат следует использовать?

Теперь, когда вы знаете, каковы некоторые различия между SVG, PNG и JPG, что из них вы должны использовать?

Вы можете задать себе несколько следующих вопросов, чтобы получить на это ответ.

Вам нужен векторный или растровый формат?

Растр: JPG или PNG

Вам нужна прозрачность?

Вы используете многоцветное изображение?

Это большая фотография?

Содержит ли изображение текст?

Сжатие без потерь важно для вас?

Нужно ли обновлять и перенастраивать графику?

Нет: PNG или JPG

Вы используете анимацию?

Нет: JPG или PNG

Вывод

Все три формата изображений – SVG, PNG и JPG – имеют практическое и широкое применение. Хотя SVG является новейшим форматом и часто может быть сохранен до наименьшего размера файла, это не всегда лучший вариант.

Подумайте о том, как вы используете изображения в вашем проекте, как вы выбираете тип файла, чтобы найти тот, который будет работать лучше всего для того, что вы пытаетесь достичь. Вы даже можете обнаружить, что некоторые проекты содержат изображения, использующие все три типа файлов. Это на самом деле происходит довольно часто!

Всем успешной работы и творчества!

PNG, JPG или SVG: что использовать?

Какой формат изображений лучше всего подходит для использования их на сайте?
Выбор состоит из: PNG, JPG и SVG.

  • Вопрос задан более трёх лет назад
  • 2412 просмотров

3 комментария

Простой 3 комментария

longclaps

Чем лучше пользоваться: руками или ногами?

kshnkvn

Все эти форматы для разных задач.
Странный вопрос, давайте следующий.

Adamos

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

и посмотреть, что он там будет рекомендовать

Если вам не посрать на то, что там Гугль в своих интересах рекомендует.
К вашим интересам — оптимизации сайта ради ускорения выдачи клиентам и повышения в поисковых запросах — это благоволение никакого отношения не имеет.

Adamos, вообще то уже год как минимум гугл учитывает скорость — или я что то пропустил и они это уже отменили?
А так да, если вам гугл неважен, то и вопросов нет.

Adamos

lagudal, разница в скорости от того, что вы специально для Хрома будете использовать webp, не настолько велика, чтобы вообще обращать на нее внимание.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *