Datová URL pomohou s malými soubory

Ve světě nových webových technologií se nashromáždilo zase několik drobností a novinek, o nichž jsme na Zdrojáku nepsali. Teď je vhodná příležitost to trochu napravit a na některé se podívat. Začneme datovými URL, které sice nejsou až taková novinka, ale někteří webdesignéři a kodéři o nich stále nevědí.

Seriál: Webdesignérův průvodce po exotických krajích (3 díly)

  1. Datová URL pomohou s malými soubory 8.8.2011
  2. Protokol HTTP 12.9.2011
  3. Novinky protokolu WebSocket a režim fullscreen 7.11.2011

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: printIkonka 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="https://www.zdrojak.cz/wp-content/uploads/ukazka/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: print přes DataURL (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červená tečka, 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í…

Začal programovat v roce 1984 s programovatelnou kalkulačkou. Pokračoval k BASICu, assembleru Z80, Forthu, Pascalu, Céčku, dalším assemblerům, před časem v PHP a teď by rád neprogramoval a radši se věnoval starým počítačům.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 44

Přehled komentářů

vithnilica jmeno souboru
David Grudl Datová URI v Nette
Martin Malý Re: Datová URI v Nette
Reklamní agentura Grudl Re: Datová URI v Nette
František Kučera Re: Datová URI v Nette
dg Re: Datová URI v Nette
. Re: Datová URI v Nette
RadekJU Re: Datová URI v Nette
David Grudl Re: Datová URI v Nette
PeterKahoun PNG očistit
Martin Malý Re: PNG očistit
Bubák Re: PNG očistit
Martin Malý Re: PNG očistit
nikdo Re: PNG očistit
Bubák Re: PNG očistit
Ondřej Súkup Re: PNG očistit
blizz Re: PNG očistit
Bubák Re: PNG očistit
PeterKahoun Re: PNG očistit
bauglir HTML
Martin Malý Re: HTML
V. H. Režie
msuchy Re: Režie
jj Re: Režie
msuchy Re: Režie
Martin Malý Re: Režie
. Re: Režie
Martin Malý Re: Režie
lol Re: Režie
msuchy Re: Režie
michal_sjx Re: Režie - nejde jen o pocet Byte
maryo MHTML
František Kučera Re: Datová URL pomohou s malými soubory
Martin Malý Re: Datová URL pomohou s malými soubory
pkroh Další možnost použití je s lokální databází
IT expert canvas
BoodOk Ikonky
Mirek v IE 9 w7x64 mi nefunguje odkaz
Mirek Re: Datová URL pomohou s malými soubory
František Kučera Re: Datová URL pomohou s malými soubory
t.h. Sprite
nescius Re: Sprite
expert kdy to pouzit
Visgean Skeloru Django
Zdroj: https://www.zdrojak.cz/?p=3527