Какой формат лучше подходит для сохранения изображений, предназначенных для веб-сайтов; PNG или SVG?

Ответы:

8

Я бы сказал, что PNG просто потому, что он кажется более приемлемым форматом, чем SVG.

Филип Реган
источник
3
Для качества SVG это лучше, но на практике единственное реальное решение - это PNG, потому что SVG не поддерживается на данный момент в глобальном масштабе.
Littlemad
@Littlemad Рендеринг и отображение SVG также медленнее, чем просто перетаскивание изображения с помощью PNG.
Матеин Улхак
1
@Littlemad Не нужно. Вы можете использовать обходной путь VML для IE <9, или вы можете предварительно отрендерить его на сервере, или даже использовать встраивание на основе флэш-памяти, которое отображает его в IE. Все браузеры (по крайней мере, основные) поддерживают SVG, только IE 6, 7 и 8 нам нравится. Так что просто используйте любой обходной путь, который не ужасен, если они видят худший сайт, это их вина. Это очень похоже на SDTV против HDTV или DVD против BluRay.
Камило Мартин
1
В 2014 году этот ответ, вероятно, должен быть в пользу SVG.
Ханна
1
2015 caniuse.com/#search=svg - в основном просто нет IE8
goodship11
18

Простой ответ здесь - использовать оба.

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

Если вы рассматриваете этот выбор для фото графики, выбора нет; PNG, вероятно, всегда будет лучше. Для графики, где SVG является жизнеспособным вариантом, SVG - лучший вариант с резервным вариантом PNG / JPEG. PNG имеет много преимуществ, но по масштабируемости и размеру файла он часто не будет соответствовать SVG.

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

Взвешивая их друг против друга, PNG, безусловно, будет поддерживаться большим количеством браузеров, чем SVG, на данный момент, но разрешения вновь выпущенных устройств постоянно растут, а это значит, что PNG придется обслуживать на основе большого разнообразия разрешений. (через Media Queries, JavaScript или User Agent Sniffing) или масштабируется браузерами, что может привести к некоторым несовершенным результатам.

Глядя на то, что мы знаем, будущее держит; всегда более высокие разрешения, более широкая поддержка и более широкое использование SVG в Интернете; имеет смысл строить для того, что будет.

В общем, веб-сайты должны быть построены так, чтобы работать в течение многих лет; через 5 лет ваш прекрасно обратно совместимый веб-сайт может выглядеть потрясающе для 2% интернет-пользователей, все еще использующих старые браузеры, но довольно скудных в современных браузерах с сумасшедшими разрешениями - так что это очень большой набор трудных решений о том, какой путь компромисс.

Ваши варианты в ноябре 2014

  1. Только PNG

    • Ради качества вам нужно будет обслуживать как минимум пять разных версий в зависимости от размеров экрана и разрешения - и это очень консервативное предположение, вы можете получить 10-15 версий одного и того же изображения, если хотите быть предельно тщательным , Это также занимает некоторое время для реализации.

    • Если вы решили обслуживать один графический объект и масштабировать его в браузере, результаты, вероятно, будут менее чем идеальными и даже могут быть некрасивыми в зависимости от степени масштабирования.

    • Большое количество медиа-запросов может излишне раздуть CSS и негативно повлиять на скорость загрузки страниц.

    • Отлично будет смотреться на старых браузерах и устройствах, но не так здорово на новых.

  2. SVG с одним резервным PNG / JPEG / GIF

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

    • Если вы пойдете на компромисс и согласитесь с тем, что пользователи устаревших браузеров могут жить с несовершенно масштабированной графикой, вам потребуется только одна другая версия каждого файла в формате PNG, JPEG или GIF.

    • Это займет примерно столько же времени, что и в случае с медиа-запросами только в формате PNG - возможно, даже меньше, а это, вероятно, будет примерно такой же ценой.

    • Будет отлично смотреться на всех новых устройствах, с жертвами, сделанными на старых технологиях.

  3. SVG с несколькими запасными вариантами PNG / JPEG / GIF в зависимости от разрешения и размера экрана

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

    • Это, вероятно, займет столько же времени, сколько 1 и 2 вместе, плюс немного больше для проработки изломов.

    • Будет выглядеть потрясающе практически на каждом устройстве.

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

Дом
источник
1
Вы могли бы упомянуть кое-что об <picture>элементе, помогающем с различными размерами изображения
Zach Saucier
15

