Optimalizace obrázků pro SEO se většinou odbude jednorázovou kompresí, a zbytek majitelé webu neřeší. Obrázky přitom ovlivňují rychlost načtení, stabilitu rozvržení i to, jak vyhledávač porozumí obsahu stránky. Projděte si v tomto ohledu deset nejčastějších chyb, zjistěte, jak se projevují, a jaký zvolit konkrétní postup nápravy.
Proč obrázky tolik rozhodují o pozicích
Na běžné stránce tvoří obrázky největší část přenášených dat. Hlavní fotka v horní části stránky bývá zároveň prvkem, podle kterého se měří metrika LCP. Pokud se načítá pomalu, utrpí hodnocení celé stránky.
Vyhledávač z obrázků čerpá i informace o tématu. Název souboru, alternativní text a okolní obsah mu napoví, co fotka zobrazuje a ke kterým dotazům se stránka hodí.
10 chyb v optimalizaci obrázků
1. Fotky nahrané přímo z fotoaparátu
Snímek z telefonu či fotoaparátu má běžně několik megabajtů. Na webu přitom stačí soubor v řádu desítek až nízkých stovek kilobajtů. Před nahráním fotku zmenšete a zkomprimujte, u formátu JPEG obvykle postačí kvalita kolem 80 %.
2. Rozměry výrazně větší, než se zobrazují
Obrázek široký 4000 pixelů zobrazený ve sloupci o šířce 800 pixelů nutí prohlížeč stahovat zbytečná data. Exportujte obrázky nejvýše ve dvojnásobku zobrazované šířky. Pomocí atributů srcset a sizes pak nabídněte telefonům menší verzi a velkým monitorům větší.
3. Nevhodně zvolený formát
Fotografie uložená jako PNG bývá několikanásobně větší než stejný záběr v JPEG. Naopak logo v JPEG ztratí ostré hrany. Pro fotky volte JPEG či WebP, pro loga a grafiku s průhledností PNG, případně SVG. Moderní formáty WebP a AVIF ušetří další data, starším prohlížečům však nabídněte záložní JPEG.
4. Líné načítání hlavního obrázku
Atribut loading=“lazy“ odkládá stažení obrázků, které nejsou na obrazovce vidět. U fotek níže na stránce šetří data. Pokud ho ovšem nastavíte i hlavnímu obrázku nahoře, prohlížeč ho začne stahovat pozdě a metrika LCP se zhorší. Hlavní obrázek proto načítejte okamžitě, líné načítání ponechte jen pro obsah pod ním.
5. Chybějící šířka a výška v kódu
Když značka img neobsahuje atributy width a height, prohlížeč neví, kolik místa obrázku vyhradit. Text se po načtení fotky posune dolů a vznikne skok v rozvržení, který měří metrika CLS. Uveďte rozměry u každého obrázku. Responzivní chování zajistí CSS i tak.
6. Názvy souborů bez významu
Soubor IMG_4521.jpg neříká vyhledávači nic. Název cervene-damske-kozene-boty.jpg naopak popisuje obsah a podporuje téma stránky. Slova oddělujte spojovníkem a vynechte diakritiku, mezery i velká písmena. Soubory pojmenujte ještě před nahráním, pozdější přejmenování mění adresu obrázku.
7. Prázdný alternativní text, případně text přeplněný frázemi
Alternativní text slouží čtečkám obrazovky i vyhledávači. Chybějící popis tak znamená ztracenou příležitost.
Výčet hledaných frází za sebou zase působí jako spam. Popište stručně a konkrétně, co obrázek zobrazuje. Čistě dekorativní grafika dostane prázdný atribut alt=““.
8. Důležitý text vložený do obrázku
Ceník, otevírací doba či nadpis akce vložené do grafiky nejsou pro vyhledávač plnohodnotným textem. Čtenář si je navíc nezvětší a nezkopíruje. Podstatné informace pište vždy jako běžný text v HTML a obrázek nechte jen jako doprovodný prvek.
9. Obrázky načítané přes nezabezpečené HTTP
Starší články často odkazují na obrázky s adresou začínající http://. Na webu s HTTPS pak vzniká takzvaný smíšený obsah. Moderní prohlížeče se je pokusí načíst přes HTTPS, a pokud to nejde, obrázek zablokují. Jak zabezpečení webu prověřit komplexně, popisuje článek o tom, co odhalí kontrola HTTPS a bezpečnostní hlavičky SEOtest.online.
10. Obrázky vložené přímo do kódu stránky
Některé editory ukládají obrázky jako dlouhý řetězec znaků přímo do HTML. Kód stránky tím nabobtná a prohlížeč nemůže obrázek uložit do mezipaměti.
Googlebot navíc zpracovává jen první 2 MB HTML. Obsah za touto hranicí se do indexu nedostane. Obrázky proto vždy nahrávejte jako samostatné soubory.
V jakém pořadí chyby opravovat
Než začnete, zaznamenejte si výchozí stav. Změřte rychlost několika typických stránek a poznamenejte si jejich pozice ve vyhledávání. Bez tohoto srovnání později těžko poznáte, která úprava přinesla zlepšení.
Začněte u hlavních obrázků na nejnavštěvovanějších stránkách. Zkontrolujte jejich velikost, formát, líné načítání a rozměry v kódu, protože tyto chyby se přímo propisují do metrik Core Web Vitals. Oprava se projeví nejrychleji.
Potom se pusťte do názvů souborů a alternativních textů. U velkého webu doporučujeme nastavit pravidla pro nově nahrávané obrázky a starší obsah upravovat postupně. Rychlý přehled o stavu obrázků na konkrétní stránce vám dá kupříkladu nástroj SEOtest.online. Ten projde obrázky na zadané adrese a upozorní na nedostatky, které stojí za opravu.
I drobnosti rozhodují o rychlosti a viditelnosti
Na obrázcích se dá ztratit mnohem víc než jen několik kilobajtů. Velikost, formát a správné načítání ovlivňují rychlost stránky. Rozměry v kódu zajišťují stabilní rozvržení a názvy souborů s alternativním textem pomáhají vyhledávači pochopit obsah.
Projděte svůj web podle tohoto seznamu a opravte nejdřív chyby s největším dopadem na výkon. Po několika týdnech porovnejte měření rychlosti a pozice ve vyhledávání s výchozím stavem.
