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

StackOverflow https://stackoverflow.com/questions/392635

  •  23-08-2019
  •  | 
  •  

Вопрос

При разработке веб-сайта какой формат изображения, по вашему мнению, лучше всего использовать для конкретной задачи?

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

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

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

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

[ОБНОВЛЯТЬ]

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

Это было полезно?

Решение

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

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

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

В итоге:

  • Фотографии → jpg
  • !Фотографии → png

Другие советы

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

Во-первых, существует два типа сжатия: без потерь и с потерями.

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

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

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

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

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

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

BMP vs 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, сохраняя при этом их прозрачность.Один из методов PNGКоличество, другой – сохранить файлы с помощью Фейерверк.

PNG-24 - Без потерь/Прямой

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top