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

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

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

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

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

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

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

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

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

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

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

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

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

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

JPEG - Lossy / Direct

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

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

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

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

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

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

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, который отличается от всего вышеперечисленного тем, что это векторный формат файла (все вышеупомянутые растровые ). Это означает, что он на самом деле состоит из линий и кривых, а не пикселей. Когда вы увеличиваете векторное изображение, вы все равно видите кривую или линию. При увеличении растрового изображения вы увидите пиксели.

Например:

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

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

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

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

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

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

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

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

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

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

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

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

JPG:

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

PNG:

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

GIF:

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

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

Простой гид:

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