Grenzen der img data URI

data URIs (RFC 2397) sind eine großartige Möglichkeit, externe Inhalte in ein HTML-Dokument (oder ein CSS-Stylesheet) einzubetten. Einerseits ersparen sie einen zweiten HTTP-Request zum Laden des externen Inhalts, andererseits machen sie auch das Speichern vollständiger HTML-Dokumente deutlich einfacher – nur eine Datei inklusive aller externen Inhalte wie Stylesheets und Bilder.

So weit die Theorie, und die wurde bereits ausführlich diskutiert. Problematisch ist – wieder einmal – unser geliebter Internet Explorer 8. Von IE 7 und älter rede ich hier gar nicht erst… Microsoft hat irgendwann entschieden, dass:

Data URIs cannot be larger than 32,768 characters.

Eine Anforderung, die übrigens mit einer IE9-Beta Ende 2010 gelockert wurde. So weit, so gut. Wichtig zu verstehen ist, dass 32.768 Zeichen genau das bedeuten, was dort steht: Die URI darf nicht länger als 32.768 Zeichen sein. data URIs sind meist base64-kodiert, um beispielsweise all die Binärdaten eines Bildes handhaben zu können. 32.768 Zeichen heißt also nicht einfach, dass wir für IE 8 ein 32-kB-Bild einbetten können – weit gefehlt. base64-kodierte Daten wachsen um glatte 1/3 in der Länge:

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) * 4

So, for a 16KB array, the base-64 representation will be ceil(16*1024/3)*4 = 21848 bytes long.

Mit dieser Abschätzung unterstützt IE 8 Bilder mit einer maximalen Größe von (32768 - 22)/4*3 ≈ 24559 bytes ≈ 23.98 kB als Inline-Inhalt über eine data URI (wobei 22 die Stringlänge von data:image/png;base64, als Schema-Präambel für ein PNG-Bild ist).

Nichts Spektakuläres, aber behalten Sie das im Hinterkopf, wenn Sie IE 8 unterstützen – wir gingen anfangs davon aus, dass 32 kB das Limit für die binäre Inhaltslänge sind…