data URIs (RFC 2397) are a great way to embed external content into an HTML document (or a CSS stylesheet). On the one hand they circumvent a secondary HTTP request to fetch the external content but on the other hand they also make storing full HTML documents so much easier – just one file including all the external content such as stylesheets and images.
That’s the theory and that has been discussed in detail already. Problematic is, again, our lovely Internet Explorer 8 – I’m not talking about IE 7 and earlier here… Microsoft somewhen decided that:
Data URIs cannot be larger than 32,768 characters.
A requirement that has been loosened with one IE9 beta late 2010, by the way. So far so good. What is important to understand is the fact that 32,768 characters is exactly what it says: the URI must not be longer than 32,768 characters. data URIs are mostly base64-encoded to be able to handle all that binary data in an image for example. So 32,768 characters does not simply mean we can put in a 32kb image for IE 8 – far from that. base64 encoded data suffers a mere 1/3 increase in length:
Base64 encodes each set of three bytes into four bytes. In addition the output is padded to always be a multiple of four.
This means that the size of the base-64 representation of a string of size n is:
ceil(n / 3) * 4So, for a 16KB array, the base-64 representation will be ceil(16*1024/3)*4 = 21848 bytes long.
Given that estimation IE 8 supports images with a maximum size of (32768 - 22)/4*3 ≈ 24559 bytes ≈ 23.98 kB as inline content using a data URI (with 22 being the string length of data:image/png;base64, as the scheme preamble for a PNG image).
Nothing fancy, but keep that in mind when supporting IE 8 – we initially thought of 32 kB being the binary content length limit…