it-swarm.com.ru

Каковы различные варианты использования PNG против GIF против JPEG против SVG?

Когда следует использовать определенные типы файлов изображений при создании веб-сайтов или интерфейсов и т.д.?

Каковы их сильные и слабые стороны?

Я знаю, что PNG & GIF без потерь, а JPEG с потерями.
Но в чем главное отличие PNG и GIF?
Почему я должен предпочесть один другому? Что такое SVG и когда мне его использовать?

Если вас не волнует каждый пиксель, следует ли вам всегда использовать JPEG, поскольку он самый светлый?

540
Faruz

Вы должны знать о нескольких ключевых факторах ... 

Во-первых, существует два типа сжатия: без потерь и с потерями

  • Lossless означает, что изображение сделано меньше, но без ущерба для качества. 
  • Lossy означает, что изображение становится (даже) меньше, но в ущерб качеству. Если вы сохраняете изображение в формате с потерями снова и снова, качество изображения будет становиться все хуже и хуже.

Существуют также разные глубины цвета (палитры): индексированный цвет и прямой цвет

  • Indexed означает, что изображение может хранить только ограниченное количество цветов (обычно 256), контролируемых автором, в так называемой Цветовой карте
  • Direct означает, что вы можете хранить множество тысяч цветов, которые не были выбраны автором напрямую.

BMP - без потерь/проиндексированный и прямой 

Это старый формат. Это без потерь (никакие данные изображения не теряются при сохранении), но также практически отсутствует сжатие, что означает сохранение, поскольку BMP приводит к ОЧЕНЬ большим размерам файлов. Он может иметь палитры как Indexed, так и Direct, но это небольшое утешение. Размеры файлов настолько неоправданно велики, что никто никогда не использует этот формат.

Хорошо для: ничего особенного. BMP нет ничего превосходного в других форматах.

BMP vs GIF


GIF - без потерь/только индексированные 

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

GIF-изображения также могут быть анимированными и иметь прозрачность.

Хорошо для: логотипы, линейные рисунки и другие простые изображения, которые должны быть маленькими. Действительно используется только для веб-сайтов.

GIF vs JPEG


JPEG - Lossy/Direct 

Изображения JPEG были разработаны для того, чтобы сделать детальные фотографические изображения как можно меньше, удаляя информацию, которую человеческий глаз не заметит. В результате это формат с потерями, и сохранение одного и того же файла снова и снова приведет к потере большего количества данных с течением времени. Он имеет палитру тысяч цветов и поэтому отлично подходит для фотографий, но сжатие с потерями означает, что это плохо для логотипов и штриховых рисунков: они не только будут выглядеть нечеткими, но и такие изображения будут иметь больший размер файла по сравнению с GIF-файлами!

Хорошо для: Фотографии. Также градиенты.

JPEG vs GIF


PNG-8 - Без потерь/Индексируется 

PNG является более новым форматом, а PNG-8 (индексированная версия PNG) действительно является хорошей заменой GIF-файлам. К сожалению, однако, у него есть несколько недостатков: во-первых, он не может поддерживать анимацию, как GIF (может, но может, но только Firefox поддерживает ее, в отличие от GIF-анимации, которая поддерживается каждым браузером). Во-вторых, у него есть проблемы с поддержкой старых браузеров, таких как IE6. В-третьих, важные программы, такие как Photoshop, имеют очень плохую реализацию формата. (Черт возьми, Adobe!) PNG-8 может хранить только 256 цветов, как GIF-файлы.

Хорошо: главное, что PNG-8 работает лучше, чем GIF, - это поддержка альфа-прозрачности.

PNG-8 vs GIF


PNG-24 - Без потерь/Прямой

PNG-24 - отличный формат, который сочетает в себе кодирование без потерь и прямой цвет (тысячи цветов, как в JPEG). Это очень похоже на BMP в этом отношении, за исключением того, что PNG фактически сжимает изображения, так что это приводит к гораздо меньшим файлам. К сожалению, файлы PNG-24 по-прежнему будут больше, чем JPEG (для фотографий) и GIF/PNG-8 (для логотипов и графики), поэтому вам все еще нужно подумать, действительно ли вы хотите их использовать.

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

Как и PNG-8, PNG-24 также поддерживает альфа-прозрачность.


SVG - Lossless/Vector

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

Например:

PNG vs SVG

SVG vs PNG

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

Кроме того, файлы SVG пишутся в формате XML, поэтому их можно открывать и редактировать в текстовом редакторе (!). Это означает, что его значениями можно управлять на лету. Например, вы можете использовать JavaScript, чтобы изменить цвет значка SVG на веб-сайте, так же, как если бы вы использовали какой-то текст (т.е. не нужно второе изображение), или даже анимировать их.

В целом, они лучше всего подходят для простых плоских форм, таких как логотипы или графики.

Надеюсь, это поможет!.

I hope that helps!

1338
Chuck Le Butt

JPEG не самый легкий для всех видов изображений (или даже для большинства). Углы и прямые линии и простые «заливки» (блоки сплошного цвета) будут выглядеть размытыми или иметь артефакты в них в зависимости от уровня сжатия. Это формат с потерями, и он лучше всего подходит для фотографий, где вы не можете четко видеть артефакты. Прямые линии (такие как рисунки, комиксы и т.д.) Очень хорошо сжимаются в формате PNG, и это без потерь. GIF следует использовать только тогда, когда вы хотите, чтобы прозрачность работала в IE6, или если вы хотите анимацию. GIF поддерживает только 256 цветов палитры, но также без потерь.

Таким образом, в основном вот способ определить формат изображения:

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

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

47
Earlz

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

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

GIF-файлы можно использовать для небольших анимаций и видеороликов с низким разрешением.

Ввиду общего ограничения палитры изображений GIF 256 цветами, он обычно не используется в качестве формата для цифровой фотографии. Цифровые фотографы используют форматы файлов изображений, способные воспроизводить более широкий диапазон цветов, такие как TIFF, RAW или JPEG с потерями, которые больше подходят для сжатия фотографий.

Формат PNG является популярной альтернативой изображениям GIF, так как он использует лучшие методы сжатия и не имеет ограничения в 256 цветов, но PNG не поддерживают анимацию. Форматы MNG и APNG, оба получены из PNG, поддерживают анимацию, но широко не используются.

7
David Bridges

JPEG будет иметь плохое качество по острым краям и т.д., И по этой причине он не подходит для большинства веб-графики. Превосходно на фотографиях.

По сравнению с GIF, PNG предлагает лучшее сжатие, большую палитру и больше функций, включая прозрачность. И это без потерь.

5
Konrad Garus

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

JPEG имеет лучшее сжатие со сложными изображениями, такими как фотографии.

5
Desintegr

pNG имеет более широкий цветовой палитры, чем GIF и GIF является надлежащим, в то время как PNG нет. GIF может делать анимацию, что не может нормальный PNG. png-прозрачность поддерживается только браузером, выпущенным сравнительно недавно, чем IE6, но для этой проблемы есть исправление Javascript. Оба поддерживают альфа-прозрачность. В общем, я бы сказал, что вы должны использовать png для большинства веб-графики, в то время как jpeg для фотографий, снимков экрана или подобного, потому что сжатие png не слишком хорошо работает на Thoose.

3
HalloDu

GIF основан на палитре из 256 цветов на изображение (по крайней мере, в его базовом воплощении). PNG может делать «TrueColour», т.е. 16,7 миллионов цветов из коробки. PNG без потерь сжимает лучше, чем GIF без потерь. GIF может делать «двоичную» прозрачность (непрозрачность 0% или непрозрачность 100%). PNG может обрабатывать альфа-пленки. 

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

3
Pekka 웃

Существует способ, позволяющий использовать изображения в формате GIF для отображения истинного цвета. Можно подготовить анимацию в формате GIF с 256 кадрами с цветовой палитрой с задержкой 0 кадров и настроить отображение анимации только один раз. Таким образом, все кадры могут быть показаны одновременно. В конце отображается изображение в цвете GIF.

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

3
MT San

Основное отличие заключается в том, что GIF запатентован и немного более широко поддерживается. PNG является открытой спецификацией, и альфа-прозрачность не поддерживается в IE6. Поддержка была улучшена в IE7, но не полностью исправлена.

Что касается размеров файлов, GIF имеет меньшую цветовую палитру по умолчанию, поэтому на первый взгляд они имеют меньший размер. PNG-файлы имеют более крупную палитру по умолчанию, однако вы можете уменьшить их цветную палитру, чтобы при их использовании размер файла был меньше, чем в GIF. Проблема снова заключается в том, что эта функция не поддерживается в Internet Explorer.

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

1
Dan Herbert

GIF имеет 8-битную (256 цветов) палитру, где PNG - до 24-битной цветовой палитры. Таким образом, PNG может поддерживать больше цвета и, конечно, алгоритм поддерживает сжатие

0
Abdul Munim

Если вы выбираете JPEG, и вы имеете дело с изображениями для веб-сайта, вы можете рассмотреть Google Guetzli Perceptual кодировщик, который находится в свободном доступе. По моему опыту, для фиксированного качества Guetzli производит файлы меньшего размера, чем стандартные библиотеки кодирования JPEG, сохраняя полную совместимость со стандартом JPEG (поэтому ваши изображения будут иметь такую ​​же совместимость, что и обычные изображения JPEG).

Единственным недостатком является то, что Гетцли тратит много времени на кодирование ... но это делается только один раз, когда вы готовите изображение для веб-сайта, а преимущества остаются навсегда! Загрузка изображений меньшего размера займет меньше времени, поэтому скорость вашего сайта будет увеличиваться при повседневном использовании.

0
Marco Fontani

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

Для фотографий 

jpg - по-прежнему самый широко поддерживаемый формат изображения.

webp - Новый формат от Google. Хороший потенциал, хотя браузер поддержка невелика.

Для иконок и графики

svg - по возможности. Он хорошо масштабируется на экранах сетчатки, редактируется в текстовых редакторах и настраивается через JS/CSS, если загружен в DOM.

png - если речь идет о растровой графике (т.е. при ее создании в фотошопе). Поддерживает прозрачность, которая очень важна в этом случае использования.

Для анимации

svg - плюс CSS анимации для векторной графики. Все преимущества SVG + сила CSS анимации.

gif - по-прежнему наиболее широко поддерживаемый формат анимированных изображений.

mp4 - если анимированные изображения на самом деле являются короткими видеоклипами. Twitter / WhatsApp конвертирует GIF-файлы в mp4.

apng - приличный браузер поддержка (т.е. нет IE, Edge), но его создание не так просто, как GIF.

webp - близок к использованию mp4. Плохо поддержка

Это хороший сравнение различных форматов анимированных изображений.

Наконец, какой бы ни был формат, обязательно оптимизируйте его - есть инструменты для каждого формата (например, SVGO, Guetzli, OptiPNG и т.д.), Которые могут сэкономить значительную пропускную способность.

0
aarjithn