Как кодировать данные изображения в HTML-файле?

Question

Я хотел бы иметь возможность выводить HTML-файл, который включает изображение (внутри самого файла). По Googling, я пришел через пару способов сделать это:

• javascript:imageData
• данных URI, таких как <IMG SRC="data:image/gif;base64,[...]">
• <object ... > тег (хотя это использует данные URI, поэтому может унаследовать тот же ограничения)

Но я не знаю, что лучше поддерживается браузерами, или если есть другие альтернативы.

Может ли кто-нибудь с практическим опытом этого предложить мне совет? Благодарю.

Answer 1

Что касается поддержки браузера от Wikipedia:

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

• Gecko и его производные, такие как Mozilla Firefox
• Опера
• KDE, через систему ввода/вывода KIO. Это позволяет браузеру KDE Konqueror поддерживать URI данных.
• Safari; хотя движок рендеринга Safari, WebKit, является производным от KHTML-движка Konqueror, Mac OS X не разделяет архитектуру ведомых устройств KIO, поэтому реализации не используются.
• Safari для iPhone;
• Google Chrome
• Internet Explorer 8; По соображениям безопасности Microsoft имеет ограниченную поддержку определенного «не судоходного» контента, например, в тегах и правилах CSS, включая проблемы, связанные с тем, что JavaScript, встроенный в URI данных, не может быть интерпретирован фильтрами сценариев, такими как те, которые используются электронной почтой клиентов. URI данных должны быть меньше 32k.
• TheWorld Browser; это оболочка браузера IE, который имеет встроенную поддержку URI данных схемы

IE не обрабатывает <object> тег правильно, см here для более подробной информации. Вкратце, вы не можете доверять IE для отображения изображений из него.

javascript:imageData также не поддерживается, так как он используется во многих сценариях межсайтового скриптинга.

Существует много дискуссий о this на web, и все они приходят к выводу, что нет хорошего универсального способа встраивания изображений. Если вам нужно только поддерживать подмножество браузеров, может работать uri данных или комбинация данных uri и javascript.

Answer 2

imageData является более гибким, например, некоторые из них ограничивают данные uris до 32k.

Answer 3

Данные схемы URI разумна хорошо поддерживается, за исключением Internet Explorer, прежде чем версия 8.

JavaScript URIs, я думаю, немного лучше поддерживается, но потерпеть неудачу, если JS недоступен.

Лучшее, что вы можете сделать, это придерживаться внешних ресурсов изображения.

Answer 4

Данные URI не будут работать в < IE8. IE8 поддерживает их до 32 КБ.