Obrázky tvoří největší část váhy většiny stránek. Naučíme vás, jak na WebP, AVIF, lazy loading a alt text. Bez vývoje, bez kódu navíc.
Píšeme o jedné věci a píšeme ji pořádně. Optimalizace obrázků pro web je téma, které ovlivňuje rychlost načítání, skóre Core Web Vitals i to, jak vysoko vás Google zobrazí. Přitom se o něm mluví překvapivě málo.
Nejsme agentura. Neprodáváme kurzy. Neděláme webový vývoj. Jenom píšeme tutoriály, které fungují.
WebP a AVIF nejsou jen módní slova. Jsou to formáty, které skutečně zmenší vaše soubory.
Lazy loading a správné dimenzování obrázků přímo ovlivňují LCP, CLS a FID metriky.
Dobrý alt text pomáhá čtečkám obrazovky i Googlebot indexování obsahu stránky.
Squoosh, TinyPNG a další bezplatné nástroje zvládnou kompresi bez znatelné ztráty kvality.
Průměrná webová stránka přenáší přes síť výrazné množství dat. Velká část tohoto objemu pochází z obrázků. To není teorie, to je realita, kterou si můžete ověřit v DevTools svého prohlížeče za třicet sekund.
Když Google hodnotí rychlost vašeho webu, dívá se mimo jiné na Largest Contentful Paint. A co bývá největším prvkem stránky? Správně, obrázek v hlavičce nebo hero sekci.
Přečíst technické rozboryDva moderní formáty, jeden cíl: menší soubory se stejnou vizuální kvalitou.
WebP podporují všechny moderní prohlížeče. WordPress ho generuje automaticky od verze 5.8. Je to bezpečná volba pro většinu projektů.
AVIF dosahuje při stejné kvalitě menších souborů než WebP. Podpora v prohlížečích rychle roste. V některých CMS systémech ale zatím chybí nativní podpora.
Lazy loading je technika, která říká prohlížeči: načti obrázek až ve chvíli, kdy se blíží k viditelnému výřezu obrazovky. Výsledek? Stránka se zobrazí rychleji, protože nestahuje obrázky dole na stránce dřív, než je uživatel potřebuje.
Přidat lazy loading do HTML je jedna změna. Jeden atribut. A přesto má měřitelný dopad na Core Web Vitals skóre.
Jak na lazy loading krok za krokem
Čtečky obrazovky přečtou alt text lidem se zrakovým postižením. Bez něj je obrázek pro ně neviditelný, jako by tam nebyl. Správný alt text popisuje, co obrázek zobrazuje, ne jak vypadá technicky.
Špatně: img001.jpg. Dobře: Redaktor upravuje fotografii v programu Lightroom.
Googlebot neumí vidět obrázky jako člověk. Čte alt text a na jeho základě rozumí, o čem obrázek je. To ovlivňuje jak vyhledávání obrázků, tak celkovou relevanci stránky pro dané klíčové slovo.
Klíčová slova v alt textu mají smysl, ale jen pokud přirozeně popisují obsah obrázku. Keyword stuffing Google pozná.
Nemusíte platit za Photoshop, abyste dostali obrázky pod kontrolu.
Nástroj od Google. Přímo v prohlížeči, bez instalace. Porovnává originál a komprimovanou verzi vedle sebe. Exportuje do WebP, AVIF, PNG, JPEG.
squoosh.appJednoduchý drag-and-drop. Funguje pro PNG i JPEG. Omezení na dvacet souborů zdarma za den, ale pro většinu použití stačí.
tinypng.comDesktopová aplikace pro macOS. Dávková komprese, odstraňuje EXIF metadata. Ideální pro fotografy, kteří zpracovávají větší množství fotek najednou.
imageoptim.comSpecializovaný nástroj pro SVG soubory. Odstraňuje zbytečná metadata, komentáře a redundantní atributy. Výsledné soubory jsou výrazně menší.
jakearchibald.github.io/svgomg
WordPress generuje WebP automaticky od verze 5.8, ale jen pokud má server nainstalovanou knihovnu libwebp nebo ImageMagick. Shopify konvertuje obrázky sám. Webflow exportuje WebP nativně.
Problém nastane, když předpokládáte, že CMS vše vyřeší za vás, ale zjistíte, že váš hosting má zastaralou konfiguraci. Proto je dobré to ověřit.
Jak to zjistit? Nahrajte testovací obrázek a zkontrolujte, jaký formát vám CMS skutečně servíruje. Ukážeme vám přesný postup.
Zkontrolovat svůj CMSTehahu Lacace je blog, ne agentura. Neprodáváme žádné služby, neprovádíme webový vývoj, nemáme affiliate partnery. Píšeme o optimalizaci obrázků, protože je to téma, které má přímý dopad na výkon webu a přitom se mu věnuje překvapivě málo srozumitelných zdrojů v češtině.
Každý tutoriál testujeme na reálných projektech. Každý nástroj, který doporučujeme, jsme sami použili.
O nezávislosti tohoto blogu
Otevřete si Network tab v DevTools. Seřaďte soubory podle velikosti. Vsadím se, že první tři budou obrázky. Tohle je výchozí bod každé optimalizace.
Číst článekAVIF je technicky lepší. Ale přechod má své podmínky. Podíváme se na to, kdy má smysl a kdy je WebP pořád správná volba.
Číst článekExistuje přesný rozdíl mezi alt textem, který pomáhá, a alt textem, který je tam jen proto, že validator křičí. Ukážeme ho.
Číst článek