Вы должны знать о нескольких ключевых факторах ...
Во-первых, существует два типа сжатия: Lossless и Lossy .
- Без потерь означает, что изображение сделано меньше, но без ущерба для качества.
- Потеря означает, что изображение становится (даже) меньше, но в ущерб качеству. Если вы сохраняете изображение в формате с потерями снова и снова, качество изображения будет становиться все хуже и хуже.
Существуют также различные глубины цвета (палитры): Индексированный цвет и Прямой цвет .
- Индексированный означает, что изображение может хранить только ограниченное количество цветов (обычно 256), контролируемых автором, в так называемой Цветовой карте
- Прямой означает, что вы можете хранить множество тысяч цветов, которые не были выбраны автором напрямую
BMP - без потерь / индексированный и прямой
Это старый формат. Это без потерь (никакие данные изображения не теряются при сохранении), но также практически отсутствует сжатие, что означает сохранение, поскольку BMP приводит к ОЧЕНЬ большим размерам файлов. Он может иметь палитры Indexed и Direct, но это небольшое утешение. Размеры файлов настолько неоправданно велики, что никто никогда не использует этот формат.
Хорошо для: Ничего особенного. У BMP нет ничего превосходного или лучше других форматов.
GIF - без потерь / только индексированный
GIF использует сжатие без потерь, что означает, что вы можете сохранять изображение снова и снова и никогда не потерять какие-либо данные. Размеры файлов намного меньше, чем BMP, потому что на самом деле используется хорошее сжатие, но оно может хранить только индексированную палитру. Это означает, что для большинства случаев использования в файле может быть не более 256 различных цветов. Это звучит как довольно небольшое количество, и это так.
GIF-изображения также могут быть анимированными и иметь прозрачность.
Подходит для: логотипов, линейных рисунков и других простых изображений, которые должны быть маленькими. Действительно используется только для веб-сайтов.
JPEG - с потерями / прямой
Изображения JPEG были разработаны для того, чтобы сделать детальные фотографические изображения как можно меньше, удаляя информацию, которую человеческий глаз не заметит. В результате это формат с потерями, и сохранение одного и того же файла снова и снова приведет к потере большего количества данных с течением времени. Он имеет палитру тысяч цветов и поэтому отлично подходит для фотографий, но сжатие с потерями означает, что это плохо для логотипов и штриховых рисунков: они не только будут выглядеть нечеткими, но и такие изображения будут иметь больший размер файла по сравнению с GIF-файлами!
Хорошо для: Фотографии. Также градиенты.
PNG-8 - без потерь / индексированный
PNG - более новый формат, а PNG-8 (индексированная версия PNG) действительно является хорошей заменой GIF-файлам. К сожалению, однако, у него есть несколько недостатков: во-первых, он не может поддерживать анимацию, как GIF (может, но может, но только Firefox поддерживает ее, в отличие от GIF-анимации, поддерживаемой каждым браузером). Во-вторых, у него есть проблемы с поддержкой старых браузеров, таких как IE6. В-третьих, важные программы, такие как Photoshop, имеют очень плохую реализацию формата. (Черт возьми, Adobe!) PNG-8 может хранить только 256 цветов, например GIF.
Хорошо: главное, что PNG-8 работает лучше, чем 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 - без потерь / вектор
Тип файла, который в настоящее время становится все более популярным, - это SVG, который отличается от всех вышеперечисленных тем, что это векторный формат файла (все вышеупомянутые растр ). Это означает, что он на самом деле состоит из линий и кривых, а не пикселей. Когда вы увеличиваете векторное изображение, вы все равно видите кривую или линию. При увеличении растрового изображения вы увидите пиксели.
Например:
Это означает, что SVG идеально подходит для логотипов и иконок, которые вы хотите сохранить резкость на экранах Retina или разных размеров. Это также означает, что маленький логотип SVG можно использовать в гораздо большем (большем) размере без ухудшения качества изображения - что потребует отдельного более крупного (с точки зрения размера файла) файла с растровыми форматами.
Размеры файлов SVG часто крошечные, даже если они визуально очень большие, и это здорово. Однако стоит помнить, что это зависит от сложности используемых форм. SVG требует большей вычислительной мощности, чем растровые изображения, потому что математические вычисления участвуют в построении кривых и линий. Если ваш логотип особенно сложен, он может замедлить работу компьютера пользователя и даже иметь очень большой размер файла. Важно максимально упростить ваши векторные фигуры.
Кроме того, файлы SVG пишутся в формате XML, поэтому их можно открывать и редактировать в текстовом редакторе (!). Это означает, что его значения можно манипулировать на лету. Например, вы можете использовать JavaScript, чтобы изменить цвет значка SVG на веб-сайте, так же, как и текст (например, не нужно второе изображение), или даже анимировать их.
В целом они лучше всего подходят для простых плоских фигур, таких как логотипы или графики.
Надеюсь, это поможет!