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

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

Ответы (6)

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

Тот факт, что вы назвали 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 вместе взятые, плюс немного больше для проработки перегибов.

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

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

Вы могли бы упомянуть что-то об <picture>элементе, помогающем с различными размерами изображений .

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

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

-1 Svg по-прежнему не поддерживается глобально, я бы не советовал использовать, если вы не объясните четко, где работает, и альтернативный вариант на случай, если он не работает (скорее всего). Мы должны учитывать веб-стандарты, которых мы пытаемся достичь. Если выбор для Интернета и это для PNG или SVG, это всегда должен быть PNG, пока SVG не будет глобально поддерживаться браузерами на одно поколение старше. Я хотел бы использовать совершенство SVG, но это еще не реальность.
Как я уже писал, в IE нет поддержки SVG (только в будущей версии 9), да и в мобильном браузере тоже может отсутствовать поддержка.
@Littlemad: отрицательный голос немного преувеличен, поскольку 1- ответ говорит нам, что он не полностью поддерживается (хорошо, не так много деталей, но, тем не менее, это сказано и не неправильно, не заслуживает -1) 2- PNG альфа-канал не поддерживается в IE6 и 7, и ни слова об этом? :)
@ClemDesm: А, хороший совет, старые IE не полностью поддерживают прозрачные PNG.
(Я пытался убрать голосование против, я понимаю, что это было скорее личное мнение, которое не соответствует действительности, но теперь я могу голосовать только против или за. Извините) PNG плохо поддерживается только в IE6 и IE7, и это можно исправить с помощью правильного проприетарного CSS для IE или добавления поведения .htc. SVG не поддерживается во многих последних браузерах (ссылка: codedread.com/svg-support.php ), и иногда для визуализации требуется установка плагина со стороны клиента/пользователя, а не разработчика. Остаток для меня все еще зависит от PNG.
@Littlemad «не поддерживается во многих последних браузерах». Это кажется неправильным выводом, поскольку в связанной ссылке есть только один браузер, который не поддерживает SVG (IE8). Вам также не нужно устанавливать плагины для использования SVG (никогда не видел этого, может быть, в IE6). То, что вы видите красным в ссылке, является частью SVG, которую вы в основном не используете (в основном это какие-то фильтры или другие эффекты). Основы работают.
@feela поддержка показывает, что процент низкий. Не прошло и 7 месяцев с поста, а IE8 все еще с нами. Все, что вы можете сделать, это создать альтернативу для IE и одну для остальных. Какой смысл дублировать код для изображений (один для неподдерживающих и один для поддерживающих), если у вас нет действительно хорошего использования SVG, которое оправдывает дублирование, когда PNG достаточно хорош для обработки многих вещей?
Поддержку PNG в IE трудно классифицировать. IE7 полностью «поддерживает» PNG, но даже в IE8 есть ошибки, например, полупрозрачный PNG в сочетании с прозрачностью CSS.
@feeela: базовая поддержка браузеров — не единственная проблема. Браузеры интерпретируют такие вещи, как масштабирование и тому подобное, очень по-разному, и для некоторых браузеров вам лучше использовать теги img, а в некоторых — теги объектов. Но я уверен, что через несколько лет SVG можно будет использовать без проблем.

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

Для качества SVG лучше, но на практике единственным реальным решением является PNG, потому что SVG на данный момент глобально не поддерживается.
@Littlemad Рендеринг и отображение SVG также медленнее, чем просто копирование изображения с помощью PNG.
@muntoo Ну, изображение не просто битое. Его нужно распаковать, но это почти всегда быстрее, чем рендеринг SVG.
@Littlemad Ха, это напомнило мне, что та же проблема поднималась раньше ... С PNG и GIF.
@CamiloMartin не может дождаться, когда браузер будет иметь хорошую поддержку технологий намного быстрее, чем обычно. Я хочу использовать SVG, но я разочарован тем, что полагаюсь на немасштабируемый png для логотипов.
@Littlemad Тебе не обязательно. Вы можете использовать обходной путь VML для IE < 9, или вы можете предварительно отрендерить его на сервере, или даже использовать встроенную флэш-память, которая отрисовывает его в IE. Все браузеры (по крайней мере основные) поддерживают SVG, только IE 6, 7 и 8 у нас на х**. Так что просто используйте любой обходной путь, который не ужасен, если они увидят худший сайт, это их вина. Это очень похоже на SDTV против HDTV или DVD против BluRay.
В 2014 году этот ответ, вероятно, должен быть в пользу SVG.
2015 caniuse.com/#search=svg — просто без IE8

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

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

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

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

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

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

Разрешает ли Adobe Illustrator pngs, svg или оба, или по какой именно причине здесь называется Illustrator? И почему вы думаете, что svg не принят во всем мире?
В каком формате лучше сохранять изображения, предназначенные для веб-сайтов; PNG или SVG?
СпросиСетьПолитика конфиденциальности1y, 0v