Automatická optimalizace obrázků

Optimalizace obrázků jako klíč k rychlému webu

Optimalizace obrázků je klíčovým faktorem pro rychlost webu. Správná optimalizace vám pomůže ušetřit až 80 % datové náročnosti a má na rychlost významný vliv. Rychlost webu zase ovlivňuje všechny klíčové ukazetele úspěšného webu: zlepšuje spokojenost uživatelů, konverzní poměr a pozici stránky ve vyhledávání.

Stejný obrázek se na webu často vyskytuje ve více situacích a velikostech. Pro náhled ve výpisu stačí obrázek v malém rozlišení, při použití na pozadí sekce přes celou obrazovku jsou ale nároky na kvalitu obrázku daleko vyšší. Stejně tak návštěvníci používají k zobrazení webů velkou škálu různých zařízení, od chytrých telefonů, přes tablety, počítače až po chytré televize. Kombinací těchto faktorů vzniká velké množství situací, ve kterých 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ů.

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í 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, webp, png, gif, svg.

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

Aplikace solidpixels automaticky generuje následující náhledy obrázků a používá vždy ten nejvhodnější. V potaz se bere delší strana obrázku, kratší strana je upravená tak, aby byl zachovaný původní poměr stran.

• 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 na zobrazení patřičného náhledu na webu. Akci tedy spouští návštěvník webu. Datová velikost náhledu je již v základu optimalizovaná, aby se uživateli nestahovalo velké množství dat. Běžně dochází k úspoře 50 % až 60 % oproti originálu.

Minifikace obrázků

Pro každý existující náhled obrázku spouští solidpixels minifikaci. Při té dochází ke zmenšení datové velikosti obrázku, aniž by byla ovlivněná obrazová kvalita. Minifikace se pouští každý den pro všechny existující náhledy ve tři hodiny ráno. K minifikaci dochází u souborů typu JPG, PNG a GIF. Třicet dní poté, co dojde k vytvoření minifikované verze obrázku, se smaže jeho původní verze. Díky automatické optimalizaci obrázky zabírají pouze nezbytně nutný prostor. 

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

Před načtením všech dat se místo finálního obrázku zobrazí nejdříve návštěvníkovi zástupná barevná plocha, která odpovídá barevnosti obrázku. Použitím zástupného obrázku se zvyšuje vnímaná rychlost načítání stránky. Návštěvník dostává informaci, že má na místě očekávat obsah, zároveň jeho pozornost neruší žádné animované zástupné prvky.

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

Lazy loading je přístup, který zajistí načtení obrázku až ve chvíli, kdy jej návštěvník potřebuje. Zpravidla je navázaný na scrollování stránkou. V první fázi se načtou pouze obrázky, které jsou třeba k vykreslení první obrazovky webu. Další obrázky se začnou načítat, až když návštěvník posune stránku a obrázek vidí.

Tím se zrychluje načtení stránky a prioritu dostávají prvky, které jsou v danou chvíli nejdůležitější. Minimalizuje se také zátěž serverů a šetří data uživatelů. Velká část návštěvníků stránku nikdy neposune, protože najde informace hned v horní části stránky nebo z webu odejde.

Alternativní popisky obrázku

Při práci s obrázky je vhodné vyplnit alternativní popisky, nebo-li tag alt. Alt popisek je textovou informací o obsahu obrázku a zobrazuje se ve chvíli, kdy z nějakého důvodu není možné obrázek zobrazit, například před načtením obrázku nebo má-li uživatel vypnuté zobrazení obrázků.

Vyplnění alt popisků zároveň ovlivňuje hodnocení webu z pohledu SEO. Vyhledávače nejsou schopné rozpoznat obsah obrázku. Popisek pomáhá robotům obrázek identifikovat a zahrnout do obsahu stránky. To může stránce pomoci při vyhodnocování její relevance a pozice ve vyhledávání.