Preskoči na sadržaj
(+381) 60 3535 720
Moj nalog
BeoHosting
BeoHosting
Moj nalogKontakt
(+381) 60 3535 720
 

10 min

Jak optimalizovat obrázky pro web

WebP, AVIF, lazy loading, CDN a srcset.

WordPress HostingGuides

BeoHosting Tim

10+ godina iskustva — Stručnjaci za web hosting i infrastrukturu

Poslednje ažurirano:

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.

Spremni da pokrenete svoj sajt?

SSL zaštita
Brzina
24/7 podrška

Pridružite se 4.000+ zadovoljnih korisnika. Besplatna migracija i 15 dana garancije povrata novca.

Izaberite paketKontaktirajte nas
15 dana garancija povrata novca
Besplatna migracija15 dana garancija24/7 podrška

FAQ

Odgovori na najčešća pitanja o našim uslugama.

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 garancije za vaš mir

Zaštićeni ste sa svake strane

15 dana garancije

Vraćamo novac bez pitanja u prvih 15 dana.

Besplatna migracija

Mi prebacimo vaš sajt bez prekida — vi ništa ne radite.

24/7 podrška

Naši stručnjaci su tu 24/7 kroz tikete i live chat.

Guides