JPEG против PNG против BMP против GIF против SVG

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

В чем разница между TIFF, GIF, JPG, JPEG, PNG и BMP файлом?

BMP – битмап. Вероятно, это был первый тип формата цифрового изображения, который я помню. Каждая фотография на компьютере казалась в те дни BMP. В Windows XP программа Paint автоматически сохраняет свои изображения в BMP. Однако в Windows Vista и более поздних изображениях теперь сохраняются в формате JPEG. BMP является базовой платформой для многих других типов файлов.

JPG / JPEG – (Joint Photographic Experts Group) Формат Jpeg используется для цветных фотографий или любых изображений со многими смесями или градиентами. Это не хорошо с острыми краями и имеет тенденцию немного размывать их, если они не хранятся при высоком качестве. Этот формат стал популярным благодаря изобретению цифровой камеры. Большинство, если не все, цифровые камеры загружают фотографии на ваш компьютер в виде файла Jpeg. Очевидно, производители цифровых фотоаппаратов видят ценность высококачественных изображений, которые в конечном итоге занимают меньше места.

GIF – (формат графического обмена) Формат Gif лучше всего использовать для текстовых, линейных рисунков, скриншотов, мультфильмов и анимаций. Gif ограничен общим количеством 256 цветов или меньше, поэтому изображения Gif относительно невелики. Он обычно используется для быстрой загрузки веб-страниц. Это также делает большой баннер или логотип для вашей веб-страницы. Анимированные изображения также могут быть сохранены в формате GIF в виде последовательности статических изображений. Например, мигающий баннер будет сохранен как файл Gif.

PNG – (Portable Networks Graphic) Эти форматы без потерь являются одним из лучших форматов изображений. Он не всегда совместим со всеми веб-браузерами или программным обеспечением для изображений, но в настоящее время это лучший формат изображения для веб-сайта. Я использую .png для логотипов и скриншотов. Одна из его самых удивительных способностей – сжимать изображения без потерь (без потери пикселей), хотя окончательный сжатый размер варьируется между редакторами изображений.

TIFF – (Tagged Image File Format) Этот формат файла не обновлялся с 1992 года и теперь принадлежит Adobe. Он может хранить изображение и данные (теги) в одном файле. TIFF может быть сжат, но скорее его способность хранить данные изображения в формате без потерь, что делает файл TIFF полезным архивом изображений, потому что, в отличие от стандартных файлов JPEG, может быть отредактирован TIFF-файл с использованием сжатия без потерь (или none) – без потери качества изображения. Этот файл обычно используется для сканирования, отправки факсов, обработки текстов и т. Д. Это больше не общий формат файлов для использования с вашими цифровыми фотографиями, так как jpeg отличное качество и занимает меньше места.

В стиле xkcd от lbrandy.com :

Alt text

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

Во-первых, есть два типа сжатия: Lossless и Lossy .

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

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

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

BMP – Lossless / Indexed and Direct

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

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

BMP против GIF


GIF – Без потерь / Только индексирование

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

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

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

GIF против JPEG


JPEG – Lossy / Direct

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

Хорошо для: Фотографии. Кроме того, градиенты.

JPEG против GIF


PNG-8 – без потерь / индексирование

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

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

PNG-8 против GIF

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


PNG-24 – Lossless / Direct

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

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

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


SVG – Без потерь / Вектор

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

Например:

PNG vs SVG

SVG против PNG

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

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

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

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

  • 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.

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

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


BMP:

  • Старый формат. Без потери данных.
  • Не сжимается – сохраняет значение каждого пикселя. Следовательно, изображения одинаковых размеров имеют одинаковый размер (килобайт / мегабайт). Например, 800 × 600 изображений BMP всегда 1.37 MiB, как популярные обои WinXP «Bliss».
  • Прозрачность / прозрачность не поддерживается
  • Не рекомендуется ни для чего

JPG:

  • Потеря компрессии.
  • Сумма потерь может быть установлена, например, при создании графического и сохранения в Photoshop.
  • Сохранение как более высокое качество означает меньшую потерю цветов / глубины и высокий размер файла, и наоборот.
  • Прозрачность / прозрачность не поддерживается
  • Рекомендуется для фотографий, а не для графики / значков

PNG:

  • Сжатие без потерь (да, лучшее из обоих слов / миров)
  • Поддерживает прозрачность и прозрачность, оба разные
  • Рекомендуется для статической графики / значков, а не для фотографий

GIF:

  • Поддержка прозрачности, но не прозрачности
  • Рекомендуется только для ANIMATED графики / значков
  • Возможно, движущиеся фотографии в кадрах в «Гарри Поттере» – это GIF: D

BMP использует либо необработанные биты с небольшим заголовком, либо кодирование длительной длины . JPEG использует дискретное косинусное преобразование . См. Блок в нижней части статей в Википедии для других алгоритмов сжатия / кодирования.

Простое руководство:

  • Для фотографий используйте:
    • Независимые от камеры форматы, если у вас есть профессиональное оборудование и вы хотите сделать много постобработки
    • JPEG в противном случае (для публикации фотографий в Интернете вам также необходимо преобразовать необработанные форматы в JPEG)
  • Для всего, что имеет острые края, тонкие линии и несколько цветов (например, скриншоты или логотипы), используйте:
    • GIF, если вы делаете веб-страницу, которая должна поддерживать очень старые браузеры (главным образом, IE 6), или если вы хотите делать простые анимации
    • PNG в противном случае
  • Нет веских оснований для использования BMP, если конкретная программа не принимает другие форматы.
  • Открытие * .svg с IE9 вызывает диалог «Открыть, Сохранить как»
  • Преобразование SVG в PNG с использованием C #
  • Способ преобразования canvasа HTML5 в SVG?
  • Мета-элемент IE11 Перерывы SVG
  • Круговой рисунок с дуговой дорожкой SVG
  • Как использовать маркеры SVG в API Карт Google v3
  • семантическое масштабирование диаграммы направленности силы в d3
  • Преобразование SVG в PDF
  • Преобразование из EPS в формат SVG
  • Оттенок SVG отключен
  • Доступность: рекомендуемое соглашение об альт-тексте для SVG и MathML?
  • Interesting Posts

    Использование STL-карты указателей функций

    Как пропустить обратные вызовы ActiveRecord?

    Что представляет собой значок Windows 8 в качестве значка прямоугольника в строке заголовка?

    Android getMeasuredHeight возвращает неправильные значения!

    Как принудительно удалить заблокированный файл, который не имеет блокировки в Windows?

    Могу ли я перебирать все электронные письма Outlook в папку, включая подпапки?

    Как обновить PostgreSQL с версии 9.6 до версии 10.1 без потери данных?

    Hadoop java.io.IOException: Mkdirs не удалось создать / some / path

    Docker – способ предоставить доступ к USB-порту или последовательному устройству?

    Класс PHPExcel не найден в Zend Autoloader

    Как настроить Windows 7 для потоковой передачи медиафайлов на PS3?

    C ++ содержит весь язык C?

    Почему в нашем проекте требуются интерфейсные слои / абстрактные classы?

    Вращение формы по вертикали вокруг оси x

    Производительность HashSet и списков

    Давайте будем гением компьютера.