Jak optimalizovat obrázky pro rychlost a SEO

Obrázky jsou klíčovým prvkem každého webu – dokážou zvýšit atraktivitu obsahu, zlepšit uživatelský dojem a pomoci s budováním značky. Pokud však nejsou správně optimalizované, mohou zpomalit načítání stránky a poškodit vaše SEO výsledky. Google v rámci Core Web Vitals sleduje rychlost a stabilitu webu, takže práce s obrázky má přímý vliv na vaše pozice.

Proč je optimalizace obrázků důležitá

1. Rychlost načítání – velké soubory zpomalují web a zvyšují míru odchodů uživatelů.
2. Lepší indexace – Google Images je významný zdroj návštěvnosti, pokud používáte správné atributy a názvy.
3. Vyšší konverze – rychlejší weby zvyšují spokojenost uživatelů a tím i konverzní poměr.
4. Core Web Vitals – metriky jako LCP (Largest Contentful Paint) často souvisejí s obrázky.

Jak obrázky správně optimalizovat

1. Správný formát

• WebP – moderní formát podporovaný většinou prohlížečů, až o 30 % menší než JPEG/PNG.
• AVIF – ještě úspornější než WebP, vhodný pro budoucnost.
• JPEG – dobrý kompromis u fotografií, pokud nelze použít modernější formáty.
• PNG – používejte jen tam, kde je nutná průhlednost.
• SVG – ideální pro loga, ikony a ilustrace díky škálovatelnosti.

2. Komprese obrázků

• Používejte nástroje jako TinyPNG, Squoosh, ImageOptim nebo pluginy pro CMS (např. Smush, ShortPixel).
• Komprese by měla snížit velikost bez ztráty viditelné kvality.

3. Rozměry obrázků

• Nahrajte pouze tak velké rozlišení, jaké je opravdu potřeba.
• Nepoužívejte 4000px široký obrázek, když ho web zobrazuje jen na 1200px.
• V CSS nebo HTML nastavte width a height, aby nedocházelo k posunu obsahu (CLS).

4. Lazy loading

• Zapněte lazy loading (loading="lazy") – obrázky mimo viditelnou část se načtou až při scrollování.
• Zlepší to rychlost prvního načtení stránky.

5. Alt text a názvy souborů

• Popisujte obrázek v alt atributu – slouží pro SEO i přístupnost.
• Používejte klíčová slova přirozeně, např. moderni-kancelarska-zidle.jpg místo IMG_1234.jpg.

6. CDN pro obrázky

• Využívejte CDN (Content Delivery Network), aby se obrázky načítaly z geograficky nejbližšího serveru.
• Příklady: Cloudflare Images, BunnyCDN, Akamai.

7. Moderní techniky

• Srcset – umožňuje načítat různé velikosti obrázků podle zařízení (mobil, tablet, desktop).
• Responsive images – <picture> element, kde můžete kombinovat formáty a rozměry.
• Preload klíčových obrázků – např. hero banneru, který se načítá jako první.

Příklad pro WordPress

• Pluginy jako Imagify, EWWW Image Optimizer nebo ShortPixel dokážou automaticky převádět obrázky do WebP, komprimovat je a nastavovat lazy loading.
• Doporučuje se kombinace s cache pluginy (např. WP Rocket).

Příklad pro e-shopy (např. WooCommerce, Shoptet)

• Produkty mají desítky obrázků – zde je kritická automatická komprese.
• U větších katalogů se vyplatí využít specializované image servery nebo CDN.