Форматы изображений на сайте: выбор правильного формата для правильной задачи - PullRequest
44 голосов
/ 25 декабря 2008

Какой дизайн изображения вы считаете лучшим при разработке веб-сайта для конкретной задачи?

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

Например, на веб-сайте Amazon они используют .jpg для изображений продуктов ( Пример ), .gif для этого прозрачного пикселя ( Пример ) и .png для их CSS-спрайтов ( Пример )

С другой стороны, Play.com использует .gif для логотипа своего сайта ( Пример ), но использует .jpg для продуктов своего веб-сайта (например, Amazon) ( Пример ) и что касается их главной страницы, на них нет .png s.

Итак, какие форматы я должен использовать для своих сайтов? и зачем мне их использовать?

[UPDATE]

Спасибо CruellO за эту ссылку за объяснение различий, а также Дастин за объяснение причин использования.

Ответы [ 6 ]

71 голосов
/ 08 мая 2013

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

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

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

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

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


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

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

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

BMP vs GIF


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

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

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

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

GIF vs JPEG


JPEG - с потерями / прямой

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

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

JPEG vs GIF


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

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

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

PNG-8 vs 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 также поддерживает альфа-прозрачность.

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

49 голосов
/ 25 декабря 2008

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

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

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

В итоге:

  • Фотографии & rarr; JPG
  • ! Фотографии & rarr; PNG
13 голосов
/ 04 марта 2009

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

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

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

  • Сжатие без потерь не будет хорошо работать (например, фотография)
  • Необходим полный цвет

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

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

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

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

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

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

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

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

4 голосов
/ 25 декабря 2008

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

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

1 голос
/ 24 марта 2016

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

0 голосов
/ 11 декабря 2014

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

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

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

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

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

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

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

...