Convert CSS images to a Base64

Current browsers supports Data URI scheme, a protocol, which can store data on any url directly to the source text file - for example, you can store images directly into html code or css style sheet, using Base64 encoding.

Analyze CSS or HTML

Enter css/html URL to analyze:
Try it: amazon.com | microsoft.com | ebay.com | finance.yahoo.com | seznam.cz

CSS images and Data URI scheme

Each image (or any other file, of course - for example, ttf fonts) can be embedded to text/css or text/html file by its url address, for example in html: 

<img src="http://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif">

or, in css: 
background-image:url(http://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif)

You can convert the data and embed the data directly to the text file and the source html code then looks like: 

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />

and css: 
background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)

As you can see, the whole representation of the image in the HTML/CSS, including image body and contenttype has a similar byte size like plain image URL. In such very small file, of course - and this is a base idea to store images directly to CSS. CSS file usually contains several images and other data files with very small size, in 100th of bytes.

If you store the data directly to the css, you can save download and upload bytes, several number of requests to images and page response time. And even better: Some web servers do not compress gif/jpeg/png images by gzip compression during transfer, but css files are compressed - and gzipped base64 representation of image is sometimes smaller, than the image itself.

{goo_728}

CSS url(...): To base64 or not to base64? That's a question.

It looks really well.

The main problem of the Data URI scheme and base64 images is like in other good web stuff: Internet explorer. IE version 7.0 and older does not support embedded base64 data. There are some workarounds using Mime/MHtml format which enables the idea to store base 64 image representation directly to a css, but it looses simplicity of this idea.

The second problem is number of requests to original file and number of URL include in the source CSS/HTML file.

If you store images as a base64 data stream to css, server will compress the data using gzip and browser will download the css file only one time during session and the css is usually cached between sessions. Another situation is with HTML of the web application: The HTML is sent each time, each request, usually as plain data stream, without compression. So the embedding images as base64 data is reaaly suitable for css, but ussage of the uri data scheme and base64 in HTML images is adequate only in some special cases.

Base64 pages


Other utilities

© 1996 - 2023 Antonin Foller, Motobit Software

Motobit.com