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

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

  •  05-07-2019
  •  | 
  •  

Вопрос

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

Решение

Обновить:2017-01-10

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

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

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

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

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

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

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

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

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

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

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