Menu
I've learned that it's possible to embed an image in an HTML page like so, instead of linking to a separate image file:
<a href="data:image/png;base64,...(blah blah base64-encoded png goes here)..."
width="70" height="38" alt="image embedded using base64 encoding!"></a>
Is this "safe", as in will all modern browsers be able to view the image, as long as I stick to common formats like PNG/JPG? Are there any downsides, other than base64-encoding the image increasing the image size by a bit?
Thanks.
387
For <a> and <area> elements, the href attribute specifies the URL of the page the link goes to. For <base> elements, the href attribute specifies the base URL for all relative URLs on a page. For <link> elements, the href attribute specifies the location (URL) of the external resource (most often a style sheet file).
By consisting only of ASCII characters, base64 strings are generally url-safe, and that's why they can be used to encode data in Data URLs.
To use image as a link in HTML, use the <img> tag as well as the <a> tag with the href attribute. The <img> tag is for using an image in a web page and the <a> tag is for adding a link. Under the image tag src attribute, add the URL of the image. With that, also add the height and width.
Base64 images are primarily used to embed image data within other formats like HTML, CSS, or JSON. By including image data within an HTML document, the browser doesn't need to make an additional web request to fetch the file, since the image is already embedded in the HTML document.
Yes, this is safe - all major browsers support the data URI scheme.
One downside is that if you use the same image a number of times in the page, it will be encoded several times vs downloaded once.
Another is the size limit imposed by some browsers (IE 8 only allows up to 32k).
You can also use this in CSS to mitigate the download issue.
83
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
