Использование изображений PNG на веб-сайтах - PullRequest
14 голосов
/ 28 февраля 2010

Можно ли использовать изображения PNG на веб-сайте? Я действительно не видел, чтобы они использовали так много, поэтому задавался вопросом, каковы недостатки. Должны быть такие, которые наверняка все будут использовать? ...

Они, например, совместимы с MSIE и Chrome и т. Д. *

Ответы [ 8 ]

13 голосов
/ 28 февраля 2010

IE 6 будет отображать GIF-прозрачность только в изображениях PNG, если вы не используете фильтры.
Для получения более подробной информации см. здесь

Кроме того, они отлично работают, и теперь они становятся все более популярными.

7 голосов
/ 28 февраля 2010

Вот несколько корпоративных сайтов Fortune 500, которые внедряют PNG на своей главной странице:

  • microsoft.com
  • apple.com
  • google.com (логотип Google представляет собой PNG)
  • hp.com (на самом деле они используют IEPNGFIX от twinhelix и прозрачные PNG)

на самом деле единственным, кого я не нашел (я посмотрел только около 10), был Siemens.com

4 голосов
/ 28 февраля 2010

В наши дни их можно использовать очень хорошо.Старые версии IE (6.0 и более ранние) не поддерживали все режимы прозрачности, что было главной причиной, по которой люди избегали форматирования.В других браузерах, таких как Firefox, Chrome, Opera, Konqueror или Links, таких проблем не было.

3 голосов
/ 01 марта 2010

Да, это нормально - использовать pngs, но есть некоторые вещи, на которые стоит обратить внимание.

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

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

  • Mac OS X отображает png-файлы с сохраненной гамма-коррекцией. Возможно, вам придется удалить его. Я использую pngcrush.

  • В некоторых браузерах вложенные полупрозрачные поверхности могут быть очень медленными.

2 голосов
/ 28 февраля 2010

И давайте не будем забывать, что логотип Stack Overflow - это PNG, еще одна причина использовать его!

2 голосов
/ 28 февраля 2010

PNG фактически ОЧЕНЬ часто используются сегодня. Немногие сайты без по крайней мере нескольких PNG. И их тоже не стоит бояться. Единственная проблема - с IE6, которая также имеет два возможных решения:

  • Фильтр DirectX. Просто гуглите, в сети полно этого. Он работает без каких-либо изменений в файле PNG, но есть несколько GOTCHA - подобные прозрачные области также будут прозрачными для пользовательского ввода (щелчка), и вы не можете объединить его с другим фоновым изображением.
  • Установка цвета фона для PNG. Это не требует специального кодирования на веб-странице, но это не всегда уместно. Идея состоит в том, что файл PNG может указывать цвет фона по умолчанию, и IE6 учитывает это. Поскольку довольно часто PNG отображаются на сплошном или почти сплошном фоне, это работает на удивление хорошо. Используйте утилиту TweakPNG для установки фона.
2 голосов
/ 28 февраля 2010

Файлы PNG сегодня становятся стандартом, особенно потому, что PNG - это открытый формат, разработанный специально для Интернета. W3C рекомендует использовать PNG для веб-сайтов, поскольку использование PNG позволяет создавать более компактные файлы при работе с графикой, логотипами и т. Д. PNG - это формат сжатия без потерь.

Хотя PNG является единственным форматом, позволяющим использовать прозрачность, вы можете использовать JPG (в основном это формат сжатия с потерями) для больших изображений.

И угадайте что? Даже Google использует изображение png для своего логотипа олимпийских игр.

1 голос
/ 01 марта 2010

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...