DataURI - zrychlujeme po čtvrté

Zrychlení webu, CSS

Dnes si představíme možnost vkládání obrázků přímo do CSS souborů, tak abychom nemuseli stahovat všechny obrázky zvlášť. Každý požadavek na server prodlužuje dobu načítání. Díky DataURI stáhneme jeden CSS soubor včetně obrázků.

DataURI - zrychlujeme po čtvrté

1. díl: Cachujeme, GZipujeme, zrychlujeme
2. díl: SVG a PNG Sprite, zrychlujeme podruhé
3. díl: Minifikace - zrychlujeme po třetí
4. díl: DataURI - zrychlujeme po čtvrté
5. díl: Fiddler - web debugger 
6. díl: Nastavení GZip komprese u souborů s fonty
Bonus: Automatizace s Gruntem - většinu zde popsaných technik můžete zautomatizovat pomocí Gruntu, ušetří vám to čas i námahu

DataURI

DataURI je schéma, které umožní vložení externích souborů jako text, místo zadání URL adresy. Vkládat můžeme obrázky do CSS i HTML stránky, JavaScripty i CSS do HTML a další. 

Ukázka DataURIOdrážku jsem udělal pomocí dataURI s kódem, který je níže.

/* Formát datauri */
data:[<mime type>][;charset=<kódování>][;base64],<data>
/* Příklad - odrážka, lze zkopírovat do adresního řádku */
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHRJREFUeNpi/O/iYsDAwHCBAQ9gAuKNQLwOiFXwKQKBQCC+CsS9QMyPSxEIsAFxERDfA+JMIGbGpggGhIB4GhAvhSnEpugdEGcBcTQQ/wUJsCBJ/gLiKUDcBMQfkXXBFO0A4lwgvoPNdyBFoUB8Cl84AQQYAObhEcdgjl+XAAAAAElFTkSuQmCC

Kódování base64

Možná jste si všimli, že v příkladu je zmíněno base64. Toto kódování, dokáže libovolné binární data převést na znaky

  • a-z (rozlišuje velikosti písmen)
  • 0-9
  • "+" a "/"
  • rovnítko "=" 

Dohromady tedy  26 + 26 + 10 + 2 = 64  malá + velká písmena + číslice + "+" + "/"

Kódování vezme 3 bajty a zakóduje je na 4 znaky. Pokud nám na poslední troj-bajt chybí data, vyplní se "=". Proto rovnítko nalezneme maximálně 2x a pouze na konci.

Zvýšení přenosu dat

Někteří mohou namítat, že díky base64 se nám zvýší přenos dat o 1/3 původní velikosti. Ano, to je pravda, ale díky GZip kompresi popsané v prvním článku o zrychlení tento nárůst snížíme zpět na původní velikost.


Reálné využití a podpora v prohlížečích

Využití jak jsem nastínil v úvodu spočívá ve snížení requestů na server, což zrychlí načtení stránky. Nemusíme poslat nový požadavek, čekat než jej server zpracuje a vrátí data. Vše se stáhne najednou.

Dnes všechny prohlížeče DataURI podporují. Přesto IE8 dovolil pouze vložit CSS nebo obrázky. A maximální délka byla 32kB. Přesnější popis nalezneš na CanIUse.com

Osobně využívám pouze k vložení obrázků do CSS souborů jako jsou CSS sprite.

.icon{
  /* Zápis pro prohlížeče bez podpory dataURI */
  background: url(sprite.png) 0 0 no-repeat;
  /* Přepíšeme pouze adresu, data jsem záměrně zkrátil */
  background-image: url(data:image/png;base64,iVBORw0KGgoA......);
}

Generátor

Nikdo asi nebude řešit base64 kódování ručně. Protože mi žádný nástroj nevyhovoval, vytvořil jsem svůj datauri.kutac.cz. Více o generátoru v samotném článku DataURI generátor.

A pak tu je IE7

Jak jsem zmínil výše, IE7 nepodporuje dataURI, přesto druhý řádek nebude ignorovat. Proto je nutné pro IE7 vynutit načtení obrázku, tj. opět přepsání background-image.

Zjistíme si, že prohlížeč je IE7

<!--[if lte IE 7 ]>
  <body class="ie7">
<![endif]-->
<!--[if !lte IE 7 ]><!-->
  <body>
<!--><![endif]-->

A pro IE7 a níže vložíme zpět URL adresu obrázku

body.ie7 .icon{
  background-image: url(sprite.png);
}

Využíváš DataURI, máš zkušenosti? Poděl se s ostatními v komentářích.

Přidat komentář

Právě odpovídáte na existující komentář. Zrušit

Komentáře

Novinky z blogu

LocalStorage a Lockr

Ukládání dat v prohlížeči pomocí LocalStorage má své úskalí. Od toho je tady mini knihovna, která tyto problémy řeší a hodně práci hodně...

Další články