V dnešním článku si povíme něco o tom, jak optimalizovat obrázky pro webové stránky. Celé téma vezmu hezky polopatě a krokově, aby bylo pochopitelné i pro úplné začátečníky. Pojďme do toho.

Proč optimalizovat obrázky pro web?

Může se zdát, že je to jen ztráta času a mnohem více pomůže kešování či jiné optimalizační techniky, o kterých jsem psal dříve. Ovšem v konečném výsledku se hodí optimalizovat každý kousek stránky a jedině tím, že se na nic nevykašlete docílíte bleskových stránek. Proto dnes píši o obrázcích.

Není problém najít weby, kde se optimalizací obrázků dá ušetři i 200 kB. To i v dnešní době rychlého připojení znamená cirka 0.3 sekundy zbytečného stahování a čekání. Některé obrázky se dokonce dají zmenšit i o 40-80 %. A to samozřejmě myslím bezztrátovou kompresi (nerozeznatelné od originálu).

Správný výběr formátu obrázku je samozřejmostí

Hodně lidí ukládá obrázky do špatných formátů a tím ničí jejich kvalitu, což nechceme. Nám jde o zmenšení datové velikosti. Proto se zkuste řídit tím, že

• formát GIF budete používat výhradně pro jednoduché animace
• klasické fotografie a obrázky bohaté na barvy uložíte do JPG
• a pro webové obrázky použijete PNG (je lepší než GIF).

Ještě si dovolím doplnit, že nedoporučuji používat GIF na cokoli jiného než animace. Kvalitní fotky ničí a PNG je téměř ve všem mnohem lepší. Také podporuje průhlednost, má lepší kompresi, více podporovaných barev…

K čemu použít prokládání obrázků a co to znamená

V podstatě jde o filtr, který zařídí, že se obrázek bude načítat postupně z rozmazaného až po ostrý originál. Normálně se obrázky načítají odshora dolů a tak v jeden okamžik vidíte jen část obrázku. Tento filtr (známý také jako progresivní vykreslování) se hodí především u větších fotografií, protože budí dojem, že se fotky načítají rychleji.

Pro web plný wallpaperů se to vcelku hodí. Jestli chcete do obrázku tento filtr vložit, stačí při ukládání v Photoshopu zaškrtnou volbu „Progresivní“.

Jak přes programy optimalizovat své obrázky?

Zde je 5 příkladů jak šikovně uložit a tím optimalizovat obrázky. Počítám, že většina z vás používá Photoshop, nevynechám ani populární freeware GIMP a nakonec odkážu na zautomatizované online nástroje…

Prvně uvedu návod pro Photoshop. Stačí, když kliknete na Uložit pro web a zařízení (klávesová zkratka Alt+Shift+Ctrl+S). V levém horním rohu si zvolte zobrazení dvou fotek vedle sebe (ať vidíte rozdíl oproti originálu). Na pravém horním rohu vyberte formát. Myslete na to, co jsem psal v úvodu o správném výběru. Pod obrázky máte možnost zahlédnout jejich velikost v konkrétním formátu. Pak už jen stačí obrázek uložit.

Pro nenáročné je tu GIMP. V něm použijte volbu Soubor – Exportovat (Shift+Ctrl+E). Vlevo dole v dialogovém okně si rozklikněte možnost „Zvolte typ souboru“ a nechte možnost dle přípony. Nahoru do názvu pak napište za soubor formát, který je pro fotku vhodný (například .jpg) a klikněte na Exportovat. Vyskočí další okno. V něm nechte vše ve výchozím nastavení a hrajte si jen s kvalitou. Já doporučuji hodnotu 80.

Další možností je použití online nástroje Smush.it. Jeho výhodou je, že soubory stačí poslat na server a o víc se starat nemusíte. Nástroj vám poté už jen odešle nazpět optimalizované obrázky. K tomu dodá kolik kB ušetříte a procentuální úsporu. To je výhodné zvláště pokud chcete optimalizovat více obrázků najednou, protože výše uvedené postupy jsou spíše pro budoucí ukládání než návod jak optimalizovat již používané.

Alternativou pak může být nový polský nástroj Kraken. Také zvládá upload více souborů, optimalizuje perfektně a navíc si můžete stáhnout plugin do svého prohlížeče (pro Firefox a Chrome). Poté se stane optimalizace už jen otázkou jednoho kliknutí. Už jen proto ho používám nejraději.

Kategorií samo o sobě je nástroj TinyPNG, protože se specializuje čistě na optimalizaci PNG obrázků pro web. Dopředu musím upozornit, že jako jediný z tohoto seznamu pracuje se ztrátovou kompresí. Ztrátová komprese znamená, že nástroj může snížit barevnou paletu v obrázku a tím zhoršit jeho kvalitu. Například převede váš PNG obrázek na 8-bitový (což je maximálně 256 barev). Ale na 90 % rozdíl nepoznáte a TinyPNG je dobrý pomocník.

Efektivita optimalizace u jednotlivých nástrojů

Asi si říkáte, jaký nástroj zvolit. Já jsem udělal testování a z něj vyplývá, že je to v podstatě jedno. Všechny nástroje jsou si totiž velmi podobné.

V tomto příkladě jde o barevnou fotografii ve formátu JPG, která měla vždy nastavenou hodnotu komprimace na 80 %. Photoshop ji dokázal stlačit na 54,6 kB, GIMP na 52 kB, Smush.it udělal tutéž velikost a Kraken 51,4 kB.

Další příklad (ve formátu PNG) je logo Google. Photoshop vytvořil obrázek o velikosti 8,1 kB, GIMP 7,3 kB, Smush.it totéž jako GIMP a Kraken 7,1 kB. Jestli tedy potřebujete ušetřit každý bajt, zvolte nástroj Kraken.

Jako poslední jsem si uložil logo Rychlost.cz. Na něm ukazuji jak nástroj TinyPNG funguje a díky čemu dokáže snížit velikost. Logo bylo totiž uložené do bitové hloubky 32, i když používá sotva pár barev. To je chyba, protože obsáhlá paleta se do obrázku ukládá pokaždé a nezáleží, zda je plně využita.

I zde platí pravidlo, že nic se nemá přehánět

Setkal jsem se s programem Riot, který optimalizoval fotky příliš a snižoval horizontální a vertikální rozlišení (dpi). Což je to nejhorší, co můžete udělat, protože fotka bude jako z kostek a můžete ji pak klidně zahodit. Snižovat tyto hodnoty má v oblibě i GIMP při exportování, takže pozor. Prvořadá musí být vždy snaha zachovat fotku co nejkvalitnější. Nezapomeňte na to.

Zaměřujte se především na správný výběr formátu, oříznutí zbytečného místa v obrázcích a pokud je to možné, snížení barevné palety.

Pokud máte nějaké dotazy, nebojte se pomocí komentářů zeptat. Rád se věnuji vývoji webu a optimalizovat web na výkon se mi zdá být smysluplná, uspokojující a zábavná práce. A určitě o tom ještě něco napíšu.