Obrázky ve formátu WebP

Na většině webů, které dostávám k auditu, tvoří obrázky sedmdesát až pětaosmdesát procent přenesených dat. Změna formátu a rozměrů je nejlevnější zrychlení, jaké existuje, protože nesahá na kód ani na design.

Proč JPEG na dnešním webu prohrává

JPEG vznikl v roce 1992 a na svou dobu je to skvělá práce. Problém je, že jeho kompresi navrhovali pro tehdejší procesory a tehdejší modemy. WebP přišel v roce 2010, AVIF v roce 2019 a oba stojí na postupech z videokodeků. Při stejné vnímané kvalitě přenesou o třicet až padesát procent méně dat.

Argument o podpoře prohlížečů už neplatí. WebP umí Safari od verze čtrnáct, tedy od roku 2020, AVIF od verze šestnáct celá čtyři z roku 2023. V českém provozu dnes WebP zvládne přes sedmadevadesát procent návštěvníků a AVIF kolem čtyřiadevadesáti. Zbytek dostane přes prvek picture normální JPEG a nic nepozná.

V auditech vidím pořád stejné číslo. U webu truhlářství s galerií realizací to byly čtyři celé jedna megabajtu na jedné stránce, z toho tři celé šest ve fotkách. Po převodu a zmenšení rozměrů zbylo šest set kilobajtů a nikdo z klientů si nikdy nestěžoval na kvalitu.

WebP proti AVIF: kdy sáhnout po kterém

WebP je bezpečná volba pro všechno. Komprimuje rychle, podporu má prakticky všude a rozdíl proti JPEG poznáte hned na velikosti souboru. AVIF komprimuje ještě lépe, hlavně u fotek s velkými plochami jedné barvy, ale kódování trvá násobně déle a u některých motivů rozmazává jemné detaily.

Praktické pravidlo, které používám. Fotografie a hero obrázky dávám do AVIF s WebP jako záložní variantou. Produktové fotky s jemnou strukturou, tedy textil, sklo nebo šperky, dávám do WebP s vyšší kvalitou. Loga, ikony a schémata patří do SVG, protože se škálují bez ztráty a váží kilobajty.

Prvek picture umí obsloužit všechny varianty najednou. Uvnitř dáte zdroj s typem avif, pak zdroj s typem webp a jako poslední klasický obrázek. Prohlížeč si vezme první formát, kterému rozumí. Žádný skript, žádná detekce na serveru, jen o tři řádky víc v šabloně.

Kde je hranice kvality, kterou zákazník nepozná

Kvalita se u ztrátových formátů udává v číslech, ale stupnice nejsou mezi formáty srovnatelné. U WebP je rozumné pásmo sedmdesát pět až osmdesát dva. Nad osmdesát pět rostou data rychleji než viditelná kvalita. U AVIF odpovídá stejný dojem hodnotě padesát pět až šedesát, protože jeho stupnice funguje jinak.

Existují motivy, kde musíte přitlačit. Sklo, kov, vlasy, jemné přechody na obloze a textil s viditelnou vazbou. U e-shopu se skleněnými vázami jsem musel jít u WebP na osmdesát osm, protože při osmdesáti se na hranách objevovaly nepříjemné čtverečky. Rozdíl ve velikosti byl čtyřicet kilobajtů, rozdíl v dojmu podstatný.

Kontrolu dělám vždycky na dvou zařízeních a ve dvou velikostech. Notebook s retina displejem a běžný mobil. Pokud rozdíl nevidím ani na jednom ze čtyřiceti centimetrů, kvalita je dost vysoká. Zákazník si obrázek nebude prohlížet lupou, ale rozmazaný produkt v e-shopu pozná okamžitě, a to stojí objednávky.

Jak převádět dávkově, i když neumíte programovat

Na jednorázový převod padesáti fotek stačí Squoosh v prohlížeči. Přetáhnete soubor, vyberete formát, posunete kvalitu a vidíte porovnání vedle sebe i výslednou velikost. Na stovky souborů to ale nedělejte ručně. Dávkový převod z příkazové řádky zvládne stejnou práci za minutu a výsledky jsou konzistentní.

Ať zvolíte cokoli, originály si nechte. Ukládám je do složky mimo web, aby se z nich dalo kdykoli vygenerovat jiné rozlišení nebo formát. Přepsat originál komprimovanou verzí je chyba, kterou zjistíte až za dva roky, když bude klient chtít fotku do tištěného katalogu a v archivu bude šest set kilobajtů.

U nových webů řeším převod v procesu nasazení. Grafik nahraje fotku v plné velikosti, build z ní udělá pět rozměrů ve dvou formátech a šablona je poskládá do prvku picture. Klient tak nemůže omylem nahrát fotku rovnou z fotoaparátu do galerie a rozbít tím rychlost celé stránky.

