Minulý týden jsem narazil na web, jehož hlavní stránka nabízela jedinou fotografii: šálek kávy na dřevěném stole. Obrázek měl několik megabajtů, načítal se postupně a káva se objevila až ve chvíli, kdy by si člověk stihl uvařit vlastní. Přitom šlo o fotografii, která mohla po správné úpravě vypadat úplně stejně a zabírat jen zlomek původního prostoru.
Obrázky patří mezi nejčastější důvody, proč se web načítá pomalu. Ne proto, že by fotografie byly z principu problém. Potíž obvykle spočívá v tom, že na stránku dorazí soubor připravený pro tisk, přestože se zobrazí v malém obdélníku širokém několik set pixelů. Je to podobné, jako kdybyste posílali stěhovací vůz kvůli jednomu květináči.
Začněte správnými rozměry
Největší úspora často nevznikne volbou exotického formátu, ale obyčejným zmenšením obrázku. Jestliže se fotografie na stránce zobrazí v šířce 800 pixelů, nemá velký smysl nahrávat soubor široký 5000 pixelů. Prohlížeč ho sice zmenší, ale data musí nejdřív stáhnout. Internet se přitom nezajímá, že jste chtěli být připraveni na všechno.
Před exportem proto zjistěte, jak velký obrázek skutečně potřebujete. U běžných obsahových fotografií stačí připravit variantu odpovídající největšímu zamýšlenému zobrazení. U obrázků přes celou šířku obrazovky může být rozumné zachovat větší rozměr, u náhledů naopak není důvod plýtvat pixely.
Důležitý je také poměr stran. Když fotografie na stránce zabírá obdélník 4 : 3, ale zdrojový soubor má širokoúhlý formát, prohlížeč může načíst obrazovou plochu, z níž se část nakonec ořízne. Ořez předem nejen zpřesní výsledek, ale zmenší i množství přenášených dat.
JPEG, WebP nebo AVIF?
JPEG zůstává praktickou volbou pro fotografie s mnoha barvami, přechody a jemnými detaily. Výchozí nastavení kolem 75 procent obvykle nabízí použitelný poměr mezi velikostí souboru a vizuální kvalitou. Není to magické číslo vytesané do kamene, spíš dobrý bod, od kterého se vyplatí začít a výsledek si prohlédnout.
WebP dokáže být přibližně o 25 až 35 procent menší než vizuálně srovnatelný JPEG. U bezztrátové komprese bývá zhruba o 26 procent menší než PNG. Podporuje přitom ztrátovou i bezztrátovou kompresi, takže se hodí pro fotografie, ilustrace i některé grafické prvky.
AVIF umí kompresi posunout ještě dál. Ztrátové soubory bývají přibližně o polovinu menší než JPEG a komprese je zpravidla účinnější než u WebP. Má však jednu praktickou nevýhodu: nepodporuje progresivní vykreslování, při němž se obrázek načítá nejprve hrubě a postupně se doostřuje. U velkých fotografií tak může být způsob zobrazení méně příjemný.
Kompatibilita AVIF se v posledních letech výrazně rozšířila. Podporuje ho Chrome od verze 85, Edge od verze 121, Opera od verze 71, Firefox od verze 93 a Safari od verze 16.1. Pro starší prostředí je proto vhodné nabídnout náhradní formát, například WebP nebo JPEG, místo spoléhání na to, že každý návštěvník používá aktuální prohlížeč a má rád technologická překvapení.
Komprese bez zbytečného dramatu
Při exportu je dobré sledovat dvě věci: velikost souboru a vzhled po zmenšení. Číslo v nastavení kvality samo o sobě nic negarantuje. Fotografie s velkou jednolitou plochou může snést výraznější kompresi, zatímco portrét s jemnými vlasy nebo obrázek s drobným textem odhalí chyby rychleji.
Rozdíl mezi originálem a úspornější verzí se vyplatí kontrolovat v podobě, v jaké se zobrazí na webu. Při přiblížení na 400 procent najdete nedostatky i na obrázku, který bude na stránce působit dokonale. Návštěvník ale většinou neprovádí forenzní rozbor pixelů. Obrázek zmenšený z 20 KB na 12 KB může podle praktických testů vypadat průměrnému uživateli téměř stejně.
Tady se vyplatí malá dávka realismu.
Nemá smysl honit poslední kilobajt, pokud kvůli němu vzniknou rozmazané hrany, barevné mapy nebo nepřirozené detaily. Úspora má sloužit stránce, ne se stát novým sportem, v němž vítězí ten, kdo dokáže z fotografie udělat nejmenší možný soubor.
Jeden obrázek pro všechny není řešení
Mobil, notebook a velký monitor nemají stejnou šířku obrazovky ani stejný pixelový poměr. Návštěvník na telefonu nepotřebuje stahovat soubor určený pro široký desktopový banner. Právě tady přicházejí na řadu responzivní obrázky.
Pomocí atributu `srcset` lze prohlížeči nabídnout několik variant, například v šířkách 480, 800 a 1200 pixelů. Prohlížeč potom vybere soubor podle dostupného prostoru a pixelového poměru zařízení. Na menší obrazovku se tak dostane menší verze, zatímco větší displej může využít detailnější fotografii.
Samotné rozměry nestačí, pokud stránka obrázek zobrazí v pevném poměru, ale soubor se načítá bez znalosti jeho výšky. Prohlížeč pak může během načítání posouvat obsah, protože teprve dodatečně zjistí, kolik místa má obrázku vyhradit. Zapsané rozměry nebo správný poměr stran pomáhají layout stabilizovat.
U obrázků mimo první obrazovku dává smysl odložené načítání. Galerie pod dlouhým článkem nemusí být stažená ve stejném okamžiku jako titulní fotografie. Návštěvník, který stránku opustí po prvním odstavci, by jinak zaplatil daty za obrázky, které nikdy neuvidí.
Co odstranit před nahráním
Fotografie z fotoaparátu nebo telefonu může obsahovat metadata, například informace o zařízení, barevném profilu nebo poloze. Ne všechna jsou pro web potřebná. Při exportu je proto možné odstranit přebytečná metadata a ponechat jen to, co má skutečný význam pro zobrazení.
Pozornost si zaslouží také průhlednost. PNG je vhodný tam, kde je potřeba ostrá grafika, průhledné pozadí nebo omezená barevná paleta, ale u běžné fotografie bývá zbytečně objemný. Obrázek s jednoduchými barvami může dobře fungovat jako SVG, pokud jde o vektorovou grafiku, nikoli o fotografii převlečenou za něco, čím není.
Nejspolehlivější pracovní postup je prostý: obrázek oříznout, změnit jeho rozměry, vybrat vhodný formát, nastavit přiměřenou kvalitu a výsledek prohlédnout na skutečné stránce. Teprve tam se ukáže, zda komprese zachovala detaily, jestli se obrázek načítá ve správné velikosti a zda šálek kávy dorazí dřív než návštěvníkova trpělivost.
