SEO optimalizace WordPressu se často zužuje jen na rychlost stránek a strukturu odkazů, přitom právě obrázky bývají jedním z největších zdrojů zpomalení. Stačí jediná chyba u formátu, komprese či načítání, a web se místo zrychlení zpomalí a navíc riskuje ztrátu viditelnosti v Google Obrázcích. Následující přehled shrnuje, na co si dát pozor u formátů, komprese, alt textů a načítání, aby optimalizace splnila svůj účel.
Na co si dát pozor při výběru formátu obrázku
Prvním rozhodnutím u každého nahrávaného souboru je volba formátu. Klasické JPEG a PNG přečte každý prohlížeč, moderní formáty ale nabízejí menší velikost při srovnatelné kvalitě. Podle oficiálního blogu WordPress Core přidala verze WordPress 5.8 nativní podporu formátu WebP přímo v knihovně médií. WebP soubory bývají zhruba o 30 % menší než odpovídající JPEG nebo PNG. Podpora ale vyžaduje, aby serverová knihovna Imagick či GD formát WebP zvládala, jinak nahrání souboru skončí chybou.
Od verze WordPress 6.5 lze podle oznámení podpory formátu AVIF v jádru WordPressu nahrávat a používat i formát AVIF. Ten bývá až o 50 % menší než JPEG při srovnatelné kvalitě. Podporu na serveru administrátor ověří v administraci v nabídce Nástroje → Stav webu, na záložce Informace v části Zpracování médií.
Následující tabulka shrnuje rozdíly mezi formáty:
| Formát | Podpora ve WordPressu | Přibližná úspora velikosti | Podmínka na serveru |
|---|---|---|---|
| JPEG / PNG | vždy, výchozí formát | referenční hodnota, bez úspory | žádná |
| WebP | od verze 5.8 | zhruba 30 % oproti JPEG/PNG | Imagick či GD s podporou WebP |
| AVIF | od verze 6.5 | až 50 % oproti JPEG | Imagick či GD s podporou AVIF |
Na co si dát pozor u komprese a maximálních rozměrů obrázků před nahráním do knihovny médií
Než se obrázek dostane do knihovny médií, má smysl zmenšit jeho rozměry na hodnotu, kterou web skutečně potřebuje, a zvolit odpovídající míru komprese. Kvalitní komprese obrázků snižuje datový přenos, aniž by byla vizuálně patrná ztráta kvality. Podle oficiální dokumentace WordPress.org šetří správná volba formátu a komprese u každého souboru čas i přenosová data a zároveň pomáhá viditelnosti webu ve vyhledávání.
Fotografie se šířkou několika tisíc pixelů nahraná bez úpravy zbytečně zatěžuje server i připojení návštěvníka. Komprese samotná ale nezachrání pomalý web, pokud stojí na nevhodném hostingu či přetíženém serveru. Samostatnou kapitolou jsou proto i další cesty, jak zrychlit načítání webových stránek, nejen úprava samotných souborů.
Na co si dát pozor u responzivního zobrazení obrázků
Stejný obrázek se na mobilu, tabletu i velkém monitoru zobrazuje v jiné šířce, a proto nemá smysl posílat všem zařízením tu největší verzi souboru. Podle oficiálního blogu WordPress Core generuje WordPress už od verze 4.4 pro nahrané obrázky sadu různých velikostí a automaticky je vkládá do atributu srcset. Prohlížeč si pak sám vybere velikost odpovídající danému zařízení.
Podmínkou je, aby šablona tento mechanismus nevypínala a obrázky vkládala standardní cestou přes knihovnu médií, ne pevně zadanou adresou jediné velikosti souboru.
Na co si dát pozor u názvu souboru a alt textu obrázku
Ještě před nahráním obrázku do knihovny médií stojí za to přejmenovat soubor z generického tvaru na výstižný popis obsahu. Podle dokumentace Google Search Central dává popisný název souboru vyhledávači jasnou stopu o tom, co obrázek zobrazuje, na rozdíl od generických názvů typu IMG00023.
Stejná dokumentace označuje alt text za nejdůležitější atribut popisující obsah obrázku a doporučuje, aby byl užitečný a věcný, bez zahlcení klíčovými slovy. Po nahrání souboru je proto škoda nechat pole pro alternativní text v knihovně médií prázdné.
Na co si dát pozor u nativního lazy loadingu obrázků ve WordPressu
Podle oficiálního blogu WordPress Core přidává WordPress od verze 5.5 automaticky obrázkům v obsahu příspěvku atribut loading s hodnotou lazy, pokud mají zadanou šířku i výšku. Jde o takzvané odložené načítání (lazy loading), tedy stažení obrázku až ve chvíli, kdy se blíží viditelné části obrazovky.
U obrázku, který se pravděpodobně zobrazuje hned na úvodní obrazovce, typicky v hlavičce šablony, se ale doporučuje tento atribut vynechat. Odložené načítání by jeho zobrazení zbytečně zpomalilo, místo aby web celkově zrychlilo.
Na co si dát pozor u sitemapy obrázků a jejich vlivu na Largest Contentful Paint
Sitemapa obrázků funguje jako doplněk běžné sitemapy stránek a pomáhá Googlu objevit i obrázky, které by jinak mohl přehlédnout, zejména pokud web obrázky poskytuje přes CDN.
Zvláštní pozornost si zaslouží obrázek, který na dané stránce tvoří takzvaný Largest Contentful Paint, tedy největší prvek viditelné části stránky, podle jehož vykreslení se měří vnímaná rychlost načítání. Podle webu web.dev se obrázek určující rychlost načítání stránky nemá nikdy načítat s odloženým načítáním, protože to vždy vede ke zbytečnému zpoždění.
Optimalizace obrázků je tak jen jednou částí širší péče o technické SEO WordPressu. Kdo řeší i trvalé odkazy, výběr SEO pluginu či strukturu obsahu, ocení komplexní návod SEO optimalizace WordPress, který tyto oblasti popisuje pohromadě.
Co si z optimalizace obrázků odnést
SEO optimalizace WordPress webu nekončí u textu a odkazů. Patří do ní i na první pohled drobná oblast obrázků, a ta se neomezuje na jediný krok, například na kompresi souboru před nahráním. Skládá se ze souhry formátu, správných rozměrů, výstižného alt textu a chytře nastaveného načítání. Teprve všechny dohromady rozhodují, jestli obrázky web zrychlí, či naopak zpomalí a připraví o viditelnost ve vyhledávání obrázků.
Kdo tato pravidla ignoruje, problém obvykle zjistí až ve chvíli, kdy si na pomalu se načítající web stěžují návštěvníci, nebo kdy stránka ztratí pozice v Google Obrázcích. Všimli jste si už někdy, že pomalu se načítající obrázek na vašem webu mohl odradit návštěvníky, nebo dokonce připravit stránku o pozice ve vyhledávání?