Встраивание изображений 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...);
}
Источник

3 ответа

Решение

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

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

http://caniuse.com/

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/ На основе хрома, например хром
  • Трезубец
    • Internet Explorer 8: Microsoft ограничила свою поддержку определенным "не навигационным" содержимым по соображениям безопасности, включая опасения, что JavaScript, встроенный в URI данных, может не интерпретироваться фильтрами сценариев, такими как те, которые используются почтовыми веб-клиентами. URI данных должны быть меньше 32 КиБ в Версии 8[3].
    • URI данных поддерживаются только для следующих элементов и / или атрибутов [4]:
      • объект (только изображения)
      • 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

Источник

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

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

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

Источник

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

Источник

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

echo "data:image/jpeg;base64,"$(cat file.jpg | base64)
Источник
Другие вопросы по тегам