Dimensioni esplicite delle immagini

Silktide controlla che le immagini della pagina dichiarino le proprie dimensioni, in modo che il browser possa riservare la giusta quantità di spazio per ciascuna prima di scaricarla. Le immagini senza dimensioni dichiarate fanno spostare la pagina mentre vengono caricate.

<!-- Problema: nessuna dimensione, il browser non riserva spazio -->
<img src="hero.jpg" alt="Collezione primavera">

<!-- Corretto: il browser riserva subito uno spazio di 1200x600 -->
<img src="hero.jpg" alt="Collezione primavera" width="1200" height="600">

Perché è importante

Finché il file di un'immagine non arriva, il browser non ha modo di sapere quanto sarà grande, a meno che non sia la pagina a indicarlo. Senza queste informazioni, il browser visualizza la pagina senza lasciare spazio, poi spinge tutto verso il basso quando ogni immagine viene caricata: il testo salta a metà della frase e i visitatori toccano l'elemento sbagliato quando i bersagli si spostano all'ultimo momento.

Questo spostamento viene misurato come spostamento del layout ed è uno dei di Google, che contribuiscono anche al posizionamento nei risultati di ricerca. Le immagini senza dimensioni sono la causa più comune di questo problema.

Come risolvere il problema

Aggiungi gli attributi width e height a ogni immagine e video, rispettando le proporzioni reali del file. Il browser li usa per riservare spazio con il rapporto d'aspetto corretto anche quando il ridimensiona l'immagine in modo responsivo.
Per le immagini responsivo, mantieni gli attributi e lascia che sia il CSS, ad esempio max-width: 100%; height: auto;, a occuparsi del ridimensionamento: lo spazio riservato si ridimensionerà di conseguenza.
Se non puoi aggiungere gli attributi, riserva lo spazio nel CSS usando invece la proprietà aspect-ratio sull'immagine o sul suo contenitore.
Controlla il tuo : la maggior parte dei CMS inserisce automaticamente le dimensioni quando le immagini vengono aggiunte tramite l'editor, quindi spesso le dimensioni mancanti derivano da scritto manualmente, template o contenuti incorporati.

Come esegue i test Silktide

Carica la pagina in un browser reale, usando il tipo di dispositivo, la velocità di connessione e la località di test configurati per i tuoi test di velocità.
Individua ogni immagine visualizzata senza dimensioni esplicite: senza attributi width/height utilizzabili e senza CSS che ne definisca le dimensioni.
Segnala ogni immagine priva di dimensioni, indicando dove si trova nella pagina.

Risoluzione dei problemi

La pagina sembra a posto quando la carico

Con immagini memorizzate nella cache o una connessione veloce, le immagini possono arrivare così rapidamente che non si nota alcuno spostamento. I visitatori con reti più lente vedono la stessa pagina assemblarsi un pezzo alla volta. Riservare spazio non ha alcun costo quando l'immagine viene caricata rapidamente e impedisce lo spostamento quando non lo è.

Le dimensioni fisse non comprometteranno il mio design responsivo?

No. I browser moderni interpretano gli attributi width e height come il rapporto d'aspetto dell'immagine, non come dimensioni fisse, quindi il CSS può comunque ridimensionare l'immagine per adattarla a qualsiasi schermo. Gli attributi e il CSS del lavorano insieme.