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

10 min

How to Optimize Images for the Web

WebP, AVIF, lazy loading, CDN and srcset.

WordPress HostingGuides

BeoHosting Tim

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

Poslednje ažurirano:

Images are usually 60-80% of total page weight. Optimizing them is the single biggest performance win you can get. WebP and AVIF cut file size by 25-50% versus JPEG and PNG without visible quality loss, lazy loading defers off-screen images, and srcset serves the right size per device. This guide covers each technique with practical settings.

How to Optimize Images for the Web

1

Choose the right format — WebP/AVIF

WebP: 25-35% smaller than JPEG, supported in all modern browsers. AVIF: 30-50% smaller than WebP but still partial support — use with WebP/JPEG fallback. PNG only for transparency. SVG for logos and icons.

2

Resize before upload

Never upload a 6000x4000 px DSLR photo to display at 800 px wide. Resize to actual display dimensions × 2 for retina. Bulk resize hundreds of files with FastStone Photo Resizer.

3

Compress with smart tools

WordPress: ShortPixel, Imagify, Smush, EWWW. Outside WordPress: TinyPNG, Squoosh. Target 70-85% JPEG quality — visually identical to 100% at much smaller size.

4

Enable lazy loading

Native: <img loading="lazy">. WordPress 5.5+ adds this automatically. For older browsers, use Lazysizes JS library. Lazy load defers off-screen images — massive Core Web Vitals boost.

5

Use srcset for responsive images

<img srcset="img-400.jpg 400w, img-800.jpg 800w, img-1600.jpg 1600w" sizes="(max-width: 600px) 400px, 800px"> — browser picks right size. WordPress generates srcset automatically.

6

Serve from CDN

A CDN (Cloudflare, BunnyCDN) serves images from a server close to the visitor — cuts latency 50-200 ms. Cloudflare Polish auto-converts to WebP/AVIF. BeoHosting integrates with QUIC.cloud CDN for LiteSpeed Cache users.

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 is universally supported and cuts size 25-35%. AVIF is even smaller (30-50%) but missing in some older browsers. Best: serve AVIF with WebP fallback, JPEG/PNG as final fallback.

Typical: JPEG → WebP 30%, PNG → WebP 40%, WebP → AVIF 30%. Combined with resizing, a 2 MB DSLR photo becomes 150-300 KB at the same visual quality.

No — Google understands native lazy loading. Just make sure above-the-fold images are NOT lazy loaded (they should load immediately for LCP).

ShortPixel for the best compression-to-quality ratio. Imagify is a close second. Smush is free and fine for basic needs. EWWW keeps files local without external API.

Core Web Vitals are Google's user-experience metrics: LCP (Largest Contentful Paint — load time of the largest element), CLS (Cumulative Layout Shift — visual stability) and INP (Interaction to Next Paint — interactivity). Images directly affect LCP because the largest element on a page is most often an image. Optimized images with defined width/height attributes improve both LCP and 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