Internetové obchody a webové portály poskytují návštěvníkům velké množství obrázků (např. produktů). Věděli jste, že některé e-shopy mohou na serveru ukládat desítky až stovky tisíc obrázků? Tento počet navíc není konečný.
Obrázky na serveru musí být zachovány v původní kvalitě (nebo její rozumné formě) a navíc musí být zobrazeny ve více než 10 rozměrech (velikostech v pixelech). Velikost obrázků se liší právě proto, že se zobrazují na různých místech e-shopu/portálu.
Právě jejich automatická optimalizace ušetří obrovské množství manuální práce a zajistí lepší výsledky v Google PageSpeed Insights a nárůst návštěvnosti z Image Search (obrázkového vyhledávání).
Obrázky produktů jsou zobrazovány v různých rozměrech:
- na hlavní stránce
- ve výsuvném košíku a výsledcích vyhledávání
- v akční nabídce
- v kategorii produktů
- jako hlavní obrázek na stránce detailu produktu a v seznamu jeho obrázků
- v běžném košíku a pokladně
- v objednávkovém e-mailu a ve správě účtu zákazníka.
Zobrazují se také na různých místech administračního rozhraní, například v seznamu produktů, při úpravách produktů, v detailu objednávky nebo ve statistikách prodeje.
Používání obrázků na webu
Jak se obrázky dostanou do vašeho e-shopu nebo na webové stránky? Jednoduše nahráním od uživatele nebo externí službou. Co všechno se ale na těchto snímcích přenáší a jak je správně konvertovat?
Obrázky se na webových stránkách nepoužívají v původní podobě nahrané uživatelem nebo externí službou, tj. ve formátu, rozlišení nebo metadatech, jako jsou EXIF a ICC profil obrázků.
Hlavním důvodem pro konvertování obrázků je snad základní očekávání každého zákazníka – rychlé načítání stránky. Představíme vám základní kroky, jak konvertovat obrázky.
Důvody pro konverzi obrázků
Důvodů pro konverzi obrázků je několik:
- poskytnutí různých formátů a rozlišení,
- sjednocení formátu a použití vhodného formátu pro webové stránky,
- omezení maximálního rozlišení,
- odstranění soukromých metadat,
- odstranění nepotřebného nebo škodlivého kódu.
Zmenšení velikosti obrázků
Zmenšení velikosti obrázků (jejich datového objemu v kB) nejen sníží přenos dat, což ocení zejména mobilní uživatelé, ale také sníží nároky na úložný prostor v prohlížeči a na serveru. Zmenšení velikosti však není na úkor vizuální kvality snímků.
Hlavním důvodem je zrychlení načítání webových stránek z důvodu snížení velikosti obrázků – a to s minimálním snížením vizuální kvality obrázků. Dalším důsledkem je nižší přenos (významný hlavně při mobilním připojení) a snížení požadavků na ukládací prostor prohlížeče.
Prohlížeč ale není jediný prvek, který ukládá (cachuje) statické soubory. Rovněž může docházet k dočasnému ukládání na proxy serverech, které slouží pro zrychlení webových stránek a snížení zátěže tzv. backend serverů.
Jak vypadá konvertování obrázků v praxi?
JPEG je oblíbený ztrátový neboli již komprimovaný formát obrázků. Základní změnou je převod formátu JPEG do nového formátu WebP, kde můžeme převodem obrázku při zachování rozlišení a odstranění metadat dosáhnout až 80% zmenšení velikosti. Standardní 12 Mpx fotografie JPEG o velikosti přibližně 1 MB se tak zmenší na 400 až 200 kB snížením rozlišení na 1024×768, což je stále standardní rozlišení pro větší obrázky.
V rámci webových stránek můžeme zmenšit obrázek na 1/10 jeho původní velikosti (100 kB) s minimálním dopadem na výslednou vizuální kvalitu.
Při procházení webu je to významný rozdíl, zejména pokud se jedná o e-shop, kde jsou desítky tisíc produktů, a tedy i stovky tisíc obrázků.
Originál JPEG 12 M, 694 Kb vlevo, výsledek konverze na WEBP, 162 Kb vpravo.
Pozn.: obrázek vložený jako PNG screenshot.
Často používaná (neoptimální) konverze na disku
Konverze původních obrázků může proběhnout ihned po jejich nahrání, tj. během nahrávání se originály uloží pouze do dočasného úložiště, odkud se převedou a uloží do cloudového úložiště na serveru. Nároky na úložný prostor by však byly stále značné, protože každá verze (z hlediska formátu a rozlišení) by musela být uložena na serveru.
Pokud bychom chtěli provést globální změnu pro stávající formát nebo rozlišení (nebo přidat nový formát), museli by se vygenerovat obrázky pro všechny originály – změna by navíc nebyla okamžitá a stála by mnoho času a peněz.
Nároky na úložný prostor vždy ještě znásobuje nutnost zálohování a zpětná historie jednotlivých verzí (často i několik let, v závislosti na firemní politice).
Zde se dostáváme k možnosti dynamického konvertování, o kterém je tento článek.
Automatické dynamické konvertování obrázků
Dynamické konvertování probíhá dle požadavku prohlížeče. Požadovaný formát a rozlišení je přímo součást HTTPS requestu ať už URL, hlaviček nebo GET parametrů. Konvertování probíhá až v tomto momentě „on the fly“, což přidává velké možnosti flexibility z pohledu aplikace, rychlosti změny či možnosti poskytnout optimální formát a rozlišení pro konkrétního návštěvníka. Zároveň se na cloudovém úložišti na serveru neukládá nic jiného než původní obrázek (který se nemění).
Samozřejmě, pouze generovat obrázky na serveru při každém požadavku od klienta by bylo velmi neefektivní, a navíc by to způsobilo pomalejší načítání stránek. U uživatele, který opakovaně zobrazuje stejný obrázek, je tento problém řešen již na straně prohlížeče (který ukládá statický obsah včetně obrázků do mezipaměti). Proto je opakované načítání velmi rychlé. Stejný princip aplikujeme na straně serverů použitím image proxy serveru, který zároveň poskytuje ukládání do mezipaměti. To znamená, že je konvertován pouze první požadavek na specifický obrázek s daným rozlišením a formátem. Všechny následující požadavky již poskytne proxy cache server z jeho rychlé mezipaměti.
Efektivní využití rychlé cache
Cache na serveru umožňuje výrazně snížit počet požadavků na backend server a zároveň zvýšit rychlost stránek při využití dynamického konvertování obrázků. První požadavek uloží obrázek do cache na image proxy serveru a nemusí pocházet od běžného uživatele (může jej provést již administrátor během úprav stránek nebo automatizovaný bot).
Více backend serverů samozřejmě stále musí zvládnout velké množství paralelních požadavků bez výraznějšího zpomalení (pro případ rozsáhlé změny v rámci některé stránky nebo výpadku cache na image proxy serveru).
Doba, na kterou se obrázky ukládají do cache na image proxy serverech, je obvykle nastavena fixně (podobně jako pro cache prohlížeče) pomocí expire hlavičky. Rovněž je limitována dostupným prostorem, tzn. při absenci volného prostoru se obrázky, které nebyly nejdéle použity, odstraní „LRU cache“. Obrázek v rámci cache image proxy serveru je unikátně identifikován na základě jeho URL adresy.
Pozn.: Originál JPEG je baseline, všechny ostatní mají odstraněná metadata, zvýšenou kompresi +20 % a jsou to progresivní JPEG, kromě označených jako formát WebP.
Originál JPEG
Konvertované JPEG
Formát WebP
