Datová URL pomohou s malými soubory

Datová URL někteří vývojáři vůbec neznají (a diví se „bordelu v HTML“), jiní je považují za módní výstřelek, a další je bez většího povyku prostě používají. Oč vlastně jde a jak to vypadá?

Co jsou DataURL?

DataURL (někdy uváděno jako DataURI, ovšem RFC2397 hovoří o DataURL) je URL se schématem „data:“ a jeho obsahem jsou binární data. Příklad vše ozřejmí:

Představme si, že máme stránku, a na ní máme miniikonku, řekněme, pro tisk souborů. Takto: Ikonka je ve formátu png, má rozměry 16×16px a zabírá 629 bajtů. 

Všichni známe běžný způsob vložení do stránky: <img src="http://ukazky.zdrojak.cz/novinky/print.png" alt="print">. Funguje, je ověřený, tak co je na tom za vědu?

Každý takový objekt je totiž přenášen zvlášť. Otevře se pro něj spojení, server je požádán o data pro tento soubor, on je vrátí a prohlížeč to celé zobrazí. Kvůli 629 bajtům letěly po síti kilobajty dotazů, odpovědí, servisních informací… Možná požadavek čekal ve frontě. Pokud je takových obrázků na stránce víc, pak data létají a fronty čekají… Schválně si zkuste změřit objem dat, která jsou přenesena při takovém dotazu, třeba na úrovni TCP – stovky bajtů hlaviček, cookies a dalších „neužitečných“ dat. Efektivita takových dotazů je opravdu velmi nízká.

Pro tyto situace je někdy výhodnější použít DataURL, kde jsou samotná binární data přímo součástí URL. Výše uvedená ikonka bude do kódu vložena jako

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8
/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZT
wAAAIHSURBVHjajFNBaxNBFP6SLNq0WGNSsS0ohFiiFUx6UNFCLsmph4jgqdKL0KgI/QMe7MV
DEAQF8VDoMVtKoejB0OToRTQRDxpcmrC2SXSppG7ajV2yScadWTam6Sb4wdth3vve997M7LMR
QmBi40uVZL5J+CD+Rjeuek/h0W2/rdtv6xS4+fQ9Wb4/BYfdhmbrn/+XUsfqJxnFbQlLD64cE
rF3K9Lk/K4douxgltsBfKedmLk8hrPnRvFkTSB9BaxQ3lXhdTVx78bIkeNxVgkDnKGrNlpwHn
NA2FH1XRPXvM4jXMbMZDIkHo+TXkKDzgFmJmKxGEmn04xvF0WRZLNZhMNh9OqGdtGJ2TtzSCa
TrDCXSqUQCoXgdrsR2H+JZ/G3Pe8irVtAt4sXHurfW0gkEuBkWcb5iQlGiEaj8Pv9fS9UEAS4
PR5MT1/Hm9fr4Gq1WjuYzxfg0YOVSsUymcYoJxAMsr2iKMYr5Dc3maNalaGqKpTagaXA0JCKr
a3vbX65XAZHVUqlEnPQ41BodbXvMUx+oVAwOtA0jTlcLhd4nm8TqTg1WskEvSOT3/6R9vb2MT
x8ghEnJy9hdGzcsrL08wcWFx8jEomgWCwaw8TzKySX+wpJkkCm5vHibhB/6i0WbDSM9UBrsvX
MyeNYWP6Md8/n4PP52Ksdmsb5Vx/J/8xG50T+FWAAPKDZ6z1/DUMAAAAASUVORK5CYII=">

a bude vypadat takto: (pokud zde nic nevidíte, použijte prohlížeč ne starší tří let)

Jak na DataURL?

Z příkladu je bystřejším patrné, jak DataURI vypadá. Jeho formát je: data[;charset=<en­coding>][;base64],<da­ta>. Tedy:

1. Začíná názvem schématu data a dvojtečkou,
2. za ním je (nepovinný) parametr MIME typ, v němž uvedeme typ souboru (uvádějte jej a nespoléhejte na to, že to prohlížeč „nějak zpracuje“)
3. za ním je „znaková sada“ – v případě že jde o textové soubory, třeba text/html, jinak nemá smysl a lze ji vynechat
4. za znakovou sadou je použité kódování – téměř výhradně se používá Base64. Parametr je sice opět nepovinný, ale je lépe ho uvést, nic tím nezkazíme
5. za čárkou následují data v daném kódování (tedy převážně Base64)

