Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

How to encode image data within an HTML file?

Tags:

javascript

html

image

data-url

I'd like to be able to output an HTML file which includes an image (within the file itself). By Googling, I've come across a couple of ways to do this:

  • javascript:imageData
  • a data URI such as <IMG SRC="data:image/gif;base64,[...]">
  • <object ... > tag (although this uses a data URI, so may inherit the same limitations)

But I don't know which is better supported by browsers, or if there are other alternatives.

Can anyone with some practical experience of this offer me advice? Thanks.

like image 729
Richard Inglis Avatar asked Jan 18 '10 09:01

Richard Inglis

People also ask

How do I add data to an image in HTML?

HTML <img> data-* Attribute. A data-* attribute on an <img> tag attaches additional data to the image. To create a custom attribute, replace * with a lowercase string, such as data-id , data-status , or data-location .

How do I display base64 in HTML?

To get this to work, once your bytes are loaded into an Image class, Create a BytesIO object and then use this to save the image with the format to the BytesIO, i.e img. save(bt_ob, format="png"). This code will now work in the html in the "data:image/png;base64,<>" format.

What is a base64 image?

Base64 encoding is a way to encode binary data in ASCII text. It's primarily used to store or transfer images, audio files, and other media online. It is also often used when there are limitations on the characters that can be used in a filename for various reasons.

What is an encoded image?

Image Encoding Overview. An encoder writes image data to a stream. Encoders can compress, encrypt, and alter the image pixels in a number of ways prior to writing them to the stream.

2 Answers

In regards to browser support, from Wikipedia:

Data URIs are currently supported by the following web browsers:

  • Gecko and its derivatives, such as Mozilla Firefox
  • Opera
  • KDE, through the KIO input/output system. This allows the KDE browser, Konqueror to support data URIs.
  • Safari; although Safari's rendering engine, WebKit, is a derivative of Konqueror's KHTML engine, Mac OS X does not share the KIO slaves architecture so the implementations are not shared.
  • Safari for the iPhone;
  • Google Chrome
  • Internet Explorer 8; Microsoft has limited support to certain "non-navigable" content, such as in tags and CSS rules, for security reasons, including concerns that JavaScript embedded in a data URI may not be interpretable by script filters such as those used by web-based email clients. Data URIs must be smaller than 32k.
  • TheWorld Browser; is an IE shell browser which has a built-in support for Data URI scheme

IE does not handle the <object> tag correctly, see here for more details. Briefly, you can't trust IE to display images from it.

The javascript:imageData is also not well-supported, since it is used in a lot of cross site scripting attacks.

There are many discussions of this on the web, and they all come to the conclusion that there is no good universal way to embed images. If you only need to support a subset of browsers, the data uri may work, or a combination of data uri and javascript.

like image 135
jball Avatar answered Sep 29 '22 17:09

jball

imageData is more flexible, for instance some ie's restricts data uris to 32k.

like image 45
jspcal Avatar answered Sep 29 '22 17:09

jspcal
Sign in to Comment

Related questions

CSS animation triggered through JS only plays every other click
Update state within listener that is inside useEffect
`Firebase` package was successfully found. However, this package itself specifies a `main` module field that could not be resolved
Convert JavaScript function to PHP
jQuery slicing and click events
GreaseMonkey script to auto login using HTTP authentication
Java Script to edit page content on the fly
What is the easiest way to learn ActionScript when you know JavaScript?
ASP.NET - losing selection of dropdownlist populated via javascript
IE and Memory accumulation in Javascript
Is getting JSON data with jQuery safe?
Embedding an image in an AJAX response
How do I display a jquery dialog box before the entire page is loaded?
How can I get jquery to execute animations in exact parallel?
Restrict Textarea for not accepting 250 character
cross-browser standard Xml processing in Java Script
Possible jQuery memory issues with $('#foo').remove()?
How to use IE7 Javascript memory leak detectors?
how to generate CSS Path with javascript or jquery?
How does facebook detect when a link as been PASTED

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!