What are Data URLs | Tech Wiki Online

What are Data URLs

A Data URL is a URI scheme that provides a way to inline data in a document, and it’s commonly used to embed images in HTML and CSS.

Introduction

A Data URL is a URI scheme that provides a way to inline data in an HTML document.

Say you want to embed a small image. You could go the usual way, upload it to a folder and use the img tag to make the browser reference it from the network:

<img src="image.png" />

or you can encode it in a special format, called Data URL, which makes it possible to embed the image directly in the HTML document, so the browser does not have to make a separate request to get it.

Data URLs might save some time for small files, but for bigger files there are downsides in the increased HTML file size, and they are especially a problem if the image reloads on all your pages, as you can’t take advantage of the browser caching capabilities.

Also, an image encoded as Data URL is generally a bit bigger than the same image in binary format.

They aren’t much practical if your images are frequently edited, since every time the image is changed, it must be encoded again.

That said, they have their place on the Web Platform.

How does a Data URL look

A Data URL is a string that starts with data: followed by the MIME type format. For example, a PNG image has MIME type image/png.

This is followed by a comma and then by the actual data.

Text is usually transferred in plain text, while binary data is usually base64 encoded.

Here is an example of how such a Data URL will look like:

<img src="data:image/png,%89PNG%0D%0A..." />

