Ottimizzare le immagini per il sito web: dimensioni, formato e caricamento

Per ottimizzare le immagini del Suo sito web, proceda in quest’ordine: porti ogni immagine alla larghezza con cui viene effettivamente mostrata (circa il doppio per gli schermi ad alta densità), la salvi in un formato moderno come WebP o AVIF con un JPEG o un PNG di riserva, la comprima a una qualità in cui la differenza non si vede e rimuova i metadati che non servono a nessuno. Poi l’HTML fa la sua parte: più dimensioni in srcset, gli attributi width e height e il caricamento differito per le immagini più in basso nella pagina.

Questa guida spiega perché ogni passaggio conta, da quali impostazioni partire e come fare tutto nel browser con SchweizerIMG — per un’immagine o per un’intera cartella.

Perché le immagini decidono la velocità del Suo sito

Sulla maggior parte dei siti, le immagini costituiscono una grande parte dei dati che un browser deve scaricare. Ogni kilobyte superfluo costa tempo su una connessione mobile, e l’immagine più grande in cima alla pagina è spesso proprio l’elemento che i visitatori aspettano. I motori di ricerca tengono conto della velocità delle pagine a modo loro: immagini più leggere aiutano quindi prima i visitatori e poi la visibilità. I motivi più comuni per cui un’immagine è troppo pesante:

• Troppi pixel. Una foto appena scattata con lo smartphone o la fotocamera è larga diverse migliaia di pixel; una colonna di contenuto ne mostra raramente più di una frazione.
• Un formato poco adatto. Una foto salvata in PNG è molte volte più pesante del necessario; uno screenshot salvato in JPEG di bassa qualità appare sfocato.
• Una qualità troppo alta. Oltre un certo punto, un valore di qualità più alto aggiunge solo byte che l’occhio non vede.
• Extra invisibili. Dati della fotocamera, coordinate GPS, cronologia delle modifiche e anteprime incorporate viaggiano con ogni download.

Quali dimensioni servono alle immagini di un sito web?

Parta da una domanda: quanto è larga questa immagine nella pagina? Lo verifichi nel layout o con gli strumenti per sviluppatori del browser. Smartphone, tablet e molti portatili hanno schermi ad alta densità che usano due o più pixel fisici per pixel CSS: un’immagine mostrata a 800 pixel di larghezza appare nitida se il file è largo circa 1600 pixel. Andare molto oltre il doppio della larghezza di visualizzazione raramente migliora ciò che vedono i visitatori, ma appesantisce sempre il file. Alcuni valori di partenza:

In SchweizerIMG, Ridimensiona con «Lato lungo» o «Adatta in un riquadro» porta un intero lotto alla dimensione desiderata, con un ricampionamento di alta qualità e una nitidezza facoltativa dopo la riduzione. Le immagini più piccole non vengono ingrandite, a meno che non lo consenta — ingrandire aggiunge pixel, non dettagli.

Formati moderni: WebP e AVIF con una soluzione di riserva

Il formato decide con quanta efficienza vengono memorizzati i pixel. Per le foto sul web, i due formati moderni danno di solito file nettamente più leggeri del JPEG a parità di qualità visibile:

• WebP — supportato da tutti i principali browser attuali, con trasparenza e animazione. Una scelta predefinita sicura per foto e grafiche.
• AVIF — spesso ancora più leggero, soprattutto per file piccoli, e supportato dalle versioni attuali dei principali browser. La codifica richiede più tempo, cosa che si nota nei lotti grandi.
• JPEG — il formato di riserva che funziona ovunque, anche nei browser meno recenti, nelle e-mail e in quasi tutti i software.
• PNG — per screenshot, grafiche di interfaccia e immagini che richiedono pixel esatti o trasparenza; troppo pesante per le foto.
• SVG — per loghi e icone disegnati anziché fotografati: nitidi a ogni dimensione e di solito minuscoli.

Con l’elemento HTML <picture>, il browser prende il primo formato che supporta: può quindi offrire AVIF e WebP e tenere il JPEG come rete di sicurezza. Punti di forza e limiti di ogni formato sono confrontati in WebP, AVIF, JPEG e PNG: le differenze.

Quale compressione per le immagini di un sito?

I formati con perdita scambiano un po’ di dettaglio invisibile con file molto più leggeri. L’impostazione giusta dipende dall’immagine: un paesaggio ricco di dettagli richiede una qualità più alta di un ritratto con lo sfondo sfocato (spiegazioni in la compressione delle immagini spiegata). Invece di indovinare un valore, lasci misurare lo strumento. Comprimi immagine offre quattro modalità:

• Automatica, con i livelli Leggera, Consigliata o Forte — cerca la qualità più bassa che raggiunge ancora una somiglianza misurata con l’originale per il livello scelto.
• Scegliere la qualità — un valore fisso da 1 a 100, se sa già cosa funziona per il Suo sito.
• Dimensione del file di destinazione — comprime finché l’immagine rispetta un limite e, se lo consente, ne riduce anche le dimensioni.
• Solo senza perdita — per screenshot e grafiche che devono restare esatte al pixel.

Se «Salva come» è impostato su «Il più piccolo tra WebP, AVIF e JPEG», lo strumento prova questi formati e tiene il risultato più leggero; il risultato non è mai più pesante dell’originale. Per verificarlo, Confronta immagini mostra originale e risultato con un cursore o affiancati, insieme a misure di somiglianza.

Poi rimuova ciò che nessuno vede. Modello della fotocamera, numeri di serie, coordinate GPS, cronologia delle modifiche e anteprime incorporate non servono ai visitatori. Rimuovi metadati li elimina senza perdita, senza ricodificare i pixel; anche Ridimensiona, Comprimi immagine, Converti formato e Ottimizza per il web hanno una propria impostazione per i metadati. Cosa possono rivelare questi dettagli è spiegato in cosa rivelano le Sue foto.

L’HTML aiuta: srcset, width e height, caricamento differito

I file ottimizzati sono metà del lavoro; l’altra metà è il modo in cui la pagina li carica — pratiche web generali, valide con qualsiasi sistema per siti:

• `srcset` e `sizes` offrono la stessa immagine in più larghezze: uno smartphone scarica una versione piccola, uno schermo grande una versione grande.
• Gli attributi `width` e `height` comunicano al browser le proporzioni dell’immagine prima che arrivi. Il browser riserva lo spazio e il testo sottostante non salta quando l’immagine compare.
• `loading="lazy"` rimanda il caricamento delle immagini più in basso finché il visitatore non si avvicina scorrendo. Non lo usi per l’immagine principale in alto: quella deve caricarsi subito.
• Un’immagine grande in alto, non cinque. L’elemento più grande visibile all’apertura della pagina è ciò che i visitatori percepiscono come «caricato».

Quest’ultimo punto ha un nome: Largest Contentful Paint (LCP), il tempo necessario per mostrare l’immagine o il blocco di testo più grande dell’area visibile. È definito in una specifica del W3C ed è una delle misure comunemente usate per valutare la velocità di una pagina. Un’immagine di testata leggera, delle dimensioni giuste e senza caricamento differito è uno dei modi più diretti per migliorarlo.

Ottimizzare le immagini del sito con SchweizerIMG

Ogni passaggio si svolge nel Suo browser: le immagini vengono elaborate sul Suo dispositivo e non ci vengono mai caricate, cosa importante per le immagini non ancora pubbliche (maggiori dettagli nella pagina sicurezza). Ogni strumento elabora un intero lotto in un’elaborazione, e un’elaborazione è un’operazione, indipendentemente dal numero di file.

1. 1

   Portare alla dimensione di visualizzazione

   Apra Ridimensiona, aggiunga le immagini e scelga «Lato lungo» o «Adatta in un riquadro» con la larghezza stabilita — il doppio della larghezza di visualizzazione per gli schermi ad alta densità.

2. 2

   Comprimere o convertire

   Usi Comprimi immagine con «Il più piccolo tra WebP, AVIF e JPEG», oppure Converti formato se Le serve un formato preciso. Continua con un altro strumento passa i risultati senza scaricarli nel frattempo — veda concatenare gli strumenti.

3. 3

   Rimuovere i metadati

   Concluda con Rimuovi metadati, oppure imposti su «Rimuovi» l’opzione dei metadati dello strumento precedente.

4. 4

   Scaricare e pubblicare

   Salvi i risultati subito dopo l’elaborazione — esistono solo nella scheda aperta — e li pubblichi come di consueto.

Per il Suo sito, Ottimizza per il web riunisce questi passaggi in un’unica elaborazione: crea più larghezze (per impostazione predefinita da 480 a 2400 pixel, mai più grandi dell’originale) in AVIF, WebP e JPEG, rimuove i metadati per impostazione predefinita e scrive uno snippet <picture> pronto da incollare con srcset, sizes, width, height e caricamento differito o immediato, più un manifest di tutti i file. Quali piani includono Ottimizza per il web è indicato nella pagina dei prezzi. Maggiori dettagli sui lotti: elaborare più immagini insieme.

Domande frequenti

Qual è la dimensione ideale delle immagini per un sito web?

Non esiste un numero unico: esporti ogni immagine alla sua larghezza di visualizzazione, e circa al doppio per gli schermi ad alta densità. Un’immagine di testata a tutta larghezza trae vantaggio da più dimensioni offerte con srcset.

Meglio usare WebP o AVIF sul mio sito?

Entrambi sono buone scelte. WebP è l’opzione sicura con un ampio supporto; AVIF produce spesso file più leggeri, ma la codifica richiede più tempo. Offrendo entrambi in un elemento <picture> con un JPEG di riserva, ogni browser riceve il miglior formato che sa mostrare.

Bisogna caricare in modo differito tutte le immagini?

No. Il caricamento differito è utile per le immagini più in basso nella pagina. L’immagine principale visibile in alto deve caricarsi subito — ritardarla fa sembrare la pagina più lenta, non più veloce.

Rimuovere i metadati rende le immagini più leggere?

Di solito solo un po’: nella maggior parte delle foto i metadati sono una piccola parte del file. Anteprime incorporate, grandi profili colore o lunghe cronologie delle modifiche possono pesare di più. Il motivo principale per rimuoverli dalle immagini web è la protezione dei dati, più che la dimensione.

Pronto per pagine più leggere? Apra gli strumenti di ottimizzazione, legga come funziona comprimere e convertire immagini, segua il procedimento per le foto di prodotto del negozio online oppure crei un account gratuito.