Встраивание изображений Base64

Question

Чисто из любопытства, в каких браузерах работает встраивание изображений Base64? Я имею в виду это .

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

Некоторые примеры:

HTML:

<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />

CSS:

div.image {
  width:100px;
  height:100px;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}

Answer 1

Обновление: 2017-01-10

URI данных теперь поддерживаются всеми основными браузерами. IE поддерживает встраивание изображений начиная с версии 8.

http://caniuse.com/#feat=datauri

---

URI данных теперь поддерживаются следующими веб-браузерами:

• На основе Gecko, таких как Firefox, SeaMonkey, XeroBank, Camino, Fennec и K-Meleon
• Konqueror, через систему ввода / вывода KDE KIO Slaves
• Opera (включая такие устройства, как Nintendo DSi или Wii)
• На основе WebKit, таких как Safari (в том числе для iOS), браузер Android, Epiphany и Midori (WebKit является производным от движка Konqueror KHTML, но Mac OS X не разделяет архитектуру KIO, поэтому реализации различаются), так как а также на основе Webkit / Chromium, например, Chrome
• Trident
  • Internet Explorer 8: Microsoft ограничила свою поддержку определенным «не навигационным» контентом по соображениям безопасности, включая опасения, что JavaScript, встроенный в URI данных, может не интерпретироваться фильтрами сценариев, такими как те, которые используются почтовыми веб-клиентами , URI данных должны быть меньше 32 КиБ в Версии 8 [3].
  • URI данных поддерживаются только для следующих элементов и / или атрибутов [4]:
    • объект (только изображения)
    • 1031 * IMG *
    • тип ввода = изображение
    • ссылка
  • CSS-объявления, которые принимают URL, такие как background-image, background, list-style-type, list-style и подобные.
  • Internet Explorer 9: Internet Explorer 9 не имеет ограничения 32 КБ и допускается в более широких элементах.
  • TheWorld Browser: браузер оболочки IE со встроенной поддержкой схемы URI данных

http://en.wikipedia.org/wiki/Data_URI_scheme#Web_browser_support

Answer 2

Большинство современных настольных браузеров, таких как Chrome, Mozilla и Internet Explorer, поддерживают изображения, закодированные как URL-адрес данных. Но есть проблемы с отображением URL-адресов данных в некоторых мобильных браузерах: Android Stock Browser и Dolphin Browser не отображают встроенные JPEG .

Я рекомендую вам использовать следующие инструменты для онлайн-кодирования / декодирования base64:

• Кодирование в формат Base64

• Декодирование из формата Base64

Установите флажок «Форматировать как URL-адрес данных», чтобы форматировать как URL-адрес данных.

Answer 3

Могу ли я использовать (http://caniuse.com/#feat=datauri) показывает поддержку в основных браузерах с несколькими проблемами в IE.