Вложение Base64 изображений

Чисто из любопытства, в каких браузерах работает встраивание изображений 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...);
}

Ответы

Ответ 1

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

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

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

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

  • На основе Gecko, таких как Firefox, SeaMonkey, XeroBank, Camino, Fennec и K-Meleon
  • Konqueror через систему ввода/вывода KDE KIO
  • 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 данных, не может быть интерпретирован фильтрами script, такими как те, которые используются веб- почтовых клиентов. URI данных должны быть меньше 32 Kib в Версии 8 [3].
    • URI данных поддерживаются только для следующих элементов и/или атрибутов [4]:
      • объект (только изображения)
      • IMG
      • input type = image
      • ссылка
    • Объявления CSS, которые принимают URL-адрес, например фоновое изображение, фон, стиль списка, стиль списка и т.д.
    • Internet Explorer 9: Internet Explorer 9 не имеет ограничений по 32KiB и разрешен в более широких элементах.
    • TheWorld Browser: браузер оболочки IE, который имеет встроенную поддержку схемы URI данных.

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

Ответ 2

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

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

Отметьте параметр "Формат как данные" для форматирования в качестве URL-адреса данных.

Ответ 3

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

Ответ 4

Вам не нужен онлайн-инструмент для кодирования base64. Вместо этого вы можете использовать инструмент командной строки base64 в Linux или Mac OS X:

echo "data:image/jpeg;base64,"$(cat file.jpg | base64)