Preskoči na sadržaj
BeoHosting
BeoHosting

10 min

Come ottimizzare le immagini per il web

WebP, AVIF, lazy loading, CDN e srcset.

BeoHosting Tim

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

Poslednje ažurirano:

Le immagini rappresentano di solito il 60-80% del peso totale di una pagina. Ottimizzarle è il singolo guadagno di prestazioni più grande che puoi ottenere. WebP e AVIF riducono la dimensione dei file del 25-50% rispetto a JPEG e PNG senza perdita di qualità visibile, il lazy loading rimanda il caricamento delle immagini fuori schermo e srcset serve la dimensione giusta per ogni dispositivo. Questa guida illustra ciascuna tecnica con impostazioni pratiche.

Come ottimizzare le immagini per il web

1

Scegli il formato giusto — WebP/AVIF

WebP: 25-35% più piccolo del JPEG, supportato da tutti i browser moderni. AVIF: 30-50% più piccolo del WebP ma con supporto ancora parziale: usalo con fallback WebP/JPEG. PNG solo per la trasparenza. SVG per loghi e icone.

2

Ridimensiona prima del caricamento

Non caricare mai una foto reflex da 6000x4000 px per visualizzarla a 800 px di larghezza. Ridimensiona alle dimensioni effettive di visualizzazione × 2 per il retina. Ridimensiona in blocco centinaia di file con FastStone Photo Resizer.

3

Comprimi con strumenti intelligenti

WordPress: ShortPixel, Imagify, Smush, EWWW. Fuori da WordPress: TinyPNG, Squoosh. Punta a una qualità JPEG del 70-85%: visivamente identica al 100% ma con dimensioni molto più ridotte.

4

Abilita il lazy loading

Nativo: <img loading="lazy">. WordPress 5.5+ lo aggiunge automaticamente. Per i browser più vecchi, usa la libreria JS Lazysizes. Il lazy load rimanda le immagini fuori schermo: enorme spinta ai Core Web Vitals.

5

Usa srcset per le immagini responsive

<img srcset="img-400.jpg 400w, img-800.jpg 800w, img-1600.jpg 1600w" sizes="(max-width: 600px) 400px, 800px"> — il browser sceglie la dimensione giusta. WordPress genera automaticamente srcset.

6

Servi tramite CDN

Una CDN (Cloudflare, BunnyCDN) serve le immagini da un server vicino al visitatore: riduce la latenza di 50-200 ms. Cloudflare Polish converte automaticamente in WebP/AVIF. BeoHosting si integra con la CDN QUIC.cloud per gli utenti di 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.

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

FAQ

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

Il WebP è supportato universalmente e riduce le dimensioni del 25-35%. L'AVIF è ancora più piccolo (30-50%) ma assente in alcuni browser più vecchi. La soluzione migliore: servire AVIF con fallback WebP e JPEG/PNG come fallback finale.

In genere: JPEG → WebP 30%, PNG → WebP 40%, WebP → AVIF 30%. Combinato con il ridimensionamento, una foto reflex da 2 MB diventa 150-300 KB con la stessa qualità visiva.

No: Google comprende il lazy loading nativo. Assicurati solo che le immagini above-the-fold NON siano in lazy loading (devono caricarsi subito per l'LCP).

ShortPixel per il miglior rapporto compressione-qualità. Imagify lo segue da vicino. Smush è gratuito e va bene per le esigenze di base. EWWW mantiene i file in locale senza API esterne.

I Core Web Vitals sono le metriche di esperienza utente di Google: LCP (Largest Contentful Paint — tempo di caricamento dell'elemento più grande), CLS (Cumulative Layout Shift — stabilità visiva) e INP (Interaction to Next Paint — interattività). Le immagini influenzano direttamente l'LCP perché l'elemento più grande di una pagina è quasi sempre un'immagine. Immagini ottimizzate con attributi width/height definiti migliorano sia l'LCP sia il 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.