Come correggere la distribuzione delle immagini in PageSpeed Insights

1. 01Apri la pagina interessata in PageSpeed Insights o Lighthouse. Scegli il rapporto mobile o desktop, espandi l’avviso sulla distribuzione delle immagini e annota URL e modifica suggerita.
2. 02Trova l’immagine nella pagina. Negli strumenti del browser, confronta il file scaricato con le dimensioni visualizzate, considerando la densità dello schermo. Controlla la sorgente scelta, non solo l’originale nella libreria.
3. 03Se l’immagine servita contiene troppi pixel, correggi prima dimensioni adattive o impostazioni del tema. Se sono adatte, confronta compressione e altri formati supportati.
4. 04Prepara una copia delle dimensioni necessarie nell’editor. Usa il compressore Bitinz per file adatti e controlla testo, bordi, trasparenza e sfumature prima di sostituire le immagini.
5. 05Pubblica l’immagine o il modello aggiornato. Verifica che la pagina richieda il nuovo file anziché una vecchia copia in cache e ripeti il rapporto con lo stesso dispositivo.

Chrome stima il risparmio dal peso scaricato e da un rapporto byte/pixel efficiente per il formato. Risparmi stimati sotto 4 KiB non vengono segnalati. È una soglia del rapporto, non un peso massimo consigliato.

Lighthouse 13 ha sostituito i precedenti controlli delle immagini con questa analisi; Lighthouse 12 mostrava già le analisi per impostazione predefinita. Formato, dimensioni e animazioni pesanti richiedono interventi diversi. Per il flusso completo, leggi comprimere immagini per un sito.

• WordPress: verifica dimensioni scelte nel blocco o tema e gli attributi reali srcset e sizes. WordPress genera immagini adattive, ma modelli personalizzati o descrizioni errate del layout possono servire dimensioni inadatte. Modificare solo l’originale può lasciare in uso copie già generate.
• Shopify: il suo CDN ottimizza già le immagini del negozio, compresa la scelta del formato. Shopify dice che comprimere manualmente prima del caricamento non serve. Per un avviso, controlla larghezza richiesta e markup adattivo del tema invece di degradare la sorgente ripetutamente. Uno sviluppatore può verificare image_url e image_tag.
• Next.js: usa le impostazioni adattive del componente Image e assegna a sizes un valore coerente col layout, soprattutto con fill. Senza un valore adatto, un’immagine stretta può essere trattata come larga quanto la finestra e scaricata più grande. Cambiare solo qualità non corregge il layout.

Conserva un originale modificabile. Per immagini servite autonomamente, confronta peso reale e aspetto; il confronto JPG, PNG e WebP aiuta a scegliere. Bitinz non ridimensiona. La conversione WebP può ingrandire il file: mantieni la versione adatta alla pagina.

Per pubblicazioni ricorrenti, l’API per sviluppatori elabora file adatti con un account e una quota mensile. Non ripara markup del tema o layout adattivo. Ricontrolla la pagina pubblicata dopo aver collegato l’automazione.

• L’URL segnalato corrisponde all’immagine e alla versione modificate.
• Il browser seleziona una sorgente adatta su telefono e schermi più grandi.
• La compressione mantiene dettagli utili, trasparenza e sfumature uniformi.
• L’immagine principale visibile non è ritardata da caricamento differito inadatto.
• Il nuovo rapporto usa lo stesso dispositivo; controlla anche aspetto e caricamento reali.