Ako optimalizovať vizuálny content? Kľúčom je správne vybratý kodek

Pokiaľ máte v poriadku základné nastavenia on-page SEO a máte podchytený off-page vrátane linkbuildingu, treba sa zamerať na rýchlosť. Najväčším úskalím pri weboch, s ktorými spolupracujeme, je nadmerná veľkosť obrázkov. Tento problém sa stáva rizikovým pri prehliadaní stránok na mobilnom zariadení. Ako optimalizovať vizuálny content?

Najčastejšie užívatelia surfujú na internete prostredníctvom mobilných zariadení. Pokiaľ k tomu pripočítate nie vždy kvalitné pokrytie signálu, stane sa rýchlosť webu kľúčovou vlastnosťou, ktorá rozhoduje, či návštevník opustí váš web a prejde na optimalizované stránky konkurencie. Základnou príčinou okrem zlej optimalizácie medzipamäte je nulová komprimácia obrázkov. Poďme si predstaviť základné kroky pre rýchlejší web.

Základné techniky: Lazy loading a progresívny JPEG

Nemusíte byť webový profesionál, aby ste si uvedomili, že pokiaľ nahráte na stránku obrázok väčší ako 1 MB, je úplne jasné, že jeho veľkosť bude mať priamy vplyv na rýchlosť načítania webu. Z praxe odporúčame udržiavať obrázky pod 100 kB, testovať ich vykreslenie na mobilných a desktopových zariadeniach a udržiavať responzívnosť webu.

Prvou technikou, ako hromadne znížiť veľkosť obrázkov a zlepšiť rýchlosť ich načítania, je progressive JPEG. Oproti základnému režimu načíta progresívny JPEG iba niektoré obrazové dáta naraz a zvyšok dát načíta postupne do plnej veľkosti. Obrázky do progresívneho JPEG si ľahko exportujete cez freeware aplikácie, napríklad Gimp, ktorý je dostupný ako pre Windows, tak macOS. Potom obrázky nahrajte do svojho redakčného systému v administrácii a zlepšenie rýchlosti otestujte v nástroji Google pre rýchlosť.

Druhou technikou je vpísanie funkcie Lazy loading do kódu vašej stránky. Táto technika vo frontende načíta obrázky až vtedy, keď je to nutné a súvisí to s posunom stránky. Vďaka tomu sa zníži prenos dát pri nahrávaní stránok na minimum. Používateľ ušetrí dáta a pri nízkom pokrytí signálu vám bude vďačný. Menej dôležitý obsah sa načíta až pri interakcii používateľa a JavaScript tretej strany sa postupne odloží. Lazy loading nemusíte používať len na obrázky, „lenivo“ spracovávať môžete tiež iframe a externý obsah, zložitejšie štruktúry DOM a rendering stránky.

Treťou technikou je mať všetky obrázky pod 100 kB aspoň na hlavných stránkach webu. Pokiaľ potrebujete načítať plnú veľkosť obrázkov, vytvorte si galériu, ktorá sa otvorí po rozkliknutí obrázka. Obrázky s nadmernou veľkosťou je však dôležité zároveň načítať z iného servera.

Kompresia fotografií a obrázkov: JPEG alebo PNG?

Jednoducho povedané je JPEG ideálne na fotografie, zvlášť tie bez textu, keď má menší obrazový súbor prednosť pred kvalitou. Pri rovnakej fotografii je totiž JPEG formát výrazne menší ako súbory PNG. Tieto kodeky sú totiž bezstratové a pri procese kompresie nestratíte žiadne dáta. Výsledkom je to, že PNG zachováva jemné detaily v obrázkoch a používa sa obzvlášť na obrázky obsahujúce text. Tento formát sa používa taktiež pri logách kvôli výhode transparentnosti.

Aké je rozuzlenie? JPEG používajte najlepšie pri fotografiách a PNG pri ďalších grafických variantoch, ako sú logá, ikony, bannery, navigačné prvky a obrázky s textom.

Kodek WebP ako svätý grál obrázkov. Ako naň?

Kodeky novej generácie vám pomôžu znížiť veľkosť obrázkov a zrýchliť web. Treba si uvedomiť, že JPEG a PNG formáty sú staré vyše 25 rokov a pre web treba používať formáty hodné 21. storočia. Odporúčame minimálne využiť formát WebP od Googlu, ktorý podporujú všetky nezastarané dostupné prehliadače. Medzi zastarané prehliadače patrí Internet Explorer. Súčasnú podporu prehliadačov kodeku WebP si môžete overiť tu.

Medzi hlavné výhody WebP patrí:

• zníženie veľkosti obrázka oproti JPEG a PNG,
• priehľadnosť, ktorú ponúkal len PNG,
• možnosť animácie, ktorú doposiaľ ponúkal GIF z roku 1989!

Medzi nevýhody nasadenia kodeku WebP patrí:

• nepracuje s obrázkami ako progresívny JPEG,
• môže mierne zaťažiť procesor, ale na statické obrázky to nemá vplyv,
• zvážte jeho používanie pri generovaní obrázkov v reálnom čase.

