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

564

Чисто из любопытства, в каких браузерах работает встраивание изображений 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...);
}
html base64 browser С Пангборн
источник
3
почему бы не настроить страницу с примерами, мы все пройдем и проведем реальное тестирование и сообщим об этом здесь
Нир Леви
4
64 бита занимает всего 6 символов 2 ^ 6. Текстовая строка будет содержать как минимум 8 бит на символ в зависимости от типа кодировки. Вы теряете по крайней мере 25% эффективности .... мой быстрый тест показал около 30% потерь.
4
Что еще более важно, вы, вероятно, потеряете способность эффективно кэшировать ваши вещи.
Hut8
6
@BrianHaak "потрясающе" ничего не говорит. За последние пару лет я лично несколько раз использовал образы base64 с ReactJ, и у меня вообще не было проблем с рендерингом. Пожалуйста, предоставьте некоторые измерения.
Лукас Лиезис
1
@LukasLiesis Я проводил измерения в Google Chrome для коммерческих целей, поэтому здесь нет публичных отчетов. Это может быть хорошо для рендеринга уникальных изображений, но вы должны учитывать, что кэширование не работает вообще. В React.js это очень важно, когда он приводит к полной перерисовке деталей (например, при смене навигации).
Брайан Хаак

Ответы:

361

Обновление: 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 является производным от механизма KHTML Konqueror, но 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#Web_browser_support

Филипп Гербер
источник
Привет Филипп, есть ли обходной путь для ограничения размера 32 КиБ в IE8? Base64 поддерживается в IE7 и IE6? Если нет, какие-либо обходные пути (без ограничения размера)? Если да, то какой лимит размера? Если да, то какие обходные пути?
SexyBeast
Посмотрите на это, возможно, это поможет: phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under
Стандарты что-нибудь говорят? Некоторый upvote для хорошего ответа обновления =).
Сиро Сантилли 郝海东 冠状 病 六四 事件 法轮功
5
Ограничение IE8 - я обнаружил, что максимальное количество символов для встроенного изображения в IE8 составляет 32 768 ( для Microsoft ), а для моего встроенного изображения - чуть более 35 000. Поэтому, когда background-imageсвойство CSS ( url(...embedded image) пыталось загрузить в IE8, поскольку превышено ограничение на количество символов, все, classчто содержало свойство, не было загружено. Я не стал исправлять это, я вернулся к imgвстроенным изображениям, которые превысили максимум, и мои изображения были загружены соответствующим образом.
id.ot
53

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

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

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

Бриг адер
источник
3
Вам не нужен онлайн-инструмент для кодирования в base64. Вместо этого вы можете использовать инструмент командной строки base64 в Linux или Mac OS X: echo "data: image / jpeg; base64," $ (cat file.jpg | base64)
cstroe
13

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

kehers
источник