Data protocol URL size limitations

Question

Is there any size limitation for "data:" URL scheme values? I'm interested in limitations in popular web browsers. In other words, how long can data:image/jpg;base64,base64_encoded_data be in <img src="data:image/jpg;base64,base64_encoded_data" /> or background-image: url(data:image/jpg;base64,base64_encoded_data)?

Diclinous

Answer 1

Regarding limitations in web browsers, MSIE 6/7 do not support the data url scheme... More info on wikipedia

The length limits are different per browser - i believe IE8 allows up to 32KB and opera is 4KB, but can't really tell about other browsers...

Hanschen

Answer 2

Short answer: The data URI limit varies.

There are a lot of answers. As the question was asked 5+ years ago, most are now incorrect due to becoming dated, yet this question sits at the top of Google results for "data uri limit". Data URIs are now widely supported and IE 7/8 is no longer a relevant browser. There are many references below because the answer is nuanced today.

Data URI Limits

The data URI spec does not define a size limit but says applications may impose their own.

• Chrome - 2MB for the current document. Otherwise the limit is the in-memory storage limit for arbitrary blobs: if x64 and NOT ChromeOS or Android, then 2GB; otherwise, total_physical_memory / 5 (source).
• Firefox - unlimited
• IE ≥ 9 & Edge - 4GB
• Safari & Mobile Safari - ?

Alternatives

One technology with a higher limit (500MiB in Chrome) that may be an alternative for your use case is Blob URLs via URL.createObjectURL() using the URL API together with blobs via the File API. An example of that is provided in Using URL.createObjectURL().

A few other alternatives as mentioned in How to write a file / give it to the user are: FileSaver.js, StreamSaver.js, and JSZip.

You can use Modernizr to detect support for data URIs over 32kb.

Related Questions

These answers are pretty much the same as this question, but I mention them to save you the time of reading each one.

• getting max Data-Uri size in Javascript
• “Aw, Snap” when data uri is too large
• What is the size limit of a Base64 DataURL image?
• What is the maximum length of a URL in different browsers? This question is about URLs, not data URIs, but there are relevant answers and comments about data URIs.
• Is it possible to programmatically detect size limit for data url?

Tortoiseshell

Chrome's limit is more than 2MB, although I don't know exactly what the limit is. It also seems to work much better for embedded images in HTML documents than data URIs entered into the address bar, which almost ground Chrome to a halt at 3MB, but both worked. – Lutenist

@GeorgeHelyar Thanks for adding this. Any chance you could provide a reference to the higher number for the embedded case? – Tortoiseshell

I don't have a reference, only empirical evidence. I converted a 3mb image to a data URI and used it as an img src in html. – Lutenist

@GeorgeHelyar I'm happy to add the empirical evidence if you can throw it up in a js fiddle, etc. – Tortoiseshell

@GeorgeHelyar Your test might be invalid if the data URI was a progressive JPEG, which would still render with partial data. Just a thought. – Unfrequented

Chrome's limit is only for the URL of the document you are in. You can very well load Gigs of video as dataURI if your device has enough memory. And calling createObjectURL an "experimental technology" in 2017 is... – Sepulcher

@Sepulcher Thanks for this — I've updated the answer to remain relevant per your comment. I labeled it experimental in January 2017 because browser support for Blob URLs was < 10% at that time per Can I use; I've removed that comment since it's widely supported in 2018. – Tortoiseshell

I might read this table wrong, but for me it's all green since 2015 (where you still needed vendor prefix in ios Safari), and all green and yellow since 2012... – Sepulcher

I tried navigating to a not-very-long text encoded as data uri in Chrome. It would only show the first 1000 or so characters. Creating a blob with the text and using createObjectURL on the blob worked though. – Spacetime

Answer 3

I just made a quick check embedding eight different Jpeg-images ranging from 3,844 to 2,233,076 Bytes in size.

All of the following browsers displayed every image correctly on my Windows 7 (64-bit) system:

• Chromium 14.0.816.0
• Firefox 11.0
• Google Chrome 18.0.1025.142
• Internet Explorer 9.0.5 (64 Bit)
• Opera 11.62
• Safari 5.1.5

Gardiner

My IE9 has become IE10 in the meantime, so can only assure you that it worked in IE9. And it still works in IE10. Here a test image of about 244KBytes (look at the source) butterweck.de/test/dataimgtest.html – Gardiner

@miasbeck, Why stop at 2 MB? – Stiff

@Stiff No specific reason. It was just the max size I figured my images would probably have. – Gardiner

Indeed, my IE (11.*) also throw the image. – Easton

And an additional somewhat esoteric datapoint. If you happen to be using data URI's to pass image data to a Chromecast (album art, for instance), the maximum supported length is 64,000 bytes (not 64KB). – Tart

Answer 4

From http://www.ietf.org/rfc/rfc2397.txt:

The "data:" URL scheme is only useful for short values. Note that some applications that use URLs may impose a length limit; for example, URLs embedded within <A> anchors in HTML have a length limit determined by the SGML declaration for HTML [RFC1866]. The LITLEN (1024) limits the number of characters which can appear in a single attribute value literal, the ATTSPLEN (2100) limits the sum of all lengths of all attribute value specifications which appear in a tag, and the TAGLEN (2100) limits the overall length of a tag.

Lalita

Looks like "data" useless within classic HTML. However, XHTML and CSS may have different restrictions – Diclinous

You would want to locate the schema for XHTML and the specification for CSS and find out. – Lalita

While reading the spec is interesting, trying to stay within it is, imho, not wise. We are as web developers, from our very nature, always at the bleeding edge of technology. If you stay within spec you needlessly restrain yourself. LicenseQ is completely right that data urls would be completely useless with these limits. But they are not useless, and the limits are not really limits (as all browser vendors prove by ignoring them). So set yourself free! Use the info from miasbeck to your advantage. It's from the practical reality that our programs live in. – Ferreby

@StijndeWitt, Exactly. An "answer" to a web question without talking about the behavior of any browser is not an answer at all. – Stiff

Answer 5

I've read that Safari has a limit of 128K for data URIs:

http://blog.clawpaws.net/post/2007/07/16/Storing-iPhone-apps-locally-with-data-URLs#c1989348

And Chrome is 2M:

http://code.google.com/p/chromium/issues/detail?id=44820#c1

Pineal

Answer 6

2017 answer is: convert data: to blob with function: dataURLtoBlob

function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}

then create blob url

var temp_url = window.URL.createObjectURL(blob);

then use it in new window if you need.

var redirectWindow = window.open('');
redirectWindow.document.write('<iframe src="' + temp_url + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>')      

works with big files in chrome/firefox 2017

Ashleeashleigh

window.open(temp_url, '_blank'); Seems to work too without the need for iframes etc. One thing to note is that Chrome does not allow File > Save As on blob URLs. – Bemock

Since charCodeAt does not convert all characters correctly I reccomend using new TextEncoder('utf-8').encode. I give an example in my post. – Complexioned

I didn't run into any problem using charCodeAt. I used waza123's solution and it works great. – Harless

Just to confirm when using blob we can avoid the limitation of file size (base64) when sending files from front-end to back-end ? – Eaton

Answer 7

It is really the "data URI scheme".

As per the Wikipedia page, IE7 lacks support, and IE8 betas limit it to 32kB of data.

Uranian

Answer 8

Just an FYI, I was able to load a 130K image using a data url in Firefox 3.5 from a JavaScript ajax call. It truncated the image in IE 8, but the whole thing showed up in FF.

Noetic

Answer 9

Seems the limit in Firefox 3.6 is 600KB.

Doggy

Any links to back this up? – Posticous

Here is a link that shows the firefox limit: developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs (Look for limitations) – Bestow

@CarlitosWay Can't find it on there. – Nightstick

@Nightstick that was 2 years ago, I believe the spec of Firefox had changed... – Bestow

@CarlitosWay Ah, I just checked the spec and it says it's unlimited now. – Nightstick

Answer 10

I tried the code from waza123 but the charCodeAt method did not convert all characters correctly. Here is my solution for creating large downloads in the browser. (I used it for JSON data)

function exportToFile(jsonData, fileName) {
    const u8arr = new TextEncoder('utf-8').encode(JSON.stringify(jsonData, null, 2));
    const url = window.URL.createObjectURL(new Blob([u8arr], { type: 'application/json' }));
    const element = document.createElement('a');
    element.setAttribute('href', url);
    element.setAttribute('download', fileName);
    element.style.display = 'none';
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
}

Complexioned

This worked for me. I just needed to install TextEncoder typings for my angular app: npm install --save @types/text-encoding – Mailand

Answer 11

Note: There are some additional restrictions in IE. For iframe is a limit of 4 kb.

In IE9, the 32kb limit for DataURIs was removed, although for security reasons their use remains limited to certain contexts (specifically, scenarios that create a security context, like IFRAMES, are forbidden)

MSDN

Ouphe