Jak můžeme zrychlit své webové aplikace? 3. díl

Tento díl je pokračováním seriálu a technikách umožňující zrychlení načítání webových stránek a aplikací. V předchozím článku Jak můžeme zrychlit své webové aplikace? 2. díl byly zmíněny možnosti, jak snížit objem přenášených dat pomocí komprese nebo snížit počet HTTP požadavků pomocí ukládání do mezipaměti.

Již v předchozím díle jsem nakousl otázku, jak optimalizovat obrázky. Těch se totiž zmíněná komprese výrazně nedotkne. V tomto článku se to pokusím detailně popsat.

Formáty obrázků pro web

Jedním z nejvyužívanějších typů souborů na webu jsou obrázky. Díky nim je přenášený objem dat poměrně vysoký, avšak použitím vhodného formátu je možné objem dat držet poměrně nízko.

Nejpoužívanější formáty obrázků na internetu jsou:

  • GIF
  • PNG
  • JPG (JPEG)

Díky oblíbenosti zařízení typu tablet, které mají obrazovky s vysokou hustotou pixelů, se brzy začnou rozšiřovat i vektorové formáty.

Výše uvedené formáty obrázků mají specifické vlastnosti a a jsou určené různé použití. Jejich správným použitím lze zajistit nejen kvalitu zobrazení, ale také snížit objem přenášených dat.

GIF - Graphics Interchange Format

GIF (Graphics Interchange Format) je grafický formát určený pro rastrovou grafiku. Nabízí maximálně 8 bitovou barevnou hloubku (256 barev) a bezztrátovou kompresi. Umožňuje omezené možnosti průhlednosti. Výhodou GIF je především možnost jednoduchých animací.

PNG - Portable Network Graphics

PNG (Portable Network Graphics) je grafický formát nabízející bezztrátovou kompresi. Nabízí možnost 24 bitové barevné hloubky a 8 bitovou průhlednost. Je zde také formát nabízející 256 barev včetně transparence, tzv. adaptivní PNG8. Zatím není stanoven formát pro jednoduché animace.

Tento formát je nástupcem zastaralého typu GIF.

JPG (JPEG)

JPG, nebo spíše přesněji JPEG, je grafický formát určený pro prezentaci fotografií. Funguje na základě ztrátové komprese, takže je možné dosáhnout foto-realistické kvality i s malou velikostí souboru.

Obsahuje také další informace o obrázku, tzv. EXIF metadata, například:

  • Rychlost závěrka
  • Typ fotoaparátu
  • GPS pozice (pokud je k dispozici)
  • Světelnost
  • Informace o miniatuře (zmenšenině / náhledu)

Další parametry a informace můžete najít například na EXIF - Exchangeable image file format na Wikipedii.

Formát JPEG nepodporuje možnost průhlednosti.

Srovnání formátů

Pro ilustraci kvality a efektivity jednotlivých formátů obrázku jsem připravil tabulku, která porovnává jejich velikost.

Na obrázcích je barevné spektrum obsahující celkem 188 barev. Obrázek označený červeně má největší velikost, obrázek označený zeleně má nejnižší velikost.

Formát obrázku Velikost
GIF - paleta obsahuje přesně 188 barev GIF
Paleta obsahuje přesně 188 barev
4357 B
GIF (adaptivní) - paleta nabízí 256 barev (188 skutečně využitých) GIF (adaptivní)
Paleta nabízí 256 barev (188 skutečně využitých)
4357 B
GIF - paleta obsahuje 128 barev GIF
Paleta obsahuje 128 barev
3714 B
JPEG - 25% komprese (75% poměr zachování kvality) JPEG
25% komprese (75% poměr zachování kvality)
2801 B
JPEG - bez komprese JPEG
Bez komprese
20464 B
PNG8 - paleta nabízí 256 barev (188 skutečně využitých) PNG8
Paleta nabízí 256 barev (188 skutečně využitých)
1319 B
PNG24 - paleta nabízí 16,7 milionů barev PNG24
Paleta nabízí 16,7 milionů barev
1292 B
PNG32 - paleta nabízí stejný počet barev jako PNG24 + 8 bitů pro průhlednost PNG24
Paleta nabízí stejný počet barev jako PNG24 + 8 bitů pro průhlednost
1454 B

Na první pohled se obrázky zdají naprosto stejné, až při bližším zkoumání jsou znát patrné rozdíly v kvalitě.

Největší rozdíly jsou ve velikosti. Nejvyšší velikost má obrázek typu JPEG bez komprese (20464 B) a nejnižší PNG24 (1292 B). Formát GIF nabízí v porovnání s PNG více jak trojnásobnou velikost souborů.

Průhlednost

Dnes je na webu zcela běžné používat obrázky v podobě ikon nebo ilustrujících znaků. Ty jsou specifické tím, že se dají univerzálně používat na jakémkoliv pozadí - jsou na pozadí průhledné.

