(00:00) Zlepšete rychlost načítání webu vhodným formátem obrázků

(00:20) Používejte moderní formáty

(01:11) Zvolte správné rozměry

(01:54) Automatizace a serverové workflow

(02:22) Lazy loading

(02:47) Použijte CDN

(03:07) Monitorujte výkon

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í.

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 nebo srcset u 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ů . 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

This is a public episode. If you would like to discuss this with other subscribers or get access to bonus episodes, visit www.reknisioweb.cz