Data protocol URL size limitations

LicenseQ_62672 0
Viewed 80100

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)?

css html
11 Answers

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
user_3014970

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.

John_Saunders_763370

It is really the "data URI scheme".

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

Jay_328780

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...

user_352920

Seems the limit in Firefox 3.6 is 600KB.

user_2885080

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);
}
user_14361510

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

user_11991550
Related