Immagini responsive

Silktide carica le tue pagine in un browser reale e confronta le dimensioni effettive di ogni immagine con le dimensioni con cui viene visualizzata. Vengono segnalate le immagini molto più grandi di quanto appaiano sullo schermo, insieme ai dati sprecati dalla risoluzione aggiuntiva.

Perché è importante

Un caso comune: viene caricata una foto da 4000 pixel e la pagina la visualizza con una larghezza di 400 pixel. I visitatori scaricano il file a piena risoluzione — potenzialmente di diversi megabyte — per vedere ciò che un file molto più piccolo renderebbe in modo identico. Lo spreco è maggiore sui telefoni, che hanno gli schermi più piccoli e spesso le connessioni più lente e costose. Le pagine più veloci trattengono più visitatori e contribuiscono al posizionamento nei motori di ricerca attraverso i .

Come risolvere il problema

Fornisci ogni immagine in diverse dimensioni e lascia che il browser scelga quella giusta per il dispositivo:

<!-- Il browser scarica solo la dimensione necessaria -->
<img src="flower-800.jpg"
     srcset="flower-400.jpg 400w, flower-800.jpg 800w, flower-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Bancarella di fiori al mercato">

Automatizza il ridimensionamento. La maggior parte dei genera più dimensioni al momento del caricamento e le possono ridimensionare le immagini durante la distribuzione: entrambe le soluzioni impediscono che il problema si ripresenti.
Come minimo, ridimensiona le immagini utilizzate una sola volta portandole approssimativamente alle dimensioni con cui verranno visualizzate prima di caricarle.

Come Silktide esegue il controllo

Carica la pagina in un browser reale e registra le dimensioni con cui viene visualizzata ogni immagine, tenendo conto degli schermi più nitidi dei dispositivi moderni.
Confronta questi dati con le dimensioni del file immagine effettivamente scaricato.
Segnala le immagini per cui l'eccesso è significativo, indicando i byte che un'immagine delle dimensioni corrette consentirebbe di risparmiare, a partire da quelle con il risparmio maggiore.

Risoluzione dei problemi

In cosa differisce dagli altri controlli delle immagini?

Questo controllo riguarda le dimensioni: fornire un'immagine fisicamente più grande di quanto venga visualizzata dalla pagina. Compressione delle immagini e Ottimizzazione delle immagini riguardano la riduzione delle dimensioni del file mantenendo le stesse dimensioni dell'immagine, mentre Formati immagine moderni riguarda la conversione in WebP o AVIF. La stessa immagine può comparire in più controlli: le soluzioni sono complementari.

L'immagine appare nitida a causa degli schermi ad alta risoluzione

Gli schermi moderni hanno effettivamente bisogno di più pixel di quanto suggeriscano le dimensioni visualizzate, e la misurazione ne tiene conto. Le immagini vengono segnalate solo quando superano ciò che può utilizzare anche uno schermo ad alta risoluzione.