Ottimizzazione delle immagini per il Web: guida completa

Il caricamento lento delle pagine uccide le conversioni. Gli studi mostrano che il 40% degli utenti abbandona un sito che impiega più di 3 secondi. La causa più grande? Immagini non ottimizzate. Una singola foto da 5 MB sulla tua home page può aumentare i tempi di caricamento anche con connessioni veloci.

L'elenco di controllo per l'ottimizzazione delle immagini

Dimensioni giuste: non spedire un'immagine da 4000 px dove visualizzi 800 px
Formato corretto: WebP/AVIF moderno, JPG/PNG di riserva
Compressione corretta: qualità 75-85% per le foto, senza perdite per la grafica
Consegna corretta: caricamento lento, srcset reattivo

Dimensioni consigliate nel 2026

Immagini Hero: 1920×1080 (Full HD) o 2560×1440 (2K) massimo
Eroe post blog: 1200×675 (16:9)
Foto del prodotto: 1500×1500 con supporto zoom, visualizzazione predefinita 800×800
Avatar: 256×256 (le miniature verranno ridimensionate)
Open Graph (condivisione social): 1200×630
Favicon: 32×32, 192×192, 512×512 PNG

Ridimensiona le foto a queste dimensioni con il nostro strumento di ridimensionamento delle immagini prima del caricamento.

Formati: quando usare cosa

WebP: predefinito per il 95% delle immagini web. 25–35% più piccolo di JPG con la stessa qualità. Supporto universale del browser.
AVIF: ancora più piccolo (50% più piccolo di JPG). Utilizzare per le immagini degli eroi. I browser più recenti lo supportano.
JPG: fotografie senza trasparenza. Eccellente compatibilità.
PNG: loghi, screenshot, qualsiasi cosa con trasparenza. Senza perdite.
SVG: grafica vettoriale, icone, illustrazioni semplici. Dimensioni file ridotte, scalabilità infinita.

Converti tra questi formati con PDF7 Image Convert.

Compressione: quanto aggressivo è troppo aggressivo?

Per le foto: inizia con una qualità dell'85%. Scendi al 75% per le pagine critiche per la larghezza di banda. Al di sotto del 70%, gli artefatti diventano visibili. Utilizza il nostro strumento di compressione immagini per trovare il giusto equilibrio.

Immagini reattive con srcset

Non pubblicare un'immagine 2K su un telefono. Utilizza l'attributo srcset dell'HTML:

Il browser seleziona l'immagine più piccola adatta. Avrai bisogno di 3 dimensioni per immagine.

Caricamento lento

Aggiungi loading="lazy" a tutte le immagini Below the Fold. I browser moderni non li caricano finché l'utente non scorre nelle vicinanze, risparmiando larghezza di banda ad ogni caricamento della pagina.

La regola dei 100KB

Punta a immagini singole di dimensioni inferiori a 100 KB. Le immagini Hero possono estendersi fino a 200 KB. Se una singola foto supera i 500 KB, hai commesso un errore: ridimensiona e comprimi nuovamente.