Generate data-URI
Data URIs are a method of embedding resources directly into a document instead of loading them as separate files. Imagine, for example, that you have inserted a small image (icon) or other files directly into your HTML or CSS code, which the browser can display without having to make an extra request to the server.
They are particularly suitable for small files where communication itself would cause and make up a relevant part of the data transfer by speeding up the display and thus improving the user experience.
However, since it is longer than the pure data itself, you are not without disadvantage.
The tool allows you to convert a file into a data URI and also informs you about the effect on the size. This allows you to find the best compromise.
Contents
- Tool: Generate Data-URI
- What is a Data URI and how does it work?
- Advantages of Data-URIs
- Disadvantages of Data-URIs
- When and what should data URIs be used for?
- When should data URIs be avoided?
- Summary
Tool: Generate Data-URI
It is easy to use. Upload the file you want to convert.
The MIME type reported by your browser will be used.
You will then see the data URI, which you can copy and use directly.
You can also see the size of your file, the size of the data URI and the remaining size after Gzip compression.
Good luck with speeding up your website and improving the user experience.
Please upload the file to convert.
What is a Data URI and how does it work?
A data URI (Uniform Resource Identifier) is a scheme that makes it possible to embed data inline in websites or other documents. Instead of referring to an external file, the URI itself contains the data.
The basic syntax of a Data URI is as follows:
data:[<mediatype>][;base64],<data>
With the meanings:
- data:: The schema that indicates that this is a Data URI.
- [<mediatype>]: Optional. Specifies the MIME type of the data, e.g. image/png, text/plain. If not specified, the following is used by default text/plain;charset=US-ASCII angenommen. The MIME type is important so that the browser can decide what to do with the data. The browser would otherwise derive the type from the file name, which is of course not available when embedding.
- [;base64]: Optional. Specifies that the data is Base64-encoded. This is the most common method for embedding binary data such as images. With Base64, 64 (printable) characters (6 bits) are used to portably encode the binary bytes (8 bits). 3 bytes are thus represented by 4 characters.
- ,<data>: The actual data, either as plain text or Base64-encoded.
Example of a small red PNG image as a data URI:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red Dot">
In this example the browser does not need to separately request red-dot.png. The image data is contained directly in the src-attribute of the <img>-tag. The browser decodes the base64-string and renders the image as image/png.
In the same way, any type of file can be included directly.
Advantages of Data-URIs
Reduced HTTP requests
The biggest advantage is the reduction in HTTP requests. Each external file (image, font, etc.) normally requires a separate request to the server. With many small files, this can significantly slow down the loading time of a page. Embedding the resources eliminates these requests.
Potentially faster loading times for small resources
Especially for very small files, direct embedding can be faster than accepting the overhead of an HTTP request (handshake, headers, transferred cookies, etc.).
Independence from external files
The document becomes more independent, as all the required (small) resources are included directly. This can be useful if web pages are to be used without a network connection, saved as a single HTML file or sent by e-mail.
Avoid blocking
External CSS or JavaScript files can block the rendering of a page until they are loaded. Inline data (although often handled differently with JS and CSS) is immediately available as it has already been downloaded with (=in) the HTML file.
Disadvantages of Data-URIs
Larger file size of the main document
As already mentioned, Base64 encoding increases the amount of data by around 33% compared to the original binary file. If you embed many or large files, the HTML or CSS file itself can become very large.
This disadvantage can often be mitigated by server-side Gzip compression, which generally leads to an acceleration and is de facto standard. Here, it is not the file as such that is downloaded, but:
- the server compresses the file.
- this shorter file is transferred.
- the browser decompresses them before use.
Despite the effort involved in compressing and decompressing the data, this is generally faster than transmitting it uncompressed. As Base64-encoded data often contains repetitive character strings, it can be compressed particularly well.The tool shows you the original size, the size of the data URI and the effective size of the compressed data URI. This gives you a better overview to evaluate the impact.
No caching by the browser (for the embedded resource itself)
A resource embedded as a data URI is "reloaded" each time the page is called up, as it is part of the main document. External files, on the other hand, can be cached by the browser. If the same image is used on many different pages of your website, it would have to be transferred with the page each time if data URIs are used. This also means that an icon used several times on the same page would be included several times.
You can easily avoid this by using the data URI in an external CSS file, for example. This CSS file is then cached by the browser. So if you use the same icon (as a data URI) on several pages or the same page, but always via the same (cached) CSS file, the data URI is not reloaded each time, but is provided with the CSS file from the cache.
Poorer readability and maintainability of the code
Long Base64 strings naturally make the HTML or CSS code unclear and more difficult to maintain. Updating an embedded resource is more cumbersome than replacing an external file.
Size limitations
Browsers often have an upper limit for the length of URIs. Very large files can therefore not be embedded as data URIs. However, this is hardly a limitation due to the already mentioned increase in length.
Security aspects
In some contexts (e.g. emails), data URIs can be misused for phishing or the infiltration of malicious content, which is why some email clients or security software block them.
When and what should data URIs be used for?
The tool shows you the original size, the size of the data URI and the size of the compressed data URI, so that you can make an informed decision about where it makes sense to use it. These are for example:
Very small, frequently used icons or graphics
Small icons, logos or background patterns that are only a few bytes to kilobytes in size are ideal candidates. Here, the advantage of the saved HTTP request often outweighs the disadvantage of the somewhat larger file size (especially after compression).
Critical, small CSS background images
For elements that need to be immediately visible (above-the-fold content), embedding small background images can improve the perceived loading time.
A special case here is the immediate display of an image with a lower resolution, which is then replaced if an image with a higher resolution has been loaded separately. This gives your visitor immediate feedback and a high-resolution image later.
In prototypes or stand-alone HTML documents
Data URIs are practical if a website is to be passed on as a single file or used offline.
Fonts (with caution: note the file size)
Small font subsets can be embedded in CSS as data URIs to reduce flickering of text (FOUT/FOIT). The size deviation is particularly important here.
When should data URIs be avoided?
The disadvantages described above mean that data URIs should sometimes not be used, at least not directly:
Large images or files
Embedding photos or other large resources leads to bloated HTML/CSS files and should be avoided. External linking with browser caching is the better choice here.
The tool shows you the original size, the size of the data URI and the effective size of the compressed data URI. This gives you a better overview to evaluate the impact.
Resources that are reused identically on many pages (and are not in a cached CSS file)
If you embed an image on 100 pages and it is in the HTML code as a data URI each time, it will be transferred 100 times. An external, cached file would be much more efficient here.
If the data URI is embedded in a separate CSS file that is used by all 100 pages, the CSS file is cached and the disadvantage of the lack of individual caching of the resource is eliminated.
Summary
Data URIs reduce the number of requests and thus speed up rendering, especially when used with small files such as icons. They can be used for all files, but also have an effect on the file length of the embedding file, which can sometimes be mitigated by caching and compressed transmission.
The tool takes care of the conversion and provides you with the relevant information.