Jak optimalizovat obrázky ve WordPressu a ověřit výsledek

Co připravit před nahráním?

Začněte místem, kde se má obrázek zobrazit. Fotografie uvnitř článku nepotřebuje automaticky stejné rozměry jako celostránkový úvodní snímek. Podle šířky zobrazení a hustoty displeje určete potřebné rozměry zdroje, zvolte ořez a zachovejte původní soubor pro další úpravy.

Pro fotografii porovnejte JPG, WebP nebo AVIF. Pro screenshot s textem může být lepší PNG nebo bezeztrátový export. Výběr formátu má smysl řešit před hromadným převodem knihovny: stejné nastavení nemusí vyhovovat fotografiím i grafice.

Nahrávejte rozumně připravený zdroj, ze kterého WordPress může vytvářet menší velikosti. Komprese obrázků pomůže snížit velikost souboru nebo změnit formát, ale nemění pixelové rozměry. Ty upravte předem v editoru. Nezmenšujte originál až na šířku malé karty, pokud ho chcete používat také v detailu přes celý obsahový sloupec.

Co WordPress vytvoří automaticky?

Při nahrání do knihovny médií WordPress obvykle vytváří více velikostí obrázku. Nabídku určují nastavení webu, šablona i pluginy; výsledné varianty také závisejí na velikosti zdroje a možnostech serveru.

U obrázků z knihovny umí WordPress doplnit atributy srcset a sizes. První nabídne více souborů, druhý pomáhá prohlížeči rozhodnout, jak velký bude obrázek na stránce. Prohlížeč tak může sáhnout po menším souboru pro úzké zobrazení. Responzivní obrázky ve WordPressu však nejsou zárukou, že každá šablona, blok či obrázek na pozadí funguje stejně.

V blokovém editoru vložte blok Obrázek a vyberte soubor z knihovny médií. V nastavení bloku zvolte dostupné rozlišení odpovídající použití. Názvy a umístění voleb se mohou lišit podle verze editoru a šablony. Nezaměňujte rozlišení zdroje s pouhou změnou jeho viditelné šířky tažením za okraj bloku.

Samotné nahrání JPG také neznamená, že WordPress začne návštěvníkům automaticky posílat AVIF. Převod do jiného formátu může zajišťovat konkrétní plugin, hosting nebo vlastní nastavení; ověřte skutečný výstup.

Jak zjistit, který obrázek se opravdu načítá?

Kontrolujte veřejný náhled stránky, ne pouze editor. Následující postup používá Chrome a jeho vývojářské nástroje; názvy panelů uvádí anglicky, jak se v nich běžně zobrazují.

1. Otevřete stránku a panel Network. Vývojářské nástroje otevřete přes nabídku prohlížeče nebo volbu Prozkoumat. Panel musí být otevřený před opětovným načtením stránky.
2. Zapněte Disable cache a stránku obnovte. Tato volba při otevřených nástrojích omezí vliv místní cache. Nevypíná cache na hostingu nebo CDN.
3. Vyfiltrujte obrázky přes Img. Najděte požadavek odpovídající kontrolované fotografii. Pokud obrázek používá odložené načítání, nejprve k němu posuňte stránku.
4. Prohlédněte URL, náhled a velikost přenosu. Otevřete načtený soubor a zjistěte jeho pixelové rozměry. Nespoléhejte jen na čísla v názvu souboru; služba pro úpravu obrázků může používat jiný způsob adresování.
5. Zopakujte kontrolu pro mobil. V režimu simulace zařízení nastavte užší obrazovku a stránku znovu načtěte. Pouhé zúžení okna nemusí přimět prohlížeč zahodit už stažený větší obrázek.

V panelu Elements můžete po označení konkrétního prvku <img> použít v konzoli výraz $0.currentSrc. Ukáže adresu zdroje vybraného prohlížečem. Je to užitečné, když HTML obsahuje více kandidátů a samotný atribut src neříká, který se skutečně použil.

Ve sloupci Size rozlišujte přenesená data a velikost prostředku. Záznam z paměťové cache není důkazem, že nový návštěvník obrázek získá bez přenosu. Postup a význam údajů popisuje dokumentace panelu Network.

Co když se načítá špatná velikost?

