Tento článek patří do seriálu Zrychlení webu a dev stack. Ostatní články seriálu:
- Cachujeme, GZipujeme, zrychlujeme
- SVG a PNG Sprite, zrychlujeme podruhé
- Minifikace - zrychlujeme po třetí
- DataURI - zrychlujeme po čtvrté
- Webpack lusknutím prstu - Laravel Mix - Alternativa ke Gruntu a Gulpu
- Fiddler - web debugger
- Nastavení GZip komprese u souborů s fonty
- Automatizace s Gruntem - Automatizace ostatních technik ze seriálu
- Systém SVG ikon s Gulpem
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ší.
Odráž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.
K tomuto článku již není možné přidávat další komentáře
Komentáře
Dobrý den,
pěkný článek, mám prosbu. Mohl byste se mi kouknout na web caskrmeni.cz, kde se načítá větší množství kilobajtových obrázků, zda by to mělo u mě smysl? Nikde jsem nenašel žádné případovky a zajímalo by mě, zda by to mohlo přinést zlepšení. Díky
Určitě by to pomohlo převážně u menších obrázků pod 1kB. Případovku bych asi neřešil a jel podle jednoduchých pravidel.
Je obrázek malý ( ~1kB a méně) a je jako background v CSS, pak ano.
Pokud je ale vkládán do HTML jako <img> tak ne. Je jako img, je malý a je jednoduché předělat do CSS? Pak může pomoct.