• Squoosh v prohlížeči, když jde o pár obrázků a chcete vidět rozdíl
• cwebp a avifenc z příkazové řádky pro dávky stovek souborů
• sharp v Node.js, když převod potřebujete zapojit do buildu
• ImageMagick pro hromadné zmenšení rozměrů a ořez v jednom kroku
• plugin ShortPixel nebo Imagify, pokud web běží na WordPressu
• automatická konverze na straně hostingu u Vercelu nebo Cloudflare

Rozměry porazí formát

Nejčastější chyba není špatný formát, ale zbytečně velké rozlišení. Fotka o šířce čtyři tisíce pixelů vložená do slotu širokého šest set pixelů se v prohlížeči zmenší, ale stáhne se celá. Samotné zmenšení na dvojnásobek zobrazované šířky ušetří víc dat než převod formátu. Když uděláte obojí, dostanete se na desetinu původní váhy.

Atributy srcset a sizes zajistí, že si mobil stáhne malou verzi a desktop velkou. Zápis vypadá složitě, ale je to jednorázová práce v šabloně. Bez nich posíláte mobilnímu návštěvníkovi stejná data jako uživateli velkého monitoru, což je u fotogalerie rozdíl několika megabajtů na jedno načtení.

Retina displeje řeším násobkem dvě, ne třemi. Rozdíl mezi dvojnásobkem a trojnásobkem lidské oko na telefonu nerozliší, ale objem dat naroste o dalších padesát procent. Strop na dvojnásobku je kompromis, který v praxi nikdo nereklamoval, a přitom šetří na každém načtení stovky kilobajtů.

• náhled ve výpisu produktů maximálně čtyři sta pixelů na šířku
• detail produktu tisíc dvě stě pixelů, u šperků a textilu šestnáct set
• hero obrázek ve dvou sadách, dvanáct set pro mobil a dva tisíce čtyři sta pro desktop
• fotky v článcích osm set až tisíc pixelů podle šířky textového sloupce
• logo a ikony ve formátu SVG bez ohledu na velikost
• žádný obrázek nad tři tisíce pixelů, pokud nejde o galerii fotografa

Kolik to stojí a co se vrátí

Jednorázová optimalizace obrázků na existujícím webu do sta fotek vychází od dvou tisíc devíti set korun. Zahrnuje převod, zmenšení rozměrů, nasazení prvku picture a měření před a po. U e-shopu s pěti sty položkami počítám od šesti tisíc devíti set, protože je potřeba upravit i šablonu výpisu a detailu.

Návratnost se dá spočítat. Když se stránka načte o vteřinu rychleji, konverzní poměr obvykle stoupne o jednotky procent. U e-shopu s obratem dvě stě tisíc měsíčně to dělá tisíce korun. U firemního webu s deseti poptávkami měsíčně je efekt menší, ale stále reálný, protože z mobilu odejde míň lidí.

U nového webu se tohle neúčtuje zvlášť. Web od devatenácti tisíc devíti set devadesáti korun má převod, srcset i odložené načítání zabudované od začátku a dodávám ho do sedmi dnů. Doplácet optimalizaci na starém webu se vyplatí jen tehdy, když je zbytek webu technicky v pořádku.

Časté otázky

Zhorší se kvalita fotek, když přejdu na WebP?

Při rozumném nastavení ne. Pásmo kvality sedmdesát pět až osmdesát dva vypadá na monitoru i na mobilu prakticky stejně jako původní JPEG, ale soubor je o třetinu až polovinu menší. Opatrnost si zaslouží sklo, kov, textil a jemné přechody, kde jdu na osmdesát pět až osmdesát osm. Výsledek vždy zkontrolujte na dvou zařízeních.

Musím dělat AVIF, když už mám WebP?

Nemusíte. WebP pokrývá přes sedmadevadesát procent návštěvníků a proti JPEG už ušetří většinu dat. AVIF přidá dalších dvacet až třicet procent úspory, hlavně u velkých fotografií, ale kódování trvá déle a musíte řešit záložní variantu. Nasazuji ho tam, kde jsou obrázky hlavním obsahem, tedy u fotografů, galerií a hotelů.

Zvládne převod plugin ve WordPressu, nebo to musí dělat vývojář?

Plugin jako ShortPixel nebo Imagify převede knihovnu médií dávkově a doručí správný formát podle prohlížeče. Nevyřeší ale zbytečně velké rozměry v šabloně ani chybějící srcset. Když se řeší jen formát a fotka má pořád čtyři tisíce pixelů na šířku, ušetříte zhruba polovinu z toho, co jste ušetřit mohli. Rozměry patří do šablony.