Zlepšete rychlost načítání webu vhodným formátem obrázků
Rychlé načítání webu zlepšuje uživatelskou zkušenost, ale i SEO. Nejjednodušším způsobem, jak zmenšit velikost stránky, a tím urychlit načítání, je zaměřit se na obrázky. Správně optimalizované obrázky mohou významně snížit dobu načítání stránek. Jak na to?
Používejte moderní formáty
Nové obrázkové formáty WebP a AVIF nabízejí vyšší kvalitu při nižší velikosti než tradiční JPEG, PNG a GIF. Od letošního roku podporují všechny hlavní platformy webu formáty WebP i AVIF.
Pokud se obáváte nižší podpory v prohlížečích, můžete nabídnout prohlížeči alternativní formáty a nechat mu na výběr, který zvolí.
<picture>
<source srcset="obraz.avif" type="image/avif">
<source srcset="obraz.webp" type="image/webp">
<img src="obraz.png" alt="Popis obrázku">
</picture>Pěkný návod najdete na Vzhůru dolů.
Pokud budete obrázky konvertovat ručně, pomůžou vám s tím i online utilitky jako třeba Convertio.
I u tradičních formátů jako JPEG, PNG nebo GIF dosáhnete lepších výsledků při vhodné optimalizaci. Webové utility jako TinyJPG nebo Squoosh můžete doplnit desktopovými ImageOptim pro macOS nebo FileOptimizer pro Windows, se kterými lze pracovat i v dávkách.
Zvolte správné rozměry
Obrázky by měly odpovídat rozlišení, ve kterém se zobrazují. Příliš velké obrázky zbytečně zatěžují načítání. Nemá smysl nabízet stejný obrázek pro upoutávku na úvodní straně jako na detailu článku.
Samostatnou kapitolou je doručení různých velikost obrázků retinovým zařízením s dvojnásobnou nebo trojnásobnou hustotou zobrazovacích bodů. V responzivním zobrazení můžeme prohlížeči dát na výběr z různých velikostí obrázků podle skutečné šířky zobrazení. I tady můžeme použít značku <picture> nebo srcset u obrázku:
<img
src="obraz-640.jpg"
srcset="obraz-320.jpg 320w, obraz-640.jpg 640w, obraz-1280.jpg 1280w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Popis obrázku">Ani tentokrát nás Martin Michálek nenechá na holičkách a nabízí článek o srcset a sizes na Vzhůru dolů.
Automatizace a serverové workflow
Počítače jsou tu od toho, aby lidem pomáhaly, ne aby je úkolovaly. Převádět stovky obrázků do několika formátů a velikostí velmi dobře zvládnou serverové knihovny. Pro dynamické weby se stovkami obrázků doporučujeme zavést serverové workflow. Například knihovna ImageMagick nebo nástroj Sharp umožní automatické převádění obrázků do moderních formátů a přizpůsobení rozměrů.
Lazy loading
Pocitově rychlejšímu načtení pomůže lazy loading – načtení obrázků, až když se dostávají do viewportu. Stačí přidat atribut loading="lazy" do HTML elementů <img>. Od loňského prosince atribut podporují všechny hlavní platformy prohlížečů.
Pokud by vám takhle stručné doporučení nestačilo, i tady nabízí článek o lazy loadingu obrázků blog Vzhůru dolů.
Použijte CDN
Content Delivery Network (CDN) jako Cloudflare nebo ImageKit nejen zrychlí doručování obrázků uživatelům, ale často nabízí i automatickou optimalizaci a konverzi do moderních formátů.
CDN zároveň odlehčí zátěži vašeho serveru, takže zvládne požadavky obsluhovat rychleji.
Monitorujte výkon
Sledujte načítání pomocí nástrojů jako Google PageSpeed Insights nebo českého PageSpeed.cz. Tyto nástroje vám doporučí další zlepšení.
Optimalizace obrázků je skvělý začátek pro zrychlení vašeho webu. Nejenže ulehčíte uživatelům, ale také získáte body u vyhledávačů! 🎄01
(Obrázek vánoční sněhové vločky v upoutávce pochází z ProSymbols na webu The Noun Project, CC BY 3.0)