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 | 4 357 B |
 | GIF (adaptivní) Paleta nabízí 256 barev (188 skutečně využitých) | 4 357 B |
 | GIF Paleta obsahuje 128 barev | 3 714 B |
 | JPEG 25% komprese (75% poměr zachování kvality) | 2 801 B |
 | JPEG Bez komprese | 20 464 B |
 | PNG8 Paleta nabízí 256 barev (188 skutečně využitých) | 1 319 B |
 | PNG24 Paleta nabízí 16,7 milionů barev | 1 292 B |
 | PNG32 Paleta nabízí stejný počet barev jako PNG24 + 8 bitů pro průhlednost | 1 454 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 | 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:
- PNGcrush – PNG
- PNGGauntlet – PNG
- ImageMagick – PNG, JPEG
- IrfanView s pluginy RIOT a PGNOUT – PNG, JPEG
- Linuxová knihovna jpegtran – JPEG
- Webová služba JPEGmini – JPEG
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.
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 %.
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.
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 | 4 289 B |
 | PNG8 Horizontální orientace | 2 306 B |
 | PNG32 Vertikální orientace | 4 214 B |
 | PNG8 Vertikální orientace | 2 306 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ů.
K obrázkom je celkom zaujímavou aplikáciou aj "Yahoo Smush It" (http://www.smushit.com/ysmush.it/). Je to online a tiež vie z obrázkov vyrvať zbytočné bajty. Dá sa tam pekne nahodiť celý adresár obrázkov a po spracovaní ich stiahnuť v archíve.
Inak super séria článkov 🙂 Veľmi užitočné veci. V niektorej ďalšej časti by si sa mohol pozrieť na zub zaoblovaniu rohov elementov. Strašná kopa webov čo vidím v poslednej dobe na to používa obrázky pričom to je zbytočné spomalenie (dnes sa to už dá riešiť takmer bezbolestne cez CSS, poprípade pre staršie IE javascriptom).
Mimochodom k prehliadačom – v poslednej dobe pozorujem že IE 6 prežíva cca s 4% návštevníkov. Osobne som sa už na optimalizáciu preň vykašľal. Tak či tak obsah ľudia vidia a keď chcú mať starý prehliadač tak majú bohužiaľ o pár efektov menej a kúsoček škaredšiu stránku.
Výborný článok, chválim autora! Ja osobne používam na optimalizáciu obrázkov funkciu "Uložiť pre web a zariadenia" v PhotoShop-e. Je tam kopec automatických možností, nastavení typov priehľadnosti, automatická detekcia počtu farieb atď atď. Kto má PS, určite odporúčam využiť túto možnosť – lepšiu optimalizáciu som nedosiahol v nijakom inom programe.
Inak odporúčané využívanie typov obrázkov – plne súhlasím. GIF iba pre animácie, PNG pre všetko, čo slúži na grafiku a keď chceme zdieľať obrázky, tak JPG (predsa to má dosť informácií navyše, takže bez optimalizácie to je síce veľké, ale určite dobré, ak si to medzi sebou posielajú grafici a tak…
hrki: možností použít CSS místo obrázků se budu zabývat v dalším článku (jak jsem psal na konci tohoto) i se způsoby, jak to řešit cross-browser způsobem.
Senky: ano ve Photoshopu je možné pohrát si s obrázky, ale protože si ho nemůže každý dovolit koupit, ukázal jsem možnosti v softwaru, co je zdarma.
Děkuji za komentáře
kedysi som mal problemy s 8bitovymi transparentnymi png obrazkami v IE6
mozno MS urobil nejaku zaplatu na to, ale skor nie
takze pozor na to
IE6 este stale pouziva dost vela uzivatelov, hlavne vo firmach
peter: pokud vím, tak s tím je problém stále. já však doporučuji používat PNG místo GIF kvůli úspoře objemu dat. To, že se ve firmách stále používá IE6 bude "nešvar" trvající ještě dlouho (avšak zastoupení na trhu už je velmi malé) a i přes to značné množství webových subjektů ustupuje od podpory IE6.
Zde se hodí položit otázku, zde ja kvůli jednomu prohlížeči, který se dnes používá hlavně jako firemní prohlížeč pro intranet a jehož zastoupení na trhu je už velmi malé, nutné používat méně vhodný formát. Osobně tvrdím, že určitě ne.