SVG является масштабируемым, если у вас есть векторная графика, которая является явным преимуществом. Для пиксельной графики PNG лучше. Недостатком является то, что Internet Explorer поддерживает SVG только в следующей версии 9 (ранее с плагином). Мобильные браузеры также могут иметь ограниченную поддержку SVG.

РЕДАКТИРОВАТЬ : Как отмечает ClemDesm, старые версии IE не поддерживают полностью прозрачный PNG, так как поддерживается IE8. Непрозрачные PNG работают нормально. Ответ Computerish предлагает отличное решение для обработки векторных изображений: сохраняйте их в формате SVG, но экспортируйте их для веб-сайтов в формате PNG. Я полностью согласен с этим решением.

Mnementh
источник
-1 Svg это все еще не поддерживается во всем мире, я бы не предложил использовать, если вы не объясните четко, где работает и альтернативный вариант в случае, если он не работает (скорее всего). Мы должны учитывать веб-стандарты, которых мы пытаемся достичь. Если выбор для веб и для PNG или SVG, он всегда должен быть PNG, пока SVG не будет глобально поддерживаться браузерами одного поколения старше. Я хотел бы использовать SVG совершенство, но это еще не реальность.
Littlemad
Как я уже писал, IE не поддерживает SVG (только в будущей версии 9), и мобильный браузер также может не иметь поддержки.
Мнемент
@Littlemad: понижение рейтинга немного преувеличено, поскольку 1 - ответ говорит нам, что он не полностью поддерживается (хорошо, не так много подробностей, но, тем не менее, он рассказан и не ошибается, не заслуживает -1) 2- PNG альфа-канал тоже не поддерживается в IE6 & 7 и ни слова об этом? :)
Шикирю
@ClemDesm: О, хороший совет, старые IE не поддерживают полностью прозрачные PNG.
Мнемент
1
@Littlemad "не поддерживается во многих современных браузерах". Это неверный вывод, поскольку в связанной ссылке есть только один браузер, который не способен обрабатывать SVG (IE8). Вам также не нужно устанавливать плагины для использования SVG (никогда не видел этого, может быть, в IE6). То, что вы видите красным на связанной ссылке, это части SVG, которые вы в основном не будете использовать (в основном, какие-то фильтры или другие эффекты). Основы работ.
Feeela
5

Определенно используйте PNG для веб-сайта. SVG просто недостаточно широко поддерживается, и у него мало (если есть) значительных преимуществ по сравнению с PNG для упрощенного экспорта. Тем не менее, храните все свои рабочие копии в SVG.

Computerish
источник
1
Хорошее решение сохранить оригинал в формате SVG и экспортировать его в формат PNG для Интернета. Если позже SVG лучше поддерживается, вы можете изменить его. Я бы порекомендовал это решение для векторных изображений.
Мнемент
2
«у него мало (если есть) значительных преимуществ по сравнению с PNG» Что? Как вы управляете PNG с помощью CSS или JavaScript? Как вы масштабируете их, не теряя разрешения? Как вы связываете части изображения (например, ссылку на страну на карте)? SVG-файлы обычно также намного меньше PNG (за исключением крошечных значков).
Feeela
3
SVG имеет много преимуществ перед PNG для векторных иллюстраций.
DA01
0

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

Я надеюсь, что ответил на ваш вопрос :)

Nicolos
источник
"занять больше места и усложнить"? Как же так?
DA01
1
Я уверен, что это может повлиять на ваш SEO, так как ваши изображения могут не отображаться в Google, и я не уверен на 100%, но часто бывает так, что загрузка
SVG
2
Время загрузки зависит от размера файла, из которого SVG часто может быть намного меньше. И если поиск картинок в Google важен для SEO ваших сайтов, да, PNG может быть лучше, но я думаю, что это больше нишевая вещь.
DA01
1
Да, я имею в виду, в конце дня нет правильного или неправильного ответа. Размер файла во многом зависит от сложности вашего изображения, и да, ваш выбор зависит от варианта использования. Я просто констатировал плюсы и минусы разных типов файлов :)
nicolos
-1

Несмотря на то, что SVG не принят во всем мире, и у некоторых людей есть разочаровывающее масштабирование времени в формате PNG, я всегда обнаруживал, что создание значка в Adobe Illustrator лучше всего работает при увеличении или уменьшении «разумного» количества.

stancil21
источник
Разрешает ли Adobe Illustrator использовать pngs, svg или оба, или какова причина, по которой название Illustrator здесь есть? И как вы думаете, почему svg не принят глобально?
Mensch