Jak optimalizovat vizuální content? Klíčem je správně vybraný kodek

Pakliže máte v pořádku základní nastavení on-page SEO a máte podchycený off-page včetně linkbuildingu, je potřeba se zaměřit na rychlost. Největším úskalím u webů, se kterými spolupracujeme, je nadměrná velikost obrázků. Tento problém se stává rizikovým při prohlížení stránek na mobilním zařízení. Jak optimalizovat vizuální content? 

Nejčastěji uživatelé brouzdají na internetu prostřednictvím mobilních zařízení. Pokud k tomu přičtete ne vždy kvalitní pokrytí signálu, stane se rychlost webu klíčovou vlastností, která rozhoduje, jestli návštěvník opustí váš web a přejde na optimalizované stránky konkurence. Základní příčinou vedle špatné optimalizace mezipaměti je nulová komprimace obrázků. Pojďme si představit základní kroky k rychlejšímu webu.

Základní techniky: Lazy loading a progresivní JPEG

Není potřeba žádného webového profesionála, abyste si uvědomili, že pokud nahrajete na stránku obrázek přes 1 MB, tak je zcela jasné, že jeho velikost bude mít přímý vliv na rychlost načítání webu. Z praxe doporučujeme udržovat obrázky pod 100 kB, testovat jejich vykreslení na mobilních a desktopových zařízení, a udržovat responsibilitu webu.

První technikou, jak hromadně snížit velikost obrázků a zlepšit jejich rychlost načítání, je progressive JPEG. Oproti základnímu režimu načítá progresivní JPEG pouze některá obrazová data najednou a zbytek dat načítá postupně do plné velikosti. Obrázky do progresivního JPEGu si snadno exportujete přes freeware aplikace, například Gimp, který je dostupný jak pro Windows, tak macOS. Poté obrázky nahrajte do svého redakčního systému v administraci a zlepšení rychlosti otestujte v nástroji Google pro rychlost.

Druhou technikou je vepsání funkce Lazy loading do kódu vaší stránky. Tato technika ve frontendu načítá obrázky až tehdy pokud je to nutné a souvisí s posunem stránky. Díky tomu se sníží přenos dat při nahrávání stránek na minimum. Uživatel ušetří data a při nízkém pokrytí signálu vám bude vděčný. Méně důležitý obsah se načte až při interakci uživatele a JavaScript třetí strany se postupně odloží. Lazy loading nemusíte používat jen na obrázky, líně zpracovávat můžete také iframe a externí obsah, složitější struktury DOM a rendering stránky.

Třetí technikou je mít všechny obrázky pod 100 kB alespoň na hlavních stránkách webu. Pokud potřebujete načítat plnou velikost obrázků, vytvořte si galerii, která se otevře po rozkliknutí obrázku. Obrázky s vysokou velikostí je však důležité zároveň načítat z jiného serveru. 

Komprese fotografií a obrázků: JPEG, nebo PNG?

Jednoduše řečeno je JPEG ideálně pro fotografie, zejména ty bez textu, když má menší obrazový soubor přednost před kvalitou. Při stejné fotografii je totiž JPEG výrazně menší než soubory PNG. Tyto kodeky jsou totiž bezztrátové a při procesu komprese neztratíte žádná data. Výsledkem je to, že PNG zachovává jemné detaily v obrázcích a používá se zejména na obrázky obsahující text. Tento formát se používá také pro loga kvůli výhody transparentnosti.

Jaké je rozuzlení? JPEG ideálně používejte pro fotografie a PNG pro další grafické varianty, jako jsou loga, ikony, bannery, navigační prvky a obrázky s textem.

Kodek WebP jako svatý grál obrázků. Jak na něj?

Kodeky nové generace vám pomohou snížit velikost obrázků a zrychlit web. Je potřeba si uvědomit, že JPEG a PNG formáty jsou staré přes 25 let a pro web je potřeba používat formáty hodné 21. století. Doporučujeme minimálně využít formát WebP od Googlu, který podporují všechny nezastaralé dostupné prohlížeče. Mezi zastaralé prohlížeče patří Internet Explorer. Současnou podporu prohlížečů kodeku WebP můžete zjistit zde.

Mezi hlavní výhody WebP patří:

• snížení velikosti obrázku oproti JPEG a PNG,
• průhlednost, kterou nabízel jen PNG,
• možnost animace, jíž doposud nabízel GIF z roku 1989!

Mezi nevýhody nasazení kodeku WebP patří:

• nepracuje s obrázky jako progresivní JPEG,
• může mírně zatížit procesor, ale na statické obrázky to nemá vliv,
• zvažte jeho používání při generování obrázků v reálném čase.

