Analizzatore Compressione Immagini
Risposta breve
Controlla peso, formati e risparmio di compressione delle immagini, oltre al markup responsive: srcset, larghezza e altezza e lazy loading.
Cosa fa
Controlla fino a 15 immagini di una pagina per formato e dimensione del file, segnala quelle ancora servite come JPEG o PNG invece di WebP o AVIF, e stima i byte che risparmieresti convertendole in WebP. Una seconda parte controlla ogni `<img>` per il markup responsive: un `srcset`, gli attributi `width` e `height` che prevengono lo spostamento del layout, il caricamento lazy per le immagini fuori schermo e i formati moderni.
Perché è importante
Le immagini sono spesso la parte più pesante di una pagina e spesso il suo elemento Largest Contentful Paint. Inviare JPEG a dimensione piena agli smartphone spreca dati e rallenta quel rendering, e le immagini senza width e height fanno saltare il layout mentre si caricano, il che danneggia il Cumulative Layout Shift.
Come funziona
-
Inserisci l'URL di una pagina
-
Elenchiamo le immagini della pagina e controlliamo formato e dimensione di un massimo di 15
-
Stimiamo il risparmio con WebP, poi controlliamo ogni `<img>` per srcset, dimensioni e caricamento lazy
-
Restituiamo un risultato per ciascuna parte, con le immagini più pesanti e quelle prive di markup responsive
Esempio di input e output
url: https://rankproof.eu/tools
Peso e formati delle immagini immagini controllate: 15 formato moderno (WebP/AVIF): 11 / 15 warn peso totale immagini: 890 KB OK (sotto 1 MB) risparmio stimato con WebP: 64 KB più pesante: /images/hero-banner.jpg — 210 KB Immagini responsive: 18 con srcset: 18 OK width e height impostati: 18 OK (nessuno spostamento del layout) le immagini fuori schermo si caricano in differita OK 1 area su 2 è a posto
Chi lo usa
-
Responsabile e-commerce
Controlla le pagine di categoria e prodotto alla ricerca di immagini ancora servite come JPEG o PNG alla dimensione originale della fotocamera.
-
Content manager
Individua i caricamenti che hanno saltato il ridimensionamento, e le pagine dove le immagini mancano di srcset o dimensioni.
-
Ingegnere delle performance
Stima quanto risparmieresti con una conversione in WebP prima di scegliere una pipeline per le immagini.
Domande frequenti
Quanto posso risparmiare?
Il report stima i byte risparmiati convertendo in WebP ogni immagine non in un formato moderno. Il risparmio reale dipende dall'immagine e dall'impostazione di qualità scelta.
La compressione danneggia la qualità dell'immagine?
Con impostazioni di qualità ragionevoli, i formati moderni appaiono uguali alla maggior parte delle persone. Confronta prima e dopo alla dimensione in cui l'immagine viene mostrata.
Cosa rende un'immagine responsive?
Uno `srcset` (o un elemento `<picture>`) così il browser può scegliere un file più piccolo sugli schermi piccoli, più `width` e `height` così lo spazio viene riservato prima che l'immagine si carichi.
Le immagini dovrebbero essere caricate in lazy?
Le immagini fuori schermo sì: aggiungi `loading="lazy"`. Non caricare in lazy l'immagine principale in cima alla pagina; è spesso l'elemento Largest Contentful Paint.
Dovrei rimuovere i metadati EXIF?
Per la visualizzazione web, di solito sì: risparmia byte e rimuove dettagli come la posizione GPS.