Publikováno 27. října 20265 min čtení
Obrázky, které web zpomalují: WebP, AVIF a rozměry srozumitelně
Proč jsou velké fotky nejčastější příčinou pomalého webu, jak je poznáte v Průzkumníku Puluno a jak je bez programování zmenšíte ve WordPressu — včetně WebP/AVIF, rozměrů a popisků obrázků.
- Obrázky
- Rychlost
- WebP
- WordPress
Na většině webů je největší datový balík na stránce fotka. Stačí pár nezmenšených snímků z foťáku nebo mobilu a úvodní stránka má na stažení snadno několik megabajtů — na mobilním připojení to trvá klidně několik vteřin. Návštěvník kouká na prázdnou stránku a část lidí odejde dřív, než se web vůbec ukáže.
Dobrá zpráva: právě u fotek jde nejčastěji nejsnadněji zrychlit. Nemusíte předělávat celý web ani umět programovat. V tomhle článku si srozumitelně vysvětlíme, proč velké obrázky web zpomalují, jak to poznáte, a jak to opravíte přímo ve WordPressu.
Proč obrázky rozhodují o rychlosti
Obrázky ovlivňují hned tři věci, které návštěvník i Google vnímají:
- 1Velikostkolik dat se musí stáhnout, než se web ukáže
- 2Rozměryjestli obsah při načítání „neposkakuje"
- 3Popisek (alt)jak obrázek „přečte" Google a čtečka obrazovky
Velikost souboru — rychlost načtení
Čím větší soubor, tím déle se stahuje. Hlavní fotka na úvodní stránce je obvykle největší prvek na obrazovce — a dokud se nenačte, web působí pomalu (v Core Web Vitals jde o ukazatel LCP, rychlost zobrazení hlavního obsahu). Fotka o velikosti 4 MB se na mobilu načítá znatelně déle než stejná fotka zmenšená na 200 kB — a vypadá přitom úplně stejně.
Rozměry — stabilita vzhledu
Když obrázek nemá v kódu uvedenou šířku a výšku, prohlížeč neví, kolik místa mu nechat. Obsah se proto během načítání posune — zrovna když chcete kliknout na odkaz, naskočí fotka a vy kliknete jinam. To je vysoké CLS (posouvání obsahu při načítání) a je to jeden z nejotravnějších zážitků na mobilu.
Popisek alt — vyhledávání a přístupnost
Alt je krátký textový popis obrázku. Přečte ho Google (pomáhá mu pochopit obsah i zobrazit fotku ve vyhledávání obrázků) a přečtou ho i čtečky obrazovky pro nevidomé. Chybějící popisek znamená horší viditelnost ve vyhledávači i horší použitelnost pro lidi se zrakovým postižením.
Jak velké fotky poznáte v Průzkumníku
Průzkumník na puluno.io při skenu změří úvodní stránku a mezi nálezy ukáže příliš velké obrázky jako konkrétní tip — jak jsou velké a kolik dat by šlo ušetřit.
- Otevřete Průzkumník a zadejte adresu webu.
- Počkejte na dokončení skenu.
- V Přehledu najděte nález o obrázcích a panel Core Web Vitals (hlavně LCP).
- U nálezu uvidíte, které fotky web nejvíc zpomalují a co s nimi.
Formáty srozumitelně: JPG, WebP a AVIF
Nemusíte znát technické detaily, stačí pořadí od starších po úspornější:
- 1JPG / PNGstarší formáty, většinou zbytečně velké soubory
- 2WebPmoderní, typicky o 25–35 % menší při stejné kvalitě
- 3AVIFnejnovější, ještě menší soubory, dává smysl u velkých fotek
Pointa je, že původní soubor zůstane a vedle něj se vytvoří úspornější verze. Prohlížeč návštěvníka si pak sám stáhne tu, kterou umí — novější dostane WebP nebo AVIF, starší JPG. Nemusíte nic ručně převádět ani se bát, že přijdete o původní fotky.
Co s tím ve WordPressu (bez programování)
Všechno výše vyřešíte v administraci, aniž byste sahali do kódu:
- Zmenšete největší fotky. Modul Puluno Images projde knihovnu médií, seřadí obrázky od největších a zmenší je. Původní soubor zůstane v záloze, takže se nic nepokazí.
- Doplňte WebP (u velkých fotek i AVIF). Images vytvoří úspornější verzi vedle originálu — návštěvník stáhne jen tu menší.
- Hlídejte rozměry. Když obrázky mají uvedenou šířku a výšku, obsah při načítání neposkakuje (lepší CLS).
- Doplňte chybějící popisky alt. Pomáhá to ve vyhledávání i přístupnosti; nálezy najdete ve skenu.
Proč se to vyplatí
Menší soubory fotek znamenají rychlejší web (návštěvník zůstane), lepší pozici v Googlu (rychlost je součást hodnocení) a přístupnější web díky popiskům alt. U e-shopu s velkou galerií je rozdíl vidět hned na rychlosti i na počtu dokončených nákupů — a přitom fotky vypadají pro oko stejně.
Když chcete řešit obrázky spolu s rychlostí a vyhledáváním najednou, podívejte se na ceník modulů.
Shrnutí: Velké fotky jsou nejčastější důvod, proč je web pomalý. Zmenšete největší soubory, doplňte WebP/AVIF vedle originálu, uveďte rozměry a doplňte popisky alt. Největší obrázky najdete ve skenu v Průzkumníku a opravíte je v modulu Puluno Images — bez programování a s možností vrátit se k původním souborům.