Pokud si chcete být stoprocentně jistí, že se obrázek načte uživateli vždy, lze zdvojovat obrázky pomocí skriptu a nechat prohlížeč, ať si sám vybere, jestli načte kodek WebP nebo JPEG. Ukázka skriptu pro WebP a zároveň JPEG:

Skript pro nasazení WebP na vašem webu nabízí také samotný Google.

Konvertovat obrázky z JPEG a PNG do WebP můžete přes již zmiňovaný Gimp, který otevírá obrázky ve WebP a zároveň ukládá. Dejte si pozor na to, jestli váš redakční systém podporuje nahrávání obrázků WebP. Například Wordpress toto neumožňuje. Lze však nainstalovat plugin WebP konvertor, který převede JPEG nebo PNG. 

Next-gen codec aneb Sesaďme JPEG z trůnu 

Ačkoliv je WebP považován za kodek nové generace, Google jej vytvořil v roce 2010 a proto se v současné době mluví o nových a efektivnějších kodecích. Doba se tak posunula, vývojáři z Google experimentují s WebP2. A existují zde další konkurenti, kteří mají za cíl nahradit formát fotek a obrázků v html tagu .

Do bitvy o hlavní nahrazení starých formátů, kromě WebP se zapojili:

• HEIC z organizace MPEG, založen na základě HEVC a dostupný pro iOS,
• AVIF z Aliance pro otevřená média (AOM), dostupné na Chrome a Firefox,
• JPEG XL (JXL) ze skupiny JPEG jakožto náhrada starého kodeku pro novou generaci obrázků,
• WebP2 od Googlu alias experimentální nástupce formátu WebP. 

Jaké jsou klíčové výhody nových formátů? Oproti JPEG umí uložit dvojnásobek informací o stejné velikosti, proto kvalita fotek může být mnohem vyšší. 

“Pokud máte zájem zrychlit váš web a nasadit nové formáty obrázků, kontaktujte Effectix.”

Porovnání komprese a rychlosti obrázkových kodeků

Pojďme si porovnat kompresi nových a zastaralých formátů obrázků. WebP2 zatím neporovnáváme, jelikož kodek ještě není finalizován. U nových formátů je potřeba celkově počítat s porodními bolestmi, například JPEG XL je teprve pár měsíců starý.

Na následujícím grafu jsou znázorněny kodeky, jak si vedou v kompresi obrázků a rychlosti načtení. Čím vyšší je hodnota, tím vyšší je komprese a rychlost obrázků.

Podpora animace, HDR, vyšší bitová hloubka obrázků

Nové kodeky mají zároveň bohatší vlastnosti než staré kodeky. Přibližme si některé z nich:

• Bitová hloubka a barevný gamut. První nevýhodou je jen 8bitová hloubka u JPEG a WebP. 8 bitů stačí pro SDR (standardní dynamický rozsah) a omezený barevný gamut (například sRGB). Žijeme již ale v době obrázků s HDR (vysoký dynamický rozsah) a širokým rozsahem gamutu (například Adobe RGB), na které je potřeba minimálně 10bitová přesnost. Přes 10 bitů nabízí PNG, HEIC a AVIF. 32bitovou přesnost nabízí JXL.
• Nedoporučujeme GIF, jelikož má vysoké omezení a špatnou kompresi. Obecně doporučujeme používat kodeky pro video (například HEVC a AV1). Ale ano, lze vytvářet animace v APNG, MJPEG nebo JXL.
• Progresivní kódování aneb částečné načítání obrázků zlepšuje user experience. Dokáže zobrazit obrázek na webu již v 15 kB! Nemusíte tak čekat na zobrazení stránky až po načtení všech obrázků v nesmyslných velikostech. Podporuje kodeky JPEG, JPEG2000, WebP a JXL.
• Transparentnost podporuje nejen PNG, ale i další kodeky – jako je WebP nebo JXL.

Závěr

Současná zkušenost ukazuje, že univerzálním kodekem se stane ten, který používá největší procento populace. Tím je v současnosti zastaralý JPEG. Nahradit jej může již 10 let starý WebP díky současné podpoře všech prohlížečů. Pokud však chcete být progresivní, upřednostněte nejnovější kodeky – a to jsou JXL, AVIF, nebo WebP2. Můžete se těšit z výhod silnější komprese, vyšší věrnosti obrazu a přesnosti barevného podání, což se promítne do podmanivějších a rychlejších načítání obrázků. Doporučujeme si u nejnovějších kodeků přečíst jejich dokumentaci a zjistit jak jej aplikovat na web a poradit se s vaším programátorem.