Automatická optimalizace obrázků

Automatická optimalizace obrázků

4 minuty

Optimalizace obrázků je komplexní přístup k práci s obrázky na webu, který vede až k několikanásobně rychlejšímu načítání celého webu. Rychlost načítání webu má zase přímý vliv na obchodní výsledky webu. 

Optimalizace obrázků - klíč k rychlosti webu

Nahrané obrázky se mohou na webu vyskytovat v rozmanitých situacích a velikostech. Mohou být například vložené jako náhledový obrázek na výpisu článků, mohou být umístěné v samotném obsahu, nebo třeba na pozadí sekce jako obrázek přes celou šířku obrazovky. 

Stejně tak jsou zobrazovány na velké škále různých zařízení, od chytrých telefonů, přes phablety, tablety, počítače až po monitory a chytré televize. Kombinací těchto dvou faktorů vzniká velké množství situací, ve které musí obrázek dobře vypadat a přesto se rychle načítat. Aby nebyla příprava obrázků pracná pro tvůrce webu, dochází v solidpixels k automatické optimalizaci rozlišení i datové velikosti všech obrázků.

Ušetřete až 85 % datové náročnosti

1. Limity pro nahrávání obrázků 

Do aplikace solidpixels je možné nahrávat obrázky v maximálním rozlišení 2600 x 2600 pixelů a datové velikosti do 10 MB. Při překročení zmíněných limitů dojde k: 

  • automatickému zmenšení rozměrů obrázku, pokud jedna z jeho stran převyšuje rozměr 2600 pixelů
  • k odmítnutí nahrání souboru na server, pokud přesahuje datovou velikost 10 MB

Podporované formáty pro nahrávání obrázku jsou: *.jpg *.png *.gif *.svg

2. Automatické generování responzivních obrázku

Aplikace solidpixels automaticky generuje následující náhledy obrázků a použije sama vždy ten nejvhodnější. V potaz se přitom bere delší strana obrázku (orientace na šířku či výšku) a přegeneruje se na níže uvedené rozměry. Kratší strana obrázku je upravená tak, aby byl zachovaný původní poměr stran obrázku.

  • 360px
  • 640px
  • 980px
  • 1280px
  • 1920px
  • 2600px
  • originální velikost - používá se pouze při zvětšování obrázku do lightboxu

Náhledy obrázků se negenerují ihned po nahrání, ale až při prvním požadavku (requestu) na zobrazení patřičného náhledu na webu. Akci tedy spouští uživatel - návštěvník webu. Datová velikost náhledu je již v základu optimalizována, aby se uživateli nestahovalo velké množství dat. Běžně dochází k úspoře 50% - 60% oproti originálu. 

3. Minifikace obrázků 

Pro každý existující náhled obrázku spouští solidpixels minifikaci. Při té již nedochází k úpravě rozlišení obrázku, ale ke zmenšení jeho datové velikosti tak, aby byla současně zachovaná obrazová kvalita obrázku. Tento proces se děje jednou denně pro všechny existující náhledy ve tři hodiny ráno. K minifikaci dochází u následujících typů souborů: *.jpg *.png *.gif. Díky tomu obrázky v solidpixels splňují ty nejvyšší nároky moderního webdesignu.

4. Mazání neminifikovaných obrázků 

Třicet dní poté, co dojde k tvorbě minifikované verze obrázku se nenávratně smaže jeho původní neminifikovaný zdroj.

5. Zástupné obrázky zvyšují vnímanou rychlost

Doplnit obsah

6. Postupné načítání obrázků (lazy-loading)

Lazy loading je přístup, který zrychluje načítání webu a minimalizuje zátěž serverů tak, že postupně načítá jednotlivé obrázky na webu až v momentu, kdy je uživatel doopravdy potřebuje. Zpravidla je lazy loading navázaný na skrolování webem. Díky tomu se v první fázi načtou pouze obrázky, které jsou potřeba k vykreslení první obrazovky webu. Další obrázky se načítají až po zaskrolování, nebo se nenačtou vůbec, pokud uživatel na dané stránce neskroluje. 

7. Alternativní popisky obrázku 

Při optimalzaci obrázků je vhodné vyplnit alternativní popisky (tzv. ALT), aby vyhledávače věděli, co každý obrázek obsahuje za infromace a web tak dostal lepší hodnocení z pohledu SEO.

Vyzkoušejte si, co jste se právě naučili