Jak na optimalizaci obrázků pro web

Proč optimalizovat obrázky pro web?

Některým tvůrcům webových stránek se optimalizace obrázků a grafiky může jevit jako ztráta času, protože svůj web optimalizují pomocí jiných technik, například kešování. Při celkové optimalizaci webu by se však neměla vynechat žádná z jeho částí, tedy ani optimalizace obrázků. Jedině tak je možné docílit skutečně nejrychlejšího načítání webových stránek.

Správný výběr formátu

Správný výběr formátu pro uložení obrázku je základ. Nejde nám při tom o zmenšení kvality obrázku, ale o zmenšení jeho celkové datové velikosti.

Základní prvidla použití formátů:
  • GIF - tento formát používejte pouze pro jednoduché animace
  • JPG - do tohoto formátu ukládejte klasické fotografie a bohatě barevné obrázky
  • PNG - tento formát použijte na všechny ostatní použité obrázky webu

Prokládání obrázků

Standardní načítání obrázku probíhá postupně odshora dolů, takže jej nevidíte hned v celku, ale vždy jen jeho část, která se již načetla. Nastavení možnosti "prokládání" umožňuje postupné načtení obrázku od rozmazaného, až po ostrý originál. Prokládání (též známé jako progresivní vykreslování) se využívá především u větších fotografií a grafiky, kde budí dojem rychlejšího načítání.

Nastavení progresivního vykreslování ve Photoshopu
Progresivní vykreslování

Jaký software použít pro optimalizaci?

Mezi nejpoužívaněkší programy na úpravu obrázků a grafiky patří jednoznačně Photoshop a též velmi populární freeware GIMP. Pokud nemáte na svém počítači nainstalovaný žádný z těchto programů, nebo alespoň jim podobný, můžete pro optimalizaci využít i neméně kvalitní online nástroje uvedené níže.

Smush.it - jednoduchý online nástroj pro optimalizaci obrázků. Stačí pouze vybrané obrázky nahrát na server a tento nástroj se už postará o zbytek. Po dokončení procesu budete informováni o vekikosti úspory (kB/%) a bude vám vygenerován odkaz pro uložení již otpimalizovaných obrázků.

Kraken - polský online nástroj pro optimalizaci obrázků. Funguje podobně jako Smush.it, bez problémů zvládá upload více souborů a navíc umožňuje i stažení pluginu pro prohlížeče Firefix a Chrome, díky kterému je následná optimalizace otázkou jednoho kliknutí.

TinyPNG - online nástroj pro optimalizaci obrázků ve formátu PNG. Tento nástroj jako jediný z uvedených pracuje se ztrátovou kompresí, což znamená, že může snížit barevnou škálu obrázku a tím tak zhoršit i jeho kvalitu. V 95% optimalizací však rozdíl ani nepoznáte.

Dbejte především na výběr správného formátu, přesné oříznutí obrázku a snažte se o co možná největší snížení barevné palety.

Optimalizace obrázků pro web