Přejít k obsahu
(+381) 60 3535 720
Můj účet
BeoHosting
BeoHosting
Můj účetKontakt
(+381) 60 3535 720
 

10 min

Jak optimalizovat obrázky pro web

WebP, AVIF, lazy loading, CDN a srcset.

WordPress HostingGuides

Tým BeoHosting

10+ let zkušeností — Specialisté na webhosting a infrastrukturu

Naposledy aktualizováno:

Obrázky obvykle tvoří 60–80 % celkové váhy stránky. Jejich optimalizace je tím největším jednotlivým výkonnostním ziskem, který můžete získat. WebP a AVIF zmenší velikost souboru o 25–50 % oproti JPEG a PNG bez viditelné ztráty kvality, lazy loading odkládá obrázky mimo obrazovku a srcset doručuje správnou velikost podle zařízení. Tento návod pokrývá každou techniku s praktickým nastavením.

Jak optimalizovat obrázky pro web

1

Vyberte správný formát – WebP/AVIF

WebP: o 25–35 % menší než JPEG, podporovaný ve všech moderních prohlížečích. AVIF: o 30–50 % menší než WebP, ale stále jen částečná podpora – používejte se zálohou WebP/JPEG. PNG jen pro průhlednost. SVG pro loga a ikony.

2

Změňte velikost před nahráním

Nikdy nenahrávejte fotografii z DSLR 6000×4000 px, aby se zobrazila na 800 px šířku. Změňte velikost na skutečné rozměry zobrazení × 2 pro retina. Hromadnou změnu velikosti stovek souborů zvládne FastStone Photo Resizer.

3

Komprimujte chytrými nástroji

WordPress: ShortPixel, Imagify, Smush, EWWW. Mimo WordPress: TinyPNG, Squoosh. Cílte na kvalitu JPEG 70–85 % – vizuálně identické se 100 % při mnohem menší velikosti.

4

Zapněte lazy loading

Nativně: <img loading="lazy">. WordPress 5.5+ to přidává automaticky. Pro starší prohlížeče použijte JS knihovnu Lazysizes. Lazy load odkládá obrázky mimo obrazovku – obrovský přínos pro Core Web Vitals.

5

Použijte srcset pro responzivní obrázky

<img srcset="img-400.jpg 400w, img-800.jpg 800w, img-1600.jpg 1600w" sizes="(max-width: 600px) 400px, 800px"> – prohlížeč vybere správnou velikost. WordPress generuje srcset automaticky.

6

Doručujte z CDN

CDN (Cloudflare, BunnyCDN) doručuje obrázky ze serveru blízko návštěvníkovi – zkracuje latenci o 50–200 ms. Cloudflare Polish automaticky převádí na WebP/AVIF. BeoHosting se integruje s QUIC.cloud CDN pro uživatele LiteSpeed Cache.

Připraveni spustit svůj web?

SSL ochrana
Rychlost
Podpora 24/7

Připojte se k více než 4 000 spokojeným zákazníkům. Bezplatná migrace a 15denní záruka vrácení peněz.

Vyberte tarifKontaktujte nás
15denní záruka vrácení peněz
Bezplatná migrace15denní zárukaPodpora 24/7

FAQ

Odpovědi na nejčastější dotazy o našich službách.

WebP je univerzálně podporovaný a zmenší velikost o 25–35 %. AVIF je ještě menší (30–50 %), ale chybí v některých starších prohlížečích. Nejlepší: doručujte AVIF se zálohou WebP a JPEG/PNG jako finální zálohou.

Typicky: JPEG → WebP 30 %, PNG → WebP 40 %, WebP → AVIF 30 %. V kombinaci se změnou velikosti se z fotografie DSLR o 2 MB stane 150–300 KB při stejné vizuální kvalitě.

Ne – Google nativnímu lazy loadingu rozumí. Jen zajistěte, aby obrázky nad ohybem NEBYLY lazy loaded (měly by se načítat okamžitě kvůli LCP).

ShortPixel pro nejlepší poměr komprese ke kvalitě. Imagify je těsně druhý. Smush je zdarma a pro základní potřeby v pořádku. EWWW udržuje soubory lokálně bez externího API.

Core Web Vitals jsou metriky uživatelského zážitku od Googlu: LCP (Largest Contentful Paint – doba načtení největšího prvku), CLS (Cumulative Layout Shift – vizuální stabilita) a INP (Interaction to Next Paint – interaktivita). Obrázky přímo ovlivňují LCP, protože největším prvkem na stránce bývá nejčastěji obrázek. Optimalizované obrázky s definovanými atributy šířky/výšky zlepšují LCP i CLS.

Naše záruky pro váš klid

Chráněni ze všech stran

15denní záruka

V prvních 15 dnech vracíme peníze bez otázek.

Bezplatná migrace

Váš web přemigrujeme bez výpadku — vy neuděláte nic.

Podpora 24/7

Naši odborníci jsou tu 24/7 prostřednictvím ticketů a live chatu.

Guides