Jediné dva formáty, které nabízejí průhlednost obrázku, jsou GIF a PNG. Avšak oba formáty mají různé vlastnosti a průhlednost u nich vypadá jinak.

GIF průhlednost PNG průhlednost
GIF PNG

Protože GIF nabízí pouze 256 barev (8 bitů), nemůže nabídnout tak kvalitní vlastnosti průhlednosti, jako PNG, který umožňuje průhlednost o hloubce 8 bitů.

Starší prohlížeče, například Internet Explorer 6, průhlednost u PNG nepodporují a často se to řeší pomocí GIF. Jsou zde však možnosti, jak i pro tento prohlížeč vynutit průhlednost u PNG, například:

Optimalizace obrázků

Zvolením vhodného grafického formátu ještě není vyhráno. Pokud jsou obrázky vytvořené v grafickém editoru a nejsou uloženy efektivním způsobem, jejich velikost stále bude zbytečně velká - především díky vloženým komentářům samotného editoru.

Proto je potřeba obrázky ještě dostatečně optimalizovat některým programem (většinou to samy grafické editory nenabízejí), například:

Optimalizace PNG

Nejefektivnějším způsobem, jak optimalizovat PNG obrázky, je využít program PNGGauntlet. Ten nabízí nejvyšší možnou míru "stlačení" velikosti, kterou jsem u různých programů zaznamenal.

JPEGmini nabízí možnost srovnání původní a upravené fotografie
JPEGmini nabízí možnost srovnání původní a upravené fotografie

Optimalizace JPEG

Obrázky ve formátu JPEG je vhodné optimalizovat volbou určité míry komprese. Nejlepší výsledky jsem dosáhl pomocí programu Irfanview a kompresí v rozmezí 75 - 80 %, kdy téměř nebylo možné rozeznat snížení kvality.

Velmi efektivní je také webová služba JPEGmini, která nabízí snížení velikosti fotografií téměř bez ztráty kvality. Při bližním zkoumání jsem však dosáhl stejných a lepších výsledků, než jaké služba nabízí, právě volbou komprese 75 - 80 %.

JPEGmini nabízí možnost srovnání původní a upravené fotografie
JPEGmini nabízí možnost srovnání původní a upravené fotografie

Další možnosti

Pokud na svém webu máte obrázky, které nejsou optimalizované, nemusíte je zdlouhavě stahovat a optimalizovat jednotlivé typy.

Díky rozšíření Google PageSpeed můžete obrázky získat v optimalizované podobě. Stačí si rozšíření nainstalovat do prohlížeče Google Chrome nebo Firefox a provést analýzu svého webu. Tím získáte přehled nejen o stavu vašich obrázků, ale o dalších problematických částech.

Google PageSpeed umožňuje stažemé optimalizovaných obrázků na vašem webu
Google PageSpeed umožňuje stažemé optimalizovaných obrázků na vašem webu

Optimalizace CSS sprites

V prvním díle Jak můžeme zrychlit své webové aplikace? jsem ukázal příklad, jak snížit počet HTTP požadavků spojením obrázků a vytvořením tzv. CSS sprites.

Pro CSS spirtes potřebujete vytvořit obrázek, který bude mít velké rozměry a nebude patřit mezi ty s nejmenší velikostí. Proto je potřeba zvolit:

  • Správný formát,
  • Orientaci obrázku.
Formát obrázku Velikost
PNG32 - horizontální orientace PNG32
Horizontální orientace
4289 B
PNG8 - horizontální orientace PNG8
Horizontální orientace
2306 B
PNG32 - vertikální orientace PNG32
Vertikální orientace
4214 B
PNG8 - vertikální orientace PNG8
Vertikální orientace
2306 B

Jak ukazuje srovnávací tabulka, použitím různých formátů a orientací můžete získat různou velikost obrázků.

V případě použití jednoduchých obrázků ve formě ikon je vhodnější použít formát PNG8 i přes menší počet barev - rozdíl není rozeznatelný a výsledná velikost je téměř 2x nižší.

V případě volby orientace vychází lépe vertikální orientace, tedy do sloupce. Osobně jsem zkoušel vytvořit mnoho optimalizovaných CSS sprites a jak ukazuje tabulka u formátu PNG32, i při použití stejných obrázků získáte výslednou nižší velikost souboru.

Pokračování v dalším článku

V dalším pokračování Jak můžeme zrychlit své webové aplikace? 4. díl pokračuji problematikou snížení objemu přenášených dat formou minimizace HTML kódu a zvýšení rychlosti načtení stránky správným vkládáním externích souborů.


Sdílejte článek



Michal Maňák

Jmenuji se Michal Maňák, jsem Interaction Designer a Digital Product Designer.

Pracuji ve společnosti LMC.