Pokud budeme chtít takové DataURL vytvořit třeba pro miniobrázek červené tečky, budeme postupovat jednoduše: PNG soubor si převedeme do reprezentace v Base64 (iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg== ) a zapíšeme URL jako:

data:image/png;base64,(...a sem přijdou data...)

S generováním vám mohou pomoci nástroje jako The DataURLMaker (pro obrázky), the data: URI kitchen nebo elegantní Drag-n-drop DataURL generator. Můžete využít serverového skriptovacího jazyka, jak ukazuje např. výše odkázaný článek na Wikipedii:

<?php
function data_uri($file, $mime) {
    $contents = file_get_contents($file);
    $base64 = base64_encode($contents);
    return ("data:$mime;base64,$base64");
}
?>

Kde to lze použít?

Použití pro obrázky je jasné – v atributu SRC u elementu IMG. DataURL lze použít i v CSS tam, kde se vyskytuje konstrukce url()  – u background-image, list-style-image atd. Můžete dataURL použít i v JavaScriptu, např. jako parametr pro window.open(). Můžete je použít jako favicon – zkrátka všude tam, kde používáte „běžná“ URL s http: či https:. Tedy např. i v <a href…> Můžete si zkusit drobnou ukázku DataURL.

Libůstky prohlížečů

IE ve verzi 8 vyžadoval, aby DataURL měl méně než 32kB a omezoval jeho použití na elementy img, link, object a input type=image. Od verze 9 tato omezení nejsou. Firefox zase nesnese znak konce řádku v datech (pozor na to, některé převaděče do Base64 zalamují řádky).

Co tím získáme? Co ztratíme?

Jako všude jsou zde jak výhody, tak nevýhody. Výhody jsou jasné – u malých souborů ušetříme velké množství přenesených dat, a to i přesto, že jsou DataURL o třetinu větší než původní soubory (viz princip kódování Base64). Navíc při použití transparentního gzip pro webové stránky je nárůst velikosti jen v řádu jednotek procent. Ušetříme si režii s otvíráním spojení (a co teprv u stránek přes HTTPS!) a vyhneme se frontám. DataURL můžeme použít např. i v CSS – pro nejrůznější obrázky na pozadí či ikony.

Výhodné je použití v případech, kde chcete mít jeden HTML soubor, bez doplňkových souborů, a přesto v něm použít ikony. Hezký příklad jsou „exportované záložky“ z prohlížeče Chrome – favicony jednotlivých webů jsou zapsány v HTML právě v podobě DataURL (Google vůbec DataURL poměrně intenzivně používá).

Na druhé straně jsou nevýhody: Takový obrázek se necachuje. U přímého odkazu může prohlížeč uložit soubor do cache a může ho použít třeba na jiné stránce. U DataURL žádný soubor není, cache se nekoná a v každé stránce bude muset být obsah znovu uvedený. Budou se načítat při každém refreshi (pokud je ale použijete v externím CSS souboru, tak to až tak neplatí). Při změně ikonek musíte změnit všechny DataURL ve všech souborech, kde jsou použitá… Někomu se nebude líbit „nehezký HTML kód“, zanesený „ošklivým nepohledným chaosem znaků“.

Používat, nebo nepoužívat?

Záleží na každém kodérovi či vývojáři a na jeho zvážení.

Podpora v prohlížečích je velmi slušná – viz Caniuse#dataURI.

Pro malé ikonky můžou výhody převážit. Posílat takto stokilovou fotografii se ale zcela jistě nevyplatí, tam nebudou úspory žádné. Nejdůležitější při rozhodování bude, jako vždy, pravidlo uměřenosti a vhodnosti pro daný cíl – bezhlavé nasazení DataURL všude možně bude mít jediný předpokládatelný výsledek: vlnu znechucení a odporu k „téhleté nové pitomosti“. Což by byla škoda.

Ke čtení…

• http://www.si­tepoint.com/why-the-data-uri-scheme-could-help-save-your-slow-site/
• http://en.wiki­pedia.org/wiki/Da­ta_URI_scheme
• http://tools.i­etf.org/html/rfc23­97
• http://www.sve­inbjorn.org/da­taurls_css
• https://develo­per.mozilla.or­g/en/The_data_UR­L_scheme