Jestliže máte na webu příliš HTTP požadavků, budete nejspíš řešit jejich snížení. Můžete spojovat CSS soubory a tak podobně. Pro obrázky kromě CSS sprite existuje i další hezká metoda, data URI.

Co to znamená data URI a jak to stránkám pomůže?

Data URI (uniform resource identifier – neplést s URL) je název pro způsob, jak data zobrazit v internetovém prohlížeči bez potřeby externího zdroje. To znamená, že můžete na stránkách zobrazovat obrázek, aniž by externě existoval. Bude zkrátka zapsaný přímo v HTML, případně CSS.

To sebou přináší výhody, ale i nevýhody. Ty si probereme později. Nám jde nyní hlavně o snížení počtu HTTP požadavků a to tato metoda umí perfektně. Dokáže totiž klidně z pěti obrázků / požadavků udělat… žádný požadavek a přitom obrázky zůstanou. Ale čáry v tom nejsou, nebojte.

Jak to dokáže snížit počet HTTP požadavků na nulu?

Už vám to prozradím, tahle metoda totiž nesnižuje, ona rovnou webový požadavek vyloučí. Jestli rozumíte definici, kterou jsem napsal výše, jistě už víte jak na to. Data URI zkrátka přeplácá obrázek na obyčejné textové znaky. Ty pak vložíte do svého CSS namísto adresy k obrázku. Tím úplně vyloučíte webový požadavek, protože jste obrázek vložili přímo do dokumentu.

Obrázek, který se zobrazuje níže je jen hromada znaků. Jestli nevěříte, podívejte se do zdrojového kódu nebo si ho otevřete do nového okna.

Díky této metodě ušetříte plno HTTP požadavků. Ale využití to má více. Pokud například svůj obrázek, který používáte v podpisu u mailu převedete na data URI, už nebudete muset v mailu odkazovat někam na web ani přikládat přílohu. Obrázek vložíte prostě přímo do mailu.

HTML kód s data URI obrázkem pak vypadá následovně

<img alt="Šedá tečka" src="data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///93d3f///yH5BAEAAAMALAAAAAABAAEAAAICVAEAOw=="/>

Jak můžete vyčíst z kódu, začátek říká, že půjde o data URI, poté, že se jedná o obrázek ve formátu gif a base64 už jen značí kódování. Na konec jen dodám, že data URI je vhodné používat jen pro malé datové objekty. Dá se to krásně použít třeba pro webovou grafiku (proužky, malá loga a podobné prvky). Obrázek by neměl přesahovat cirka 20 kB, protože pak metoda neslouží k tomu, k čemu byla stvořena (vyloučení zbytečných požadavků).

Čeho se dá dosáhnout díky využívání této metody

V první řadě to šetří webové požadavky. Jestli máte na webu 15 maličkých obrázků, převedením na data URI dosáhnete krátké doby odezvy, protože se obrázky nebudou řadit do fronty (v prohlížeči), ale stáhnout se současně. Já převedením webové grafiky weblogu do data URI ušetřil na hlavní stránce 9 požadavků. V článcích pak bylo ušetřeno požadavků 11.

Urychlení stránek ovšem nečekejte. Z mých měření vyšlo najevo, že redukováním HTTP požadavků rychlejší web neuděláte. Alespoň ne skutečně. Pocitově to už je jiná. Stránka s chytře využívanou metodou data URI totiž budí dojem, že je rychlejší. Klasický web se načítá tak, že se zobrazí bílá plocha s texty a až poté vám naskakují obrázky. Web s data URI se načítá tak, že se zobrazí bílá plocha s texty, ale rovněž webová grafika. To budí v návštěvníkovy dojem, že je stránka svižnější, protože ho neruší postupné načítání jednotlivých obrázků, ale vyskočí na něj vše již načteno.

Zvyšujete tím uživatelský zážitek z webu (známé jako UX – User experience). Je to stejné jako, když v Gmailu máte dojem, že se maily načítají rychleji než jinde. Schválně si zkuste kliknout na nějaký mail. Je tam totiž malý trik. Běžné kliknutí se skládá ze dvou částí. Ze stisknutí a povolení. Pokud jste na webu a klikáte na odkaz, začne se něco dít až ve chvíli, kdy tlačítko pustíte. V Gmailu se otevře mail ihned, jakmile zaznamená stisknutí. Nečeká se, až uživatel tlačítko pustí a tím se ušetří 100-200 milisekund. I takový okamžik má vliv na vnímání rychlosti a nejen proto se nám zdá Gmail svižný.

Převádíme obrázky na data URI – snadno a rychle

Zní to všechno skvěle? Já doufám, že ano. Pojďme se tedy vrhnout na samotné převádění obrázků. Celé je to ohromně snadné díky různým online generátorům. V první řadě si analyzujte svou stránku a vytipujte si obrázky, které chcete převést. Data URI se hodí pro webovou grafiku jako maličká loga, různé pixelové proužky a podobně.

Až budete mít vybráno, přejděte na data URI generátor. Po jednom do něj nahrajte všechny obrázky a nechte si vygenerovat textovou verzi. Tu pak vložte namísto URL adresy obrázku do CSS. Soubor se styly pak kešujte. To je hrozně důležité, aby bylo zajištěno plynulé načítání. Ve výsledku se může zdát soubor větší než obrázky, ale díky gzip kompresi je rozdíl minimální.

Takto naprosto vyloučíte HTTP požadavky na drobné obrázky a dosáhnete tak pocitově rychlejšího webu. Pokud by zmíněný generátor nefungoval, na internetu je plno alternativ. Zkuste třeba Duri.me.

Výhody a nevýhody, na které je dobré myslet

Závěrem bych shrnul výhody a nevýhody této metody. Výhody dozajista jsou: snadné použití, podpora ze strany prohlížečů, šetření webových požadavků a možnost vložení obrázku bez externího zdroje.

Mezi nevýhody patří:

• nutnost vložení data URI kódu do souboru, který je kešován, protože to metoda sama o sobě neumí (na rozdíl od obrázků)
• odkazování na stejný zdroj několikrát je neefektivní, protože musíte kód vložit znovu (a tím velikost dokumentu vzrůstá)
• data URI obrázky nemají žádný název souboru a vyhledávače je budou zřejmě ignorovat, protože na ně neexistuje žádná URL adresa.

Metoda má dle mého hlavní užitek (kromě již zmíněných) v mobilní verzi stránek. Kvůli většinou hroznému pingu z mobilního internetu by totiž hromada drobných obrázků trvala načíst tak týden. Díky data URI můžete všechno načíst v jednom souboru a prodleva vás tolik trápit už nemusí.