UX / UI Impatto medio Facile 10–20 min

Immagini responsive

Le immagini devono adattarsi al mobile senza scorrimento orizzontale.

Cos'è

Un'immagine con larghezza fissa grande (ad es. width="1200") può traboccare fuori dallo schermo su un mobile stretto e causare lo scorrimento orizzontale dell'intera pagina.

Perché è importante

Lo scorrimento orizzontale è uno dei problemi di UX più fastidiosi su mobile, rompe il layout e dà un'impressione di incompletezza. Si previene facilmente con un'unica regola CSS.

Come fare

1Dai alle immagini max-width: 100% e height: auto.
2Indica width e height nell'HTML per la stabilità del layout (CLS), ma limitale nel CSS.
3Per dimensioni diverse valuta srcset / <picture>.
4Testa su una larghezza stretta (~360px) per verificare che nulla scorra orizzontalmente.

Esempio

Corretto

img { max-width: 100%; height: auto; }

Conclusione

Un'unica regola (max-width:100%; height:auto) risolve la maggior parte dei traboccamenti delle immagini su mobile. Aggiungi le dimensioni nell'HTML per il CLS e per gli elementi visivi grandi valuta srcset. Una correzione rapida di un comune disturbo mobile.

Argomenti correlati