In this article, we will explore what data URLs are and when they can be useful. We’ll examine how embedding images directly in HTML and CSS can impact website performance by increasing file size increasing page load time.
What are data URLs?
Data URLs allow embedding small files, such as images, directly into HTML or CSS. These files are encoded as a text string so that they can be embedded in the text document.
They are sometimes also referred to as data URIs.
What is Base64?
Base64 is a binary-to-text encoding method that converts binary data into a string using 64 ASCII characters. As only a specific set of characters is used, all types of Base64-encoded files can be included as part of another text document.
Base64 encoding increases file size by approximately 33% compared to the original data.
Example of a Base64 image data URI
Here's an example of a simple data URL, in this case a single-pixel SVG image.
data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxIDEnPjxjaXJjbGUgY3g9JzAnIGN5PScxJyByPScyJyBmaWxsPSdyZWQnLz48L3N2Zz4=
Below you can see a real-world example of a data URL used for an image of a website logo.
How to use a data URL as an img src in HTML
To use a data URL as an img source in HTML, embed the Base64-encoded image directly in the src attribute of the <img> tag.
To create the data URL, you can convert the image to base64 by using a script or online tool such as base64-image.
After conversion, prepend the string with the following format: data:image/[format];base64,. You'll get something like this:
<img src="data:image/png;base64,PHN2ZyB4bWxucz..." />
CSS background images with base64 encoding
Base64 can be used also in CSS for background images by pasting the same URL format into the url() function. Below we can see an example of page where a Base64 data URL is used for the background image:
background-image: url(data:image/png;base64,PHN2ZyB4bWxucz...);
What are the advantages of using data URLs?
One advantage of using data URLs is that they eliminate the need for an extra request to load the resource. As a result, the image becomes visible to the user sooner and the page gets a better Largest Contentful Paint (LCP) score.
Here's an example of a typical page that loads a background image file. The image requires a new request after loading the stylesheet
There is a difference when a Base64 data URL is used for image. In this example request waterfall, the background image is embedded in the CSS code. As a result it shows up after loading the CSS, without having to wait for an additional request to finish.
What are the disadvantages of using data URLs?
Using data URLs for images comes with several disadvantages that impact website performance.
Embedding images in HTML or CSS significantly increases file size, making HTML and CSS heavier to download and parse.
In the example of the request waterfall below, we have an HTML request which contains many data URLs. The file size has exceeded 1 megabyte, far above the usual HTML file size which is typically below 100kb. As a result loading the HTML document takes a long time.
Images embedded directly in HTML also can't be cached separately by the browser. When the page is reloaded these images need to be downloaded again, along with the rest of the HTML.
Since CSS is a render-blocking resource, any CSS with large Base64 images could be unnecessarily big. Larger render-blocking requests slow down page rendering. If many embedded images are unused, they still contribute to the file size and block other critical resources from loading.
Should you avoid base64 images embedded in HTML and CSS?
Using Base64 images in HTML and CSS can be beneficial in certain cases. However they are generally not recommended for larger images. Base64 images are best suited for small images such as icons. A small logo in the nav of a page works well as a Base64 image as an additional request for the image is not required. Meaning the image will render on the page sooner.
However, larger image data URLs should be avoided:
- Base64 encoding causes a larger file size, so using it for images is inefficient
- HTML and CSS requests are high-priority, and the browser may end up loading image content instead of resources that are actually critical
- Images in HTML usually can't be cached
Measure the impact of data URLs on your website
By continually monitoring your website with DebugBear, you can directly see the impact of data URLs and how they affect page speed.
Click on an HTML or CSS network request and open the size analysis to see if Base64 images are unnecessarily impacting page weight.
DebugBear synthetic website monitoring can also track page weight over time, allowing to get alerted to regressions and see what went wrong.
You can also set up performance budgets to receive instant alerts if regressions occur. Start a free 14 day trial today.
Monitor Page Speed & Core Web Vitals
DebugBear monitoring includes:
- In-depth Page Speed Reports
- Automated Recommendations
- Real User Analytics Data