Форматы изображения на сайте: выбор правильного формата для правильной задачи

Ответ 1

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

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

PNG разрешает 8-битную прозрачность, но если вам нужно поддерживать IE, вы обнаружите, что они постоянно отказываются поддерживать это правильно. Насколько я знаю, они поддерживают один бит прозрачности в 8-битном изображении (по сути, такой же, как и gif). Есть также многочисленные хаки, чтобы получить 8-битную прозрачность для работы в IE. Я никогда не беспокоился, сам.

Вкратце:

• Фотографии → JPG
• ! Фотографии → PNG

Ответ 2

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

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

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

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

С индексированным это означает, что изображение может хранить только ограниченное количество цветов (обычно 256), которые выбраны автором изображения, с Прямой, это означает, что вы может хранить много тысяч цветов, которые не были выбраны автором.

BMP - Lossless/Indexed и Direct

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

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

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

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

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

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

JPEG - Lossy/Direct

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

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

PNG-8 - Lossless/Indexed

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!) Есть способы конвертировать 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 поддерживает альфа-прозрачность.

Я надеюсь, что это поможет!

Ответ 3

PNG следует использовать, когда:

• Вам нужна прозрачность (либо 1-битная, либо альфа-прозрачность).
• Сжатие без потерь будет работать хорошо (например, для диаграммы или логотипа или сгенерированного компьютером образа).

JPEG следует использовать, когда:

• Без потерь сжатие не будет работать (например, фотография)
• Требуется полный цвет.

GIF должен быть, когда:

• PNG недоступен, например, в очень старом программном обеспечении или браузерах.
• Анимация необходима

Несмотря на мифы об обратном, PNG превосходит GIF в большинстве аспектов. PNG способен к каждому режиму изображения GIF отдельно от анимации, и при использовании одного и того же режима изображения PNG будет иметь лучшее сжатие из-за его превосходного алгоритма DEFLATE по сравнению с LZW. PNG также может использовать дополнительные режимы, которые GIF не может выполнять, например, 24-битный цвет и альфа-прозрачность, но здесь вы можете столкнуться с проблемами в Интернете. Альфа-прозрачность имеет проблемы совместимости с IE6, которые хорошо документированы (хотя хаки существуют, чтобы обойти).

Режимы PNG включают (это всего лишь небольшое подмножество)

• Цвет палитры от 2 до 256 цветов (например, GIF)
• Цвет палитры от 2 до 256 цветов, с прозрачным цветом (например, GIF).
• Истинный цвет (24-битный цвет)
• Истинный цвет с альфа-каналом (24-битный цвет + 8-битная альфа-прозрачность)

Для лучшего сжатия в PNG для Интернета всегда используйте режим палитры. Если вы обнаружите, что файлы PNG больше, чем эквивалентные GIF файлы, вы сохраняете PNG в 24-битном цвете и GIF в режиме палитры (потому что GIF всегда находится в режиме палитры). Сначала попробуйте преобразовать в режим палитры.

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

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

Ответ 4

Попробуйте посмотреть этот сайт http://www.killersites.com/articles_2005/theory/imagesInWebPages.jsp

Они пытаются объяснить, что использовать, когда

Ответ 5

ФОРМАТ ФАЙЛА JPEG

• Отлично подходит для изображений, когда вам нужно сохранить размер небольшой
• Хороший вариант для фотографий
• Плохо для логотипов, линейного искусства и широких областей плоского цвета.

ФОРМАТ ФАЙЛА GIF

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

ФОРМАТ ФАЙЛОВ PNG

• Lossless
• Отличный выбор, когда прозрачность является обязательной.
• Хороший вариант для логотипов и линейного искусства
• Не поддерживается везде

Вы можете увидеть эту инфографику для более подробной информации, Типы файлов изображений: когда использовать JPEG, GIF и PNG

Ответ 6

Если вы храните или представляете большое количество изображений, новый Google WebP формат может быть достоин рассмотрения, поскольку он на 25% меньше PNG/JPG. Обратите внимание, что это не поддерживается всеми браузерами на данный момент. NB. Это вышло в 2010 году после публикации этого вопроса.