Přejít k navigační liště

Zdroják » Webdesign » Co je to Data URI

Co je to Data URI

Články Webdesign

Data URI je způsob, jak obsah externího souboru zapsat přímo do HTML/CSS.

Článek původně vyšel na autorově webu Je čas.

Nejčastěji se Data URI používá pro obrázky.

  1. V HTML značce <img>:
    <img src="data:image/png;base64,samotná data obrázku>
  2. V CSS jako pozadí:
    background: url("data:image/png;base64,samotná data obrázku");

Pomocí data: tak jde vložit do HTML obrázek, aniž by se musel někam zvlášť nahrávat (funkční od IE 8):

Příklad:

  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA&#10;AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO&#10;9TXL0Y4OHwAAAABJRU5ErkJggg==">
  <p></p>

Řetězec data na začátku je jakýsi pseudo-protokol, pomocí kterého prohlížeč pochopí, že má místo dotazu na externí soubor použít následující data.

Pro běžné formáty obrázků se obsah typicky kóduje pomocí base64.

Převod na data URI

Převést obrázek na data URI umí prohlížeče podporující třídu FileReader, která umí číst soubory určené k uploadu (IE 10+).

PHP

V PHP může vložení externího obrázku přes data: vypadat následovně:

$obrazek = file_get_contents("logo.png");
$dataUrl = "data:image/png;base64," . base64_encode($obrazek);
echo "<img src='" . $dataUrl . "'>";

Šablonovací systém Latte v Nette Frameworku na to má přímo makro dataStream:

<img src="{$img|dataStream}">

JavaScript

V JavaScriptu od IE 10 funguje přímo metoda btoa.

Případě existují online převodníky do base64:

Využití data: protokolu

Nejčastěji se data URI používá ke snížení počtu HTTP spojení. Pokud není použit protokol HTTP/2, režie navázání spojení pro získáním jednotlivého souboru je mnohem větší než samotné stažení dat.

Při velkém počtu souborů hraje navíc roli maximální počet souběžných spojení, kvůli kterému musí soubory čekat ve frontě.

Pokud se data obrázku vloží přímo do HTML kódu, zobrazí se ve chvíli, kdy na ně prohlížeč narazí.

Srovnání rychlosti

Při simulované rychlosti připojení 2G (pomocí vývojářských nástrojů v Chrome) jsem načetl stránku s 500 obrázky o celkové velikosti 1,5 MB:

  1. Při běžném přípojení značkou <img src="obrazek.png"> trvalo načtení průměrně 65 vteřin.
  2. Při použití inline obrázků pomocí data URL trvalo totéž cca 45 vteřin.

Může se tedy zdát, že používání obrázků přes data: je dobrý nápad a vede ke zrychlení.

Jenže…

Zablokování cache

Data URI přinesou zrychlení při prvním načtení, ale potom se situace otočí.

Stránka bez data URI se při opakovaném načtení z cache kompletně stáhne a zobrazí v čase kolem 30 vteřin, navíc se přenese jen cca desetina dat, protože všechny obrázky vrátí hlavičku 304 Not Modified, takže se znovu nestahují a vezmou se z cache prohlížeče.

Další věc je vykreslení obsahu HTML stránky – jelikož je HTML kód prošpikován daty obrázků, stáhne se jako celek později.

Při použití externích obrázků se HTML dotáhne rychleji, takže návštěvník vidí kompletní textový obsah dříve a obrázky se jen načtou později.

Mít v HTML kódu inline obrázky tak není moc rozumné.

V případě CSS je situace podobná. Vložené data-obrázky prodlouží stažení celého CSS souboru. Pokud jsou v něm i obecné styly a nenačítá se asynchronně (tj. blokuje vykreslení stránky), tak bude návštěvník do dotažení obrázků koukat na prázdnou stránku.

Při použití obrázků přes data: v CSS je tak dobré:

  1. Mít všechny deklarace data-obrázků ve zvláštním CSS souboru.
  2. Načítat CSS s data-obrázky asynchronně.

I tak přetrvávají další problémy:

  1. Změna jediného obrázku invaliduje cache všech obrázků na stránce.
  2. Různé stránky zpravidla potřebují různé obrázky. Při použití data URI se stáhnou vždy úplně všechny, i když se na stránce nepoužijí.

Podrobněji se problematikou inline obrázku zabývá článek:

Vše v jednom

Občas se zápis externích souborů přes data: používá kvůli omezeným možnostem nebo pohodlnosti instalace.

Může být pohodlnější si do stránky připojit hotový skript – třeba pro lightboxovou galerii, který sestává z jediného *.js souboru, co v sobě má obrázky i styly. Není tak nutné přemýšlet, co kam nakopírovat a podobně.

V případech, kdy není na stránku možné nahrát soubor, ale jde zapisovat HTML, je pseudo-protokol data způsob, jak na takovou stránku vložit obrázek.

Base64 a SVG

Pro vložení SVG přes data URI je zbytečné base64 používat. Naopak je to dokonce škodlivé, protože to způsobí větší datovou velikost.

Data URI vs. CSS sprite

Zápisem obrázků přes data URI jde nahradit používání obrázkových spritů (spojení všech obrázků do jednoho a jejich vybírání pomocí background-position).

Data-obrázky jsou v CSS pohodlnější na používání.

Nevýhoda je teoreticky nefunkčnost v prehistorických prohlížečích (např. IE 7). A nutnost řešit asynchronní načítání CSS souboru s data-obrázky.

Odkazy jinam

Komentáře

Subscribe
Upozornit na
guest
4 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
Leoš Ondra

Jen poznámku – k uploadu souboru na server nepotřebujete FileReader, stačí FormData (rozšíření AJAXu). Pokud chcete udělat náhled obrázku před odeslání, ani tam FileReader nepotřebujete, bohatě stačí window.URL.

Oldis

Prosil bych torchu vic hardcore clanky a ne pro zacatecniky

Martin Hassman

Určitě, taky budou.

nie

Je tu ešte jeden dôležitý use case – html5 bannery. Je jednoduchšie nasadiť jedno html než do reklamného systému (alebo horšie mimo reklamného systému) pchať množstvo súborov.

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.