Optimalizace obrázků pro SEO a rychlost e-shopu

Na detailu produktu jsou obrázky obvykle největší část přenesených dat. Na kategorii jich je desítky. A hlavní fotka produktu nebo banner na homepage bývá prvek, podle kterého Google měří LCP, tedy jak rychle se zobrazí hlavní obsah stránky.

Optimalizace obrázků proto řeší dvě věci najednou: rychlost a viditelnost ve vyhledávání, včetně Obrázků Google. Většinu kroků stačí nastavit jednou v šabloně nebo v pipeline pro zpracování fotek a pak fungují pro celý katalog.

Formát: JPEG, WebP, nebo AVIF

Moderní formáty WebP a AVIF mají při stejné vizuální kvalitě menší soubory než JPEG a PNG. Google Search podle své dokumentace indexuje formáty BMP, GIF, JPEG, PNG, WebP, SVG a AVIF. AVIF podporují všechny hlavní prohlížeče od ledna 2024.

Praktické řešení je element picture s AVIF, WebP a JPEG jako zálohou. Prohlížeč si vybere první formát, který umí. Mnoho platforem a CDN umí formát vybrat automaticky podle prohlížeče, pak stačí zapnout správné nastavení.

Pokud stahujete fotky z feedů dodavatelů, převádějte je při importu, ne za běhu. Postup popisujeme v článku Zpracování obrázků z feedů dodavatelů.

Správná velikost: srcset a sizes

Nejčastější chyba, kterou vidíme: na mobil se posílá fotka v rozlišení pro velký monitor. Formát to nespraví. Soubor v rozměru 2 000 px zobrazený na 400 px širokém displeji je zbytečně velký v jakémkoli formátu.

Řešení je atribut srcset s několika šířkami téhož obrázku (například 400, 800, 1 200 a 1 600 px) a atribut sizes, který prohlížeči řekne, jak široký bude obrázek v layoutu. Prohlížeč pak sám vybere nejmenší vhodnou verzi podle šířky obrazovky a hustoty pixelů.

U e-shopu to znamená generovat pro každou produktovou fotku několik velikostí. Dělá se to jednou při nahrání nebo importu, případně přes obrázkovou CDN, která velikosti připravuje na požádání.

Lazy loading: ano, ale ne u hlavního obrázku

Atribut loading="lazy" odloží načtení obrázků, které nejsou vidět. Na kategorii s desítkami produktů to výrazně šetří data. Chyba je dát ho na všechno.

Web.dev výslovně varuje: obrázek viditelný hned po načtení s loading="lazy" se začne stahovat až po načtení a zpracování CSS. Prohlížeč totiž musí nejdřív spočítat layout, aby věděl, že je obrázek ve viditelné části. Data z HTTP Archive, na která web.dev odkazuje, ukazují, že weby s lazy loadingem mají v mediánu horší LCP než weby bez něj.

Pravidlo pro e-shop:

• Hlavní fotka na detailu produktu, banner na homepage a první řada produktů v kategorii: bez lazy loadingu.
• Galerie, další produkty v kategorii, doporučené produkty, obrázky v patičce: loading="lazy".

Priorita LCP obrázku: fetchpriority

Prohlížeč nemusí sám poznat, který obrázek je pro stránku nejdůležitější. Atribut fetchpriority="high" mu to napoví. Podle web.dev je to jedna z nejjednodušších úprav s viditelným dopadem na LCP. Od října 2024 ho podporují všechny hlavní prohlížeče.

Používejte ho střídmě, typicky na jeden obrázek na stránce: hlavní fotku produktu nebo hlavní banner. Když má vysokou prioritu všechno, nemá ji nic. Pokud se LCP obrázek načítá až z CSS nebo JavaScriptu, můžete ho prohlížeči oznámit dopředu přes preload a prioritu zvýšit i tam.

Víc o tom, jak se LCP měří a jaké hodnoty jsou dobré, najdete v hesle Core Web Vitals a v článku Core Web Vitals pro e-shopy.

Rozměry a posun layoutu

Obrázek bez zadaných rozměrů zabere místo až po načtení. Obsah pod ním poskočí a zhorší se CLS, metrika vizuální stability. Hranice pro dobrý výsledek je 0,1.

Oprava je jednoduchá: uveďte u každého obrázku atributy width a height, případně poměr stran v CSS. Prohlížeč místo rezervuje předem. U produktových fotek pomáhá i jednotný poměr stran v celém katalogu, například čtverec. Mřížka kategorie pak vypadá klidně a nic neposkakuje.

Alt texty a názvy souborů

Alt text je podle Googlu nejdůležitější atribut, který obrázku dává význam. Google ho kombinuje s rozpoznáním obrazu a obsahem stránky. Zároveň slouží lidem, kteří používají čtečku obrazovky, takže je součástí přístupnosti.

Jak psát alt text u e-shopu:

• Popište, co je na obrázku, krátce a v kontextu stránky: „Černá kožená kabelka přes rameno, pohled zepředu“.
• U více fotek téhož produktu rozlište pohled nebo detail: „detail zapínání“, „kabelka na modelce“.
• Nepište „obrázek“ nebo „fotka“. Čtečka to oznámí sama.
• Nevyjmenovávejte klíčová slova. Google to v dokumentaci uvádí jako špatnou praxi, která může vést k hodnocení jako spam.
• Čistě dekorativní obrázky mají prázdný alt.

Alt texty jde u velkého katalogu generovat ze šablony (název, barva, pohled) nebo s pomocí AI, ale výsledek kontrolujte. Návod k celé stránce produktu najdete v článku Produktové SEO.

Podle Googlu může i název souboru napovědět, co na obrázku je. cerna-kozena-kabelka-pres-rameno.avif je lepší než IMG_4521.avif. U e-shopů je praktické odvodit název ze slugu produktu a pořadí fotky.

Indexace obrázků a obrázkové sitemapy

Google spolehlivě najde obrázky v běžném HTML elementu img s atributem src. Obrázky vložené jen jako pozadí přes CSS pro Obrázky Google nepoužívejte. Pokud galerie načítá fotky až JavaScriptem, ověřte v nástroji Kontrola URL v Search Console, že je Google vidí.

Obrázková sitemapa pomůže Googlu najít obrázky, které by jinak přehlédl. Můžete ji mít samostatně, nebo přidat obrázkové značky do běžné sitemapy. Google z obrázkových značek dnes používá jen adresu obrázku, starší značky pro titulek a popisek z dokumentace odstranil. Adresa obrázku může vést i na jinou doménu, typicky na CDN.

Checklist optimalizace obrázků

• Fotky v AVIF nebo WebP se zálohou v JPEG.
• Několik velikostí každé fotky a správně nastavené srcset a sizes.
• Hlavní obrázek stránky bez lazy loadingu a s fetchpriority="high".
• Ostatní obrázky pod okrajem obrazovky s loading="lazy".
• U každého obrázku width a height.
• Věcné alt texty bez hromadění klíčových slov.
• Popisné názvy souborů odvozené ze slugu produktu.
• Produktové fotky v elementu img, ne jako CSS pozadí.
• Obrázková sitemapa, pokud galerie načítá fotky JavaScriptem.

Většinu bodů jde nastavit jednou v šabloně a v procesu importu fotek. Pokud chcete, abychom obrázky a rychlost e-shopu zkontrolovali a hlídali dlouhodobě, podívejte se na program Performance Monitoring. Obrázky jako součást celkové optimalizace pro vyhledávače řešíme ve službě SEO pro e-shopy.