Představte si kartu širokou 300 CSS px, která i na běžném displeji stahuje fotografii širokou 2 400 px. Komprese velkého souboru může přenos zmenšit, ale web pořád neposílá odpovídající rozměrovou variantu. Opravte také nastavení obrázku nebo šablony, která jej vybírá.

V izolované testovací instalaci WordPressu vznikly z obrázku 1 600 × 1 000 px mimo jiné varianty 1 024 × 640 px a 150 × 150 px. Výstup pro velkou variantu obsahoval nabídku více šířek v srcset; čtvercový náhled v tomto testu obsahoval pouze zdroj 150 × 150 px. Volba velikosti tedy měnila i to, z čeho mohl prohlížeč vybírat.

Opačný problém nastane, když šablona roztáhne náhled široký 150 px do prostoru širokého 800 CSS px. Výsledkem bude rozmazaný obrázek, i kdyby v knihovně ležel kvalitní originál. Vyberte větší zdroj a ověřte, že se do stránky opravdu propsal.

Pokud vhodná varianta chybí, zjistěte proč. Změna rozměrů v nastavení médií či přidání nové velikosti v šabloně sama o sobě nepřepočítá všechny dříve nahrané soubory. Starší obrázky mohou potřebovat regeneraci odvozených velikostí. Takový zásah nejprve vyzkoušejte na testovací kopii webu a ponechte zálohu médií.

Když varianta existuje, ale prohlížeč ji nepoužívá, zkontrolujte HTML obrázku, údaje sizes a chování optimalizačního pluginu či CDN. Vlastní HTML bez vazby na knihovnu médií nemusí využít stejné funkce jako běžný obrazový blok.

Lze ve WordPressu používat WebP a AVIF?

WordPress podporuje WebP od verze 5.8 a AVIF od verze 6.5. U obou záleží také na podpoře serverové knihovny pro zpracování obrázků. Podpora v prohlížeči sama nestačí, pokud server nedokáže vytvořit náhledy. Podmínky uvádějí oznámení podpory WebP a AVIF.

Než převedete celou knihovnu, nahrajte jeden soubor do testovacího webu. Ověřte, že vznikly potřebné menší varianty, obrázek jde vložit do používaného bloku a stránka jej správně zobrazí. Vyzkoušejte také funkce, které jsou pro vás důležité, například výřezy produktových fotografií nebo odesílání obrázků do dalších služeb.

Pokud nahrání nebo tvorba náhledů selže, prověřte podporu s hostingem. Přejmenování přípony problém nevyřeší. Do odstranění příčiny použijte formát, který váš web skutečně zpracuje.

Které obrázky načítat odloženě?

Odložené načítání, označované jako lazy loading, pomáhá u obrázků níže na stránce. Prohlížeč nemusí všechny stahovat hned při otevření článku. Hlavní viditelný obrázek ale nechcete zbytečně zdržet, zvlášť když tvoří největší obsahový prvek úvodní obrazovky.

U takového obrázku prověřte, zda mu šablona či plugin nepřidávají nevhodné loading="lazy". Metrika LCP sleduje, kdy se zobrazí největší obsahový prvek v záběru. Optimalizace LCP proto zahrnuje i okamžik zahájení načítání obrázku, nejen velikost jeho souboru.

WordPress sám část těchto rozhodnutí provádí, ale výsledek může změnit šablona nebo plugin. Nepřidávejte další optimalizační plugin jen kvůli existenci přepínače lazy loading. Nejprve zjistěte, kdo už načítání na webu řídí, a ověřte výsledné HTML.

Jak poznat, že změna pomohla?

Před úpravou si zaznamenejte adresu načítaného souboru, jeho rozměry a přenesené bajty. Po úpravě porovnejte stejnou stránku při stejné šířce, hustotě displeje a nastavení testu. Zkontrolujte také ostrost a ořez; menší soubor není úspěch, pokud návštěvník nepřečte text.

Měření rychlosti zopakujte vícekrát za obdobných podmínek. Jediný rychlejší běh nemusí být důsledkem vaší změny. LCP ovlivňuje také server, skripty, síť a okamžik, kdy prohlížeč obrázek objeví. Procento ušetřených dat proto automaticky neznamená stejné procento zrychlení stránky.

Pokud po výměně stále vidíte starou variantu, prověřte cache webu, pluginu a CDN. Cache čistěte cíleně podle použitého systému. Výsledek pak ověřte opět v síťových požadavcích, nejen pohledem do knihovny médií.

Často kladené otázky