Menu
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)?
774
The official documentation specifies a maximum length of 2048 characters for the <loc> element, which is used to submit URLs: URL of the page. This URL must begin with the protocol (e.g. “http”) and end with a trailing slash if required by the web server. This value must not exceed 2,048 characters.
An overly long URL can cause both usability and search engine issues: Any potential benefit you may have by including keywords in the URL will be diluted since it's such a small percentage of the total URL text. Longer URLs are truncated by search engines, in web browsers, and many other areas.
Chrome limits URLs to a maximum length of 2MB for practical reasons and to avoid causing denial-of-service problems in inter-process communication. On most platforms, Chrome's omnibox limits URL display to 32kB ( kMaxURLDisplayChars ) although a 1kB limit is used on VR platforms.
Browsers' URL length limits The maximum length of a URL in the address bar is 2048 characters.
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.
The data URI spec does not define a size limit but says applications may impose their own.
total_physical_memory / 5 (source).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.
These answers are pretty much the same as this question, but I mention them to save you the time of reading each one.
105
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:
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