Pokiaľ si chcete byť stopercentne istí, že sa obrázok načíta používateľovi vždy, dá sa zdvojovať obrázky pomocou skriptu a nechať prehliadač, aby si sám vybral, či načíta kodek WebP alebo JPEG. Ukážka skriptu pre WebP, a zároveň JPEG:

Skript pre nasadenie WebP na vašom webe ponúka tiež samotný Google.

Konvertovať obrázky z JPEG a PNG do WebP môžete cez už spomínaný Gimp, ktorý otvára obrázky vo WebP a zároveň ukladá. Dajte si pozor na to, či váš redakčný systém podporuje nahrávanie obrázkov WebP. Napríklad Wordpress toto neumožňuje. Možno však nainštalovať plugin WebP konvertor, ktorý prevedie JPEG alebo PNG.

Konvertovať obrázky z JPEG a PNG do WebP môžete cez už zmieňovaný Gimp, ktorý otvára obrázky v

Next-gen codec alebo Zosaďme JPEG z trónu 

Aj keď je WebP považovaný za kodek novej generácie, Google ho vytvoril v roku 2010, a preto sa v súčasnej dobe hovorí o nových a efektívnejších kodekoch. Doba pokročila a vývojári z Google experimentujú už s WebP2. A existujú ďalší konkurenti, ktorí majú za cieľ nahradiť formát fotiek a obrázkov v html tagu.

Do bitky o hlavné nahradenie starých formátov okrem WebP sa zapojili:

• HEIC z organizácie MPEG, založený na základe HEVC a dostupný pre iOS,
• AVIF z Aliancie pre otvorené médiá (AOM), dostupné na Chrome a Firefox,
• JPEG XL (JXL) zo skupiny JPEG ako náhrada starého kodeku pre novú generáciu obrázkov,
• WebP2 od Googlu alias experimentálny nástupca formátu WebP.

Aké sú kľúčové výhody nových formátov? Oproti JPEG vedia uložiť dvojnásobok informácií s rovnakou veľkosťou, preto kvalita fotiek môže byť omnoho vyššia.

Pokiaľ máte záujem zrýchliť váš web a nasadiť nové formáty obrázkov, kontaktujte Effectix.

Porovnanie kompresie a rýchlosti obrázkových kodekov

Poďme si porovnať kompresiu nových a zastaraných formátov obrázkov. WebP2 zatiaľ neporovnávame, lebo kodek ešte nie je finálne hotový. Pri nových formátoch je potrebné celkovo počítať s pôrodnými bolesťami, napríklad JPEG XL má len pár mesiacov.

Na nasledujúcom grafe sú znázornené kodeky, ako si poradia s kompresiou obrázkov a rýchlosťou načítania. Čím vyššia je hodnota, tým vyššia je kompresia a rýchlosť obrázkov.

Podpora animácie, HDR, vyššia bitová hĺbka obrázkov

Nové kodeky majú zároveň bohatšie vlastnosti než staré kodeky. Priblížme si niektoré z nich:

• Bitová hĺbka a farebný gamut. Prvou nevýhodou je len 8-bitová hĺbka pri JPEG a WebP. 8 bitov stačí na SDR (štandardný dynamický rozsah) a obmedzený farebný gamut (napríklad sRGB). Žijeme už ale v dobe obrázkov s HDR (vysoký dynamický rozsah) a širokým rozsahom gamutu (napríklad Adobe RGB), na ktoré je potrebná minimálne 10-bitová presnosť. Vyše 10 bitov ponúka PNG, HEIC a AVIF. 32-bitovú presnosť ponúka JXL.
• Neodporúčame GIF, keďže má množstvo obmedzení a zlú kompresiu. Všeobecne odporúčame používať kodeky pre video (napríklad HEVC a AV1). Avšak dajú sa vytvárať aj animácie v APNG, MJPEG alebo JXL.
• Progresívne kódovanie alebo čiastočné načítanie obrázkov zlepšuje user experience. Dokáže zobraziť obrázok na webe už v 15 kB! Nemusíte tak čakať na zobrazenie stránky až po načítaní všetkých obrázkov v nezmyselných veľkostiach. Podporuje kodeky JPEG, JPEG2000, WebP a JXL.
• Transparentnosť podporuje nielen PNG, ale aj ďalšie kodeky, ako je WebP alebo JXL.

Záver

Súčasná skúsenosť ukazuje, že univerzálnym kodekom sa stane ten, ktorý používa najväčšie percento populácie. Tým je v súčasnosti zastaraný JPEG. Nahradiť ho môže už 10-ročný WebP vďaka súčasnej podpore všetkých prehliadačov. Pokiaľ však chcete byť progresívni, uprednostnite najnovšie kodeky – a to sú JXL, AVIF alebo WebP2. Môžete sa tešiť z výhody silnejšej kompresie, na vyššiu vernosť obrazu a presnosť farebného podania, čo sa premietne do podmanivejšieho a rýchlejšieho načítania obrázkov. Odporúčame si pri najnovších kodekoch prečítať ich dokumentáciu, zistiť, ako ich aplikovať na web, a poradiť sa s vaším programátorom.