Formáty
8 min čtení
Jak přejít na WebP ve WordPressu: kompletní průvodce
WordPress od verze 5.8 umí generovat WebP varianty nahraných obrázků. Ale jen za určitých podmínek. Potřebujete správnou verzi PHP, správně nakonfigurovaný server a správné nastavení v administraci. Projdeme to krok za krokem.
01
Ověřte verzi WordPressu
Přejděte do Administrace, Nápověda, O WordPressu. Potřebujete verzi 5.8 nebo vyšší. Pokud máte starší verzi, aktualizace je první krok.
02
Zkontrolujte serverovou podporu
V administraci jděte do Nástroje, Informace o webu, Server. Hledejte položku "Podpora ImageMagick" nebo "Podpora GD". Musí být aktivní a musí podporovat WebP.
03
Testujte nahrání obrázku
Nahrajte testovací JPEG. Pak přejděte do Média, zkontrolujte vygenerované velikosti. Pokud WordPress generuje WebP varianty, uvidíte je v seznamu.
04
Ověřte servírování
Otevřete stránku v prohlížeči, otevřete DevTools, záložka Network, filtrujte na Img. Zkontrolujte, jaký Content-Type má váš obrázek v hlavičce odpovědi.
Core Web Vitals
12 min čtení
Lazy loading a LCP: co se děje pod kapotou
Přidání atributu loading="lazy" na obrázky je jedna z nejjednodušších optimalizací, které existují. Ale je tu jeden háček: nikdy ho nepřidávejte na obrázek v hero sekci nebo na první viditelný obrázek stránky. Proč? Protože to zpomalí LCP.
01
Identifikujte LCP element
Spusťte PageSpeed Insights nebo Lighthouse. V sekci Diagnostika najdete "Largest Contentful Paint element". To je prvek, na který lazy loading nikdy nepřidávejte.
02
Přidejte fetchpriority="high" na LCP obrázek
Tento atribut říká prohlížeči: tento obrázek je prioritní, načti ho co nejdříve. Kombinujte s preload linkem v hlavičce stránky pro maximální efekt.
03
Přidejte lazy loading na ostatní obrázky
Všechny obrázky pod prvním screenem dostanou loading="lazy". Prohlížeče ho dnes podporují nativně. Žádný JavaScript není potřeba.
SEO a přístupnost
6 min čtení
Alt text: pravidla, která fungují v praxi
Alt text je jeden z nejčastěji špatně pochopených atributů v HTML. Lidé ho buď zcela vynechají, nebo ho naplní klíčovými slovy bez ohledu na kontext. Obojí je špatně.
Špatně
<img src="foto.jpg" alt="SEO optimalizace obrázků webp avif komprese">
Dobře
<img src="squoosh-screenshot.jpg" alt="Rozhraní nástroje Squoosh s porovnáním originálu a komprimované verze obrázku">
Dekorativní obrázek
<img src="dekorativni-cara.jpg" alt="">
Dekorativní obrázky, tedy ty, které nepřenáší žádnou informaci, dostanou prázdný alt atribut. Čtečky obrazovky je pak přeskočí. To je správné chování.
Komprese
10 min čtení
Komprese bez ztráty kvality: kde je hranice
Každý kompresní algoritmus pracuje s kompromisem mezi velikostí souboru a vizuální kvalitou. Otázka není "jak moc zkomprimovat", ale "kde je hranice, za kterou si člověk všimne rozdílu".
Pro fotografie je to obvykle kvalita 75-85 v JPEG nebo ekvivalentní nastavení v WebP. Pod tuto hodnotu se začínají objevovat artefakty, zejména v plochách s jemnými přechody barev. Nad tuto hodnotu se soubory zbytečně zvětšují bez znatelného vizuálního přínosu.
01
Otevřete Squoosh
Přetáhněte fotografii do squoosh.app. Vyberte výstupní formát WebP nebo AVIF. Nastavte quality na 80.
02
Porovnejte vizuálně
Squoosh zobrazí originál a výsledek vedle sebe. Přibližte se na 100% zoom. Hledejte artefakty v oblastech s jemnými přechody barev, jako je obloha nebo lidská kůže.
03
Snižujte quality postupně
Zkuste 75, pak 70. Sledujte, kdy se začnou artefakty projevovat. Pro každý typ fotografie bude tato hranice trochu jiná.
