Navigace

Optimalizace fotek a obrázků

Proč záleží na velikosti fotek? Velikost obrázků na webu významným způsobem ovlivňuje rychlost načtení webu - tedy primárně datovou náročnost. Z vlastní zkušeností víme, že mnoho uživatelů, kteří…

Proč záleží na velikosti fotek?

Velikost obrázků na webu významným způsobem ovlivňuje rychlost načtení webu – tedy primárně datovou náročnost.

Z vlastní zkušeností víme, že mnoho uživatelů, kteří si sami přes redakční systém spravují web na velikost obrázků moc neberou ohled.

Nejvíce tím trpí sekce referencí, kde běžně nahrávají surová data z fotoaparátů – tedy často fotky o velikosti i 7 – 10MB. Prohlížení takové galerie na mobilu může stát návtěvníka webu i poměrně zásadní část jeho datového limitu – nemluvě o tom, že se taková galerie bude načítat neúměrně dlouho.

Cestou ke snížení datové náročnosti je jak zmenšení obrázku (tedy jeho fyzických rozměrů). Tak i patřičná komprese.

Pokud si nejste jisti, jestli má smysl se ve vašem případě zabývat zmenšováním a kompresí obrázků, vyzkoušejte nástroj od Googlu – Google PageSpeed Insights, ve kterém si jednodouše ověříte jak na tom je s rychlostí načítání právě váš web.

Nástroj vám dokonce vypíše, které obrázky by doporučoval optimalizovat.

Jak zmenšit fotky a obrázky?

Pro hromadné zmenšení obrázků lze využít například těchto programů:

Zmenšení obrázků ještě před nahráváním na web sníží i objem dat, který budete muset na web nahrát, proto bude plnění webu rychlejší.

Zmenšením to nekončí přichází komprese!

Kromě samotného zmenšení je vhodné fotky hromadně zpracovat kompresním programem, který při zachování kvality – nebo při velmi mírném zhoršení kvality, zmenší velikost obrázků klidně i o dalších 80%.

K tomu lze využít i bezplatných služeb dostupných online. My rádi používáme tyto služby:

Ukažme si rozdíl při použití nástroje TINYPNG, který lze použít pro fotky do 5MB zcela zdarma.

Před kompresí (velikost souboru 1.5MB)

Po kompresi (velikost souboru 188.6 KB) úspora 87%

Jak vidíte na první pohled není komprese při takto velké fotce prakticky vůbec znatelná. V rychlosti načítání fotky o velikosti 1.5MB a 189KB je přitom sakra velký rozdíl. Obzvláště na pomalejších mobilních připojeních 3G o EDGE v pražském metru ani nemluvě může být tento rozdíl rozhodujícím faktorem pro to jestli si uživatel váš web načte nebo odejde jinam.

Data se samozřejmě jen tak někam nevypaří. Komprese se někde projevila. V našem případě se projeví až při detailním zkoumání fotky a to při několikanásobném zvětšení.

Stále byste významnou ztrátu kvality fotky hledali jen těžko a pokud rozdíl najdete tak je to spíš tím, že se chybu snažíme skutečně hledat a především že máme srovnání s původní fotkou.

Tady je už viditelná ztráta kvality u zelené stužky na dortu, kde je vidět mírné rozkostičkování a rozostřední obrázu. Stále se ale nejedná o nic trafického.

Je přitom velmi nepravděpodobné, že by uživatel webu takto detailně zkoumal fotografie. Obzvlášť u fotek v e-shopech či fotek realizací či referencí je taková komprese s naprosto zanedbatelnou ztrátou kvality velmi důležitá.

Zavřít