And [here is a small version of the banner image of this article encoded in a link](data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%96%00%00%00c%08%03%00%00%00N%80%09z%00%00%03%00PLTE%FF%FF%FF%FE%FE%FE%FD%FD%FC%FE%FE%FF%FF%FF%FE%FF%FE%FE%F0%EE%ED%E7%E7%E8%E6%E5%E6%E4%E4%E3%E4%E4%E4%F6%F8%F9%E9%E8%E8%E3%E2%E1%F8%FA%FD%E9%E8%E7%E0%E0%E0%F5%F5%F7%FA%F9%F8%E1%E2%E3%F1%EF%EE%E2%E1%E0%F2%F4%F5%95%92%8B%00%00%00%21%1F%1D%E0%E4%EAywo%2F%2B%263AL%E9%EB%ED%FD%FB%FAlg%5B%CC%D1%D7%E9%E7%E4%DB%DF%E3%FC%FC%FB%B4%B1%A8%C0%C6%CE%E1%DF%D930.%00%02%16%D9%DD%E1875%08%05%06%03%01%01%1A%19%19%1E%1B%1B%0C%03%00%EE%ED%EC%FE%FD%FE%F6%F5%F5%E9%EA%EA%EB%EB%EB%FB%FA%F9%EC%EA%E9vrg%0D%0B%0B%10%0F%0F%19%16%14%19%1B%20%3CHU%EE%EF%F1%FC%FD%FE%FE%FD%FA%19%0A%00%00%01%0D%1B%13%01%27%24%23%2A%29%2A%5E%5E%60UUU%17%13%10%07%05%0E%0E%09%06%09%0E%16%40%3F%3E%0B%1B%25121%D2%D7%DE%C7%C6%C2%29%28%25%276E%DE%DB%D55%2F%28%82%7Fu%8E%93%9B%21%11%00%B7%B6%B1ry%83%FE%FF%FF%C5%CB%D2%E6%E4%E2%0D%14%1B%9C%99%91%3F%40DabcZZ%5B%B1%B7%BE%0A%256%D2%D4%D6%1C%22%2B—DCCNNPffgV%5Dh%F5%F3%F0v%89%E5%E6%E7%FB%FD%FDtpe%B5%BB%C4%F9%F7%F6%D3%D2%D0%A1%9F%9Ar%7B%87%F2%F1%EDNH%3C%A9%B0%B7%EC%EC%EC%CB%C9%C5EFL%CF%CC%CB%B6%B7%B6%7D%7BqKXeA%3C5%E5%E3%E2%B3%B4%B3%92%91%89aku%F7%F9%FA%83%8B%CC%CE%CFFLV%B0%B2%B4%B7%B8%B8%B5%B7%B8%B8%B8%B7c_Wplb%2A%23%1A8%3A%3A%01%01%06%9C%A0%A8%BF%BF%BDtqk%1F%1E%21%C0%C2%C3%96%95%90%00%0E%28%A7%A8%AA%EC%EE%F0%D1%D0%CD%BC%BC%BA69%40%80%87%90%F6%F5%F2%C8%CB%D1goy%FA%FB%FD.%23%02RWa%B8%BA%BB%23%26%29agq%E2%E4%E5%FC%FA%F7%A1%A5%AB%C5%C3%C0%23%22%22%BC%BE%BD%C6%C6%C6%00%13%2F%A8%AB%B0%FC%FE%FF%B9%BA%B9%E3%E0%DC%14%08%00%C2%C1%C0%BA%BB%BC%15%11%06%82%8A%95%AC%AC%AB%90%8E%86eec%B1%B4%BC%EB%ED%EE%D5%D8%DAJHG%C0%C0%BF_%5BQ%F5%F7%F8gbY%87%8C%93%EF%F1%F2Vao%B1%B2%B0%96%9C%A5%F2%F1%F0%BD%BF%C0%DD%DE%DE%DE%DC%DC%A2%A9%B3%5CVK%00%10%1D%A9%A8%A2%BF%C1%C8%8F%8A%82%E0%DF%DF%DC%DA%D8%A5%A5%A0Zdr%C3%C6%C8kia%DF%DF%DF%AD%AC%A5%DA%D9%DA%DC%DC%DC%DC%DA%DA%2A%2F4UOA%AE%B0%B0QRV%C6%C9%CB%CB%CA%C8%E7%E5%E4%C5%C4%C3%AF%AF%AD%BA%C0%C9%E0%E1%E2%DD%DC%DC%F2%F2%F2567%86%84%7C%A1%9D%95jr%DF%DD%DD%92%98%9E%88%87%83lkkooo%CA%CB%CD%FF%FD%FD%CF%D1%D2%DB%DB%DC%D7%D6%D6%B3%B5%B5%8C%8F%95sss%DA%D8%D6%E6%E9%EA%D8%D7%D7%D9%D8%D9%D6%D4%D2%94%DC%CD%F8%00%00%0DqIDATx%01%EC%D0%83%15%04Q%14%03%D0dl%BB%FF%3E%D7%B6%99%7B%F4%F9%04%11%11%11%11%11%11%11%11%F9%4046%988%C5%D8%843O%899%CB%98%E0n%22n%E6%26%CE1%F10%C4%94%BD%DCp%FF%96%27%B2%3A%AE%E7%07K%A1%B5%D1%D7%DED%A3x%F1%CC%0F%A2%28%C1%89V%99f%F9%2C%AB%85b%12%BD%0C%27%9B%AA%0EV%CAfVh1%0D%18%B9%93%DB%BD%E9%B4%5D%DF%AD%0C%B3%98%07%FB%1E%F3I%0E%0Cv%C5%40%18Mm%EB%5B%DB%D7%D6%FA%D9%B6%5D%F3%D5%F8%EB%9D%DA%3D%97%F1%99L%88%29%7Cgzf%F6%7F%FB47%8F%05Fq%D1%B3%08b%89-%B3%15%FC%C4%2A%3BJ%D7%1A%88%F5%8DMv%F4%2FZ%5B%E0x%BA%04Q%DAX%90%AF0%85%A9%E75M%3B%AF%1B%CA%17%1F%8A%F8%BC%A6%EB%BAiA%84%ED%B8%82%00ok%7B%96%C9%9F%BB%ED%EC%1E%FDSk%CF%FA%A1%B5%7FpHZ%06i%F9%E0%0F%04C%8E%28L%90%D6%F2%91e%D2%0AG%A2%B1%F8%DF%B5%12%B09%CE%06%C0%3B%13HR%97%14%D2%B6%80%CCM%F6%85%A3%2C%0B%01%9F%B0%3Fu%238%2F7%B3%C3%F2%F0%D9i%14%18%FB%9B%16M%F4%25%8Bfq%E3%F0s%16J%B4P%B9%B2%C8%03pQe%9F%A8%21%EA%D4%B7%0E%FE%A6%D5h%C6%C0%C1v%FC%ADv%08%12%3A%17%D5%9B%258%00%BA%BD%B3t%3E%BEj%F5%DB%81%40%20%8D%08%06%C3%D1%ED%20%FA%A3%3B%9Bw-%2A%DA%B8w%F6%FE%83%A3%95%DF%93%F8%10%8FN%EF%D0%CFc%ED%C9%FE%C1%3E%16%D4%D3%F2S%0C%F0%8C%8D%9F7%5B%ADu%BC8uz%E7%FC%CBW8%90%A2%A3%D7K%7F%D1z%F3%F6%1D%5CN%C2%FB%8B%E3%0F%10%D2%F8%C8wY%80%B5%B15a%F8%90%8B%06%AD%40%87%5Bw%C7%EA%EE%CEO%DDRw%9C%5B7%5Cz%BB%D4So%EA%DE%C8%25i%A9a%C1jP%D7P%1C%D2%06w%A8%CB%9C%DD%A4%FE%FCSa%F7Y%7B%CF7%DF%CC%1Cf%05%06%05%83%7D%DF%BE%7D%FBi%AD%C6z%20%A4%5E%9B%D0%9E0%11%C2%7C7%91%F6%D3%FF%DD%CC%84o%D9%CA%DEf%07%21%7F%F0%D66%D8%0E%FF%A0%A1%26O%DF%D1g%A7%03%EC%12%EE%DE%E3%02%7B%10%AB%DB%16%C6%A69%11f%EE%DDg%8B%F6%81%FD%07%98%83D%EF%B77%1C%12ME%CB%1C%5EpDpt%0D%8C%B6E%2Cf%1F%3E%85V%B3%87c%3Dl%0C8k%1E%3FA%04%FA%14%EB%88h1%99%7D%F2T%B8%E8%B4h%2B%8C%86%BEvg%E0%EC9%B3%13Nz%3F%BE%F4%AF%F3%DB%A0%03%87u%D2%B9%2Fb%5D%107%96pX%CBER%0B2%15%AF%86%C9%E6N%A4y%FA%2FB%8A%B2%FE%AE%16%E3%07%23%E0%88%BC%3EY%7D%12%BAJ%10K%81X%E8%00%D6%03-uj%85%E2%C1T%AA%16%B3%98%5C%BC4%60%B3%E2%B4%10%B1%BA%00%1B%03%2C%E9%3D%FA%3E%3A%2C%07%17V%