JPEG по сравнению с PNG по сравнению с BMP по сравнению с GIF по сравнению с SVG

В xkcd разрабатывают из lbrandy.com:

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

• JPEG: до 24-разрядного цвета (возможно больше?), переменная (обычно высоко) сжатие, с потерями, никакая альфа-поддержка
• PNG: до 48-разрядного цвета модерируйте сжатие, без потерь, альфа-поддержка
• BMP: до 24-разрядного цвета, очень небольшого сжатия, без потерь, альфа-поддержка
• GIF: до 8-разрядного цвета, небольшого сжатия, поддержки прозрачности без потерь, поддержки анимации

Глубина цвета

• 8-разрядный цвет == 256 цветов
• 24-разрядный цвет == 16 777 216 цветов
• 48-разрядный цвет == 281,474,976,710,656 цветов

Большинство компьютерных мониторов выполняется в 24-разрядной глубине цвета. Человеческий глаз может различать о который много цветов. Дополнительная глубина цвета состоит в том, чтобы главным образом смочь сохранить информацию от датчика так, чтобы управление фотографией имело больше данных для работы с. Попытка представить фотографию в 8-разрядном цвете собирается привести к зернистости.

Сжатие

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

Альфа/Прозрачность

Альфа относится к прозрачности, но она подразумевает, что существует больше чем один уровень прозрачности. GIF имеет способность определить прозрачные пиксели, но это или непрозрачно или на 100% прозрачно, и "прозрачный" привыкает как один из 256 цветов. PNG и BMP имеют способность отметить каждый пиксель как непрозрачный, прозрачный, или частично прозрачный, как кусок цветного стекла. Обычно, существует 256 уровней прозрачности, хотя PNG может на самом деле иметь до 65 536 уровней. JPEG не имеет никакой поддержки прозрачности.

Анимация

Эффективно, этих форматов, только GIF имеет любую поддержку анимации. Существуют спецификации для анимации с PNG (MNG, APNG) и JPEG (MJPEG), но они широко не поддерживаются. (APNG работает в последних версиях Firefox и Opera.) На практике, большинство анимаций, которые Вы видите на веб-страницах, реализовано в Flash.

Простой гуид:

• Для фотографий используйте:
  • Определенные для камеры форматы .raw, если Вы имеете профессиональное оборудование и хотите сделать большую последующую обработку
  • JPEG иначе (для публикации фотографий в сети, необходимо будет преобразовать форматы .raw в JPEG также),
• Для чего-либо с резким краем, тонкими гранями и немногими цветами (такими как снимки экрана или логотипы) использование:
  • GIF, если Вы делаете веб-страницу, которая должна поддерживать очень старые браузеры (IE 6 главным образом), или если Вы хотите сделать простые анимации
  • PNG иначе
• Нет никакого серьезного основания использовать BMP, если определенная программа не принимает другие форматы.

• Используйте GIF, если изображение имеет немного цветов (как значки). Может также использоваться для изображений с анимацией (как баннеры рекламы).
• Используйте JPG, если изображение имеет много цветов (как фотографии). JPEG является тем же самым.
• Используйте BMP, если Вы хотите сохранить образ без сжатия. Намного больший размер файла!
• Используйте PNG, если Вы хотите опубликовать изображение в сети и быть актуальными по современным стандартам. Профессионалы: Подходящий как современная замена и для GIF и для JPG, и открытый стандарт и позволяет прозрачность. Недостатки: Не поддерживаемый более старым программным обеспечением и размером файла может быть больше, чем сопоставимый GIF или JPG.

BMP использует или необработанные биты с маленьким заголовком или Кодирование по длинам серий. JPEG использует Дискретное косинусное преобразование. Посмотрите блок в нижних частях статей Wikipedia для других алгоритмов сжатия/кодирования.

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

Во-первых, существует два типа сжатия: Безубыточное и Убыточное .

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

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

• Индексированный означает, что изображение может хранить только ограниченное количество цветов (обычно 256), контролируемых автором, в чем-то, что называется цветовой картой
• Прямой означает, что вы можете хранить много тысяч цветов, которые не были непосредственно выбраны автором

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

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

Хорошо: На самом деле ничего. Нет ничего лучше, чем BMP, или лучше, чем другие форматы.

GIF - В GIF без потерь / только с индексацией

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

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

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

JPEG - Изображения в формате Lossy / Direct

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

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

PNG-8 - Без потерь/индексированный

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

Хорошо: Главное, что PNG-8 работает лучше, чем GIF, - это поддержка Alpha Transparency.

Важное замечание: Photoshop не поддерживает Alpha Transparency для файлов PNG-8. (Будь ты проклят, Photoshop!) Есть способы конвертировать Photoshop PNG-24 в PNG-8 файлы, сохраняя при этом их прозрачность. Один способ - PNGQuant, другой - сохранение файлов с помощью Fireworks.

PNG-24 - Lossless / Direct

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

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

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

SVG - Безубыточная / Векторная

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

Например:

Это означает, что SVG идеально подходит для логотипов и иконок, которые вы хотите сохранить резкость на экранах Retina или разных размеров.

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

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