Obrázky tvoří průměrně polovinu datové váhy webové stránky. Přesto se snaha komprimovat obrázky vnímá jako vedlejší detail, který se vyřeší až po tom, co je web hotový. Výsledkem jsou pak stránky, které se načítají pomalu, dostávají špatné skóre v Google PageSpeed a ztrácejí návštěvníky dřív, než stihnou přečíst první větu.
Chyba číslo jedna: komprimovat obrázky bez změny rozměrů
Toto je nejrozšířenější a zároveň nejdražší chyba. Fotografie z fotoaparátu nebo telefonu mívá rozlišení 4000 a více pixelů na šířku. Na webu ji zobrazujete v oblasti široké maximálně 1920 pixelů, často výrazně méně. Přesto ji komprimujete v původním rozlišení a nahráváte soubor, který nese čtyřnásobek dat, jež prohlížeč nikdy nevyužije.
Komprese bez změny rozměrů je jako zabalit velký nábytek do menší krabice silou. Soubor se zmenší, ale stále zůstane zbytečně velký. Správný postup je nejdřív zmenšit rozměry obrázku na maximální zobrazovanou šířku a teprve pak komprimovat. Tento dvoustupňový přístup sníží velikost souboru mnohonásobně efektivněji než samotná komprese.
Chyba číslo dvě: použít špatný formát pro daný typ obsahu
Každý obrazový formát vznikl pro jiný typ obsahu a použít ho mimo jeho silnou stránku znamená platit zbytečnou cenu v datové váze nebo vizuální kvalitě.
JPEG je formát pro fotografie a složité obrazy s plynulými přechody barev. Tam odvádí skvělou práci. Na grafiku s ostrými hranami, textem nebo průhledným pozadím je nevhodný, protože kompresní artefakty se na takových prvcích projeví okamžitě. PNG naopak zvládne ostrou grafiku bezztrátově, ale pro fotografie produkuje soubory zbytečně velké. WebP a AVIF jsou modernější alternativy, které ve většině situací obě překonávají. Podrobnější srovnání některých grafických formátů najdete zde.
Nejčastější chyba v praxi je ukládat fotografie jako PNG protože to „vypadá lépe” nebo vkládat loga v JPEG protože „komprese zmenší soubor”. Obojí je špatná volba. Fotografie patří do JPEG nebo WebP, loga a ikonky do SVG nebo PNG s průhledností.
Chyba číslo tři: komprimovat na příliš vysokou kvalitu
Výchozí nastavení exportu v Photoshopu je kvalita 10 z 12, v Lightroomu 80 ze 100. To jsou hodnoty určené pro archivaci a tisk, ne pro web. Na webu tyto hodnoty generují soubory výrazně větší, než stránka potřebuje, bez viditelného přínosu pro uživatele.
Výzkumy i praktické testy opakovaně ukazují, že lidské oko na standardním monitoru nerozpozná rozdíl mezi kvalitou 85 a 75 u fotografií. Přitom soubor na kvalitě 75 bývá o 30 až 40 procent menší. Pro grafiku s plochými barvami a textem jsou rozdíly ještě výraznější.
Správný přístup je testovat vizuálně, ne nastavit pevné číslo a zapomenout. Nástroj Squoosh zobrazí originál a komprimovanou verzi vedle sebe a vy sami posoudíte, kde je hranice přijatelné kvality pro konkrétní obrázek. Různé typy obsahu snesou různou míru komprese.
Chyba číslo čtyři: ignorovat metadata v souborech
Každá fotografie z digitálního fotoaparátu nebo telefonu nese v sobě EXIF data. GPS souřadnice místa focení, model přístroje, čas, datum, nastavení expozice, clona, ISO. K tomu přibývá ICC barevný profil a případně IPTC data s autorskými informacemi.
Na webu tato metadata nepotřebujete. Přidávají desítky až stovky kilobajtů na soubor a při galerii o dvaceti fotografiích se součet vyšplhá na reálně měřitelné zpomalení načítání. Navíc GPS data ve fotografiích z prostor klienta nebo ze soukromých akcí jsou z pohledu ochrany soukromí přinejmenším nevhodná.
Nástroje ExifTool, ImageOptim nebo ShortPixel metadata při kompresi automaticky odstraní. Jedinou výjimkou je barevný profil sRGB, který se vyplatí zachovat pro konzistentní zobrazení barev napříč zařízeními.
EXIF jde také odstranit přímo ve Windows, zde se můžete podívat, jak.
Chyba číslo pět: komprimovat jednou a zapomenout
Většina webů roste. Přibývají nové stránky, nový obsah, nové obrázky. Komprese provedená při spuštění webu neřeší soubory nahrané o rok později redaktorem, který o optimalizaci nepřemýšlí. A historické soubory nahrané před zavedením optimalizačního procesu zůstanou velké navždy, pokud se k nim nikdo nevrátí.
Druhý aspekt téhož problému je ruční přístup. Pokud optimalizace závisí na tom, že si někdo vzpomene spustit nástroj před nahráním obrázku, dříve nebo později se na to zapomene. Systematické řešení je automatizace. WordPress pluginy ShortPixel nebo Imagify komprimují každý nově nahraný obrázek automaticky a na pozadí zpracují i historický archiv. Na serverové úrovni Cloudflare Polish nebo Imgix optimalizují obrázky při každém požadavku bez nutnosti upravovat samotné soubory.
Co s tím udělat ještě dnes?
Audit stávajícího stavu zabere hodinu. Spusťte Google PageSpeed Insights nebo GTmetrix na svůj web a podívejte se do sekce doporučení pro obrázky. Oba nástroje přesně ukážou, které soubory jsou příliš velké, které mají nevhodný formát a kolik dat by správná optimalizace ušetřila.
Pak stanovte prioritu. Obrázky na úvodní stránce a na nejnavštěvovanějších stránkách řešte jako první. Tam má optimalizace největší dopad na rychlost načítání a na skóre Core Web Vitals, podle kterého Google hodnotí web při řazení výsledků vyhledávání.
