Data protocol URL size limitations

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?

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

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.

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

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