Mobilní uživatelé a obrázky. Proč komprese obrázků pro desktop problém neřeší a jak responzivní design mění situaci

Komprese obrázků je první krok obrazové optimalizace, ovšem pro mobilní web nestačí. Desktop optimalizace typicky spočívá v zmenšení velikosti souboru při zachování rozměrů obrázku. Mobilní zařízení s menším displejem a pomalejším připojením přitom potřebuje nejen menší soubor, ale i obrázek v jiných rozměrech. Stránka, která posílá mobilnímu uživateli obrázek navržený pro monitor s rozlišením 1920 pixelů, plýtvá přenosovým pásmem a zpomaluje načítání, i kdyby byl soubor sebelépe zkomprimovaný. Tento článek vysvětluje, jak mobilní optimalizace obrázků funguje a co HTML techniky pro responzivní obrázky přidávají ke klasické kompresi.

Proč stejný obrázek na desktopu a mobilu způsobuje problém

Původní přístup k obrázkům na webu byl jednoduchý – jeden soubor, jeden rozměr, zobrazený na všech zařízeních. Prohlížeč obrázek stáhne a CSS ho zmenší na požadovanou šířku. Vizuálně to možná funguje, ovšem datově je taková situace poněkud nehospodárná.

Mobilní telefon se šířkou displeje 390 pixelů stáhne obrázek o šířce 1800 pixelů a CSS ho zmenší na třetinu. Uživatel vidí správnou velikost, ovšem stáhl šestkrát více dat, než bylo nutné. Na mobilním připojení s omezenou propustností nebo na tarifu s datovým limitem je tento rozdíl hmatatelný jak v době načítání, tak v ceně dat.

Google mobile-first indexing dnes hodnotí web primárně podle jeho mobilní verze. Core Web Vitals měřené na mobilním zařízení zahrnují LCP, tedy dobu načtení největšího viditelného prvku. Obrázek je nejčastěji tím největším viditelným prvkem a jeho zbytečná velikost se přímo projeví v metrice LCP.

Jak srcset řeší problém různých rozlišení

HTML atribut srcset umožňuje definovat více verzí stejného obrázku pro různá zařízení. Prohlížeč na základě šířky displeje a hustoty pixelů sám vybere nejvhodnější verzi.

Základní syntaxe vypadá následovně: element <img> dostane atribut srcset se seznamem URL souborů a jejich šířek. Atribut sizes pak říká prohlížeči, jak velký prostor obrázek na stránce zabere při různých šířkách okna. Prohlížeč tyto informace zkombinuje s aktuální šířkou displeje a stáhne pouze tu verzi obrázku, která odpovídá jeho potřebám.

Telefon se šířkou 390 pixelů stáhne obrázek v šířce 400 pixelů. Tablet se šířkou 768 pixelů stáhne verzi v šířce 800 pixelů. Desktop se šířkou 1440 pixelů stáhne plnou verzi v šířce 1800 pixelů. Každé zařízení dostane přesně tolik dat, kolik potřebuje.

Hustota pixelů je komplikace

Moderní mobilní zařízení mají Retina nebo podobné displeje s dvojnásobnou nebo trojnásobnou hustotou pixelů oproti standardním monitorům. iPhone s fyzickým rozlišením 390 × 844 pixelů má logické rozlišení 390 × 844, ovšem k dosažení ostré grafiky potřebuje obrázky v dvojnásobném rozlišení, tedy 780 pixelů šířky.

srcset tento aspekt pokrývá prostřednictvím deskriptoru x, který definuje verze obrázku pro různé hustoty pixelů, nebo prostřednictvím deskriptoru w v kombinaci se sizes, který prohlížeči dá dostatek informací pro výběr správné verze bez ohledu na hustotu pixelů konkrétního zařízení.

Element picture pro pokročilou kontrolu

srcset na elementu <img> řeší rozdílné rozlišení, ovšem neposkytuje plnou kontrolu nad tím, jaký soubor prohlížeč vybere. Element <picture> přidává tuto kontrolu prostřednictvím podmínek definovaných v atributu media.

<picture> umožňuje definovat různé obrázky pro různé breakpointy, nejen různé velikosti téhož obrázku. Mobilní verze stránky pak může zobrazit výřez fotografie zaměřený na hlavní motiv, zatímco desktopová verze zobrazí celou fotografii s kontextem. Tato technika se nazývá art direction a jde nad rámec pouhé komprese: mění kompozici obrázku podle dostupného prostoru.

Moderní formáty v kombinaci s picture

<picture> se nejčastěji kombinuje s moderními obrazovými formáty. Element definuje jako primární zdroj WebP nebo AVIF soubor a jako záložní standardní JPEG pro prohlížeče, které moderní formáty nepodporují. Prohlížeč vybere první zdroj, který dokáže zpracovat.

Kombinace art direction, srcset pro různá rozlišení a moderních formátů přes <picture> tvoří kompletní řešení pro responzivní obrázky. Každý uživatel dostane obrázek ve správné kompozici, správném rozlišení, správném formátu a správné velikosti souboru.

Lazy loading – doplněk komprese

Responzivní obrázky optimalizují to, co prohlížeč stáhne. Lazy loading optimalizuje to, kdy to stáhne. Atribut loading=“lazy“ říká prohlížeči, aby obrázek stáhl až ve chvíli, kdy se uživatel blíží k místu, kde se obrázek nachází.

Stránka s deseti produktovými fotografiemi bez lazy loadingu stáhne všechny fotografie při načtení stránky, i kdyby uživatel odešel po přečtení prvního odstavce. S lazy loadingem se stáhnou pouze fotografie nad viditelnou částí stránky a ostatní se načtou postupně při scrollování.

Kombinace komprese, srcset a lazy loadingu vytváří tři nezávislé, navzájem se doplňující vrstvy obrazové optimalizace. Každá řeší jiný aspekt problému a společně vedou k výrazně nižší datové zátěži při načítání stránky.

Jak začít s optimalizací obrázků pro mobilní web

Prvním krokem je příprava souborů ve správných rozměrech a velikostech. Komprese obrázků s pomocí k tomu určených nástrojů umožní zmenšit velikost souboru před nahráním na server bez viditelné ztráty kvality. Pro každou verzi obrázku určenou pro jiné rozlišení je vhodné soubor zkomprimovat samostatně, protože menší obrázek snese agresivnější kompresi bez viditelné degradace.

Druhým krokem je implementace srcset nebo picture v šabloně webu. Ve WordPressu tuto funkci zajišťují obrázky nahrané přes Media Library automaticky od verze 4.4, ovšem správné nastavení breakpointů a generování správných rozměrů závisí na konfiguraci šablony.

Pro zasazení obrazové optimalizace do širšího kontextu meta vrstvy stránky doporučujeme využít také Meta tag generátor, který usnadňuje správné nastavení og:image a dalších tagů pro sdílení na sociálních sítích. Pro kontrolu toho, jak stránka vypadá ve výsledcích vyhledávání po optimalizaci, zase poslouží náhled SERP, který výsledek vyhledávání ukáže ještě před publikací změn.

Optimalizaci obrázků je třeba dělat pravidelně

Každý nový obrázek přidaný na web bez responzivní implementace přidává k datové zátěži mobilních uživatelů. Správná pipeline pro práci s obrázky zahrnuje kompresi, generování více rozlišení a implementaci srcset nebo picture jako standardní součást procesu přidávání obsahu. Pokud tento proces nastavíte jednou a držíte se ho konzistentně, nebudete muset dělat zpětnou optimalizaci stovek existujících obrázků za rok provozu.

About
Latest Posts

Marie Chudá

Dá se říct, že marketing mě odjakživa fascinoval. Umění zaujmout a přesvědčit se přeci hodí nejen v obchodu, že? Jako studovaná marketérka jsem se mnohokrát ujistila, že tomu tak opravdu je… Kromě klasického marketingu jsem ale odmala hltala i jednu knihu za druhou a láska k psanému slovu mě nikdy neopustila. Proto se nedivte, že mě najdete podepsanou i pod články na tomto blogu.