Immagini

Il test cerca tutte le immagini su un sito web per verificare se siano collegate secondo le migliori pratiche del momento. Verifichiamo anche che le immagini siano in un formato appropriato per il web.

Perché facciamo questo test?

Spesso i creatori di siti web inseriscono immagini sulle proprie pagine in maniera non corretta, col risultato che i visitatori hanno problemi di accessibilità e i tempi di caricamento aumentano.

È importante includere gli attributi di larghezza e lunghezza in ciascuna tag di immagine. Anche se il mark-up è valido senza attributi di lunghezza e larghezza, è consigliabile includerli comunque. Senza tali attributi, infatti, il browser del visitatore non sa quanto spazio lasciare per l'immagine finché quest'ultima non viene caricata. Di conseguenza, una volta caricata l'immagine, la pagina dev'essere sottoposta a nuovo rendering da parte del browser del visitatore, aumentando i tempi di caricamento e facendo "saltare" degli elementi sulla pagina, soprattutto se la connessione dell'utente è lenta. È altre importante non deformare l'immagine utilizzando questi attributi, che devono essere uguali alle dimensioni reali dell'immagine, poiché anche questo influisce sul tempo di caricamento della pagina.

In cosa consiste questo test?

Scarichiamo tutte le immagini di un sito web e attribuiamo un punteggio in base a diversi criteri:

• È un formato non adatto al web? Sono consentite solo immagini in formato webp, avif, jpeg, png, svg e gif.
• Mancano gli attributi di larghezza e altezza? In questo caso sono stati omessi gli attributi di larghezza e altezza dell'immagine.
• Viene deformata nel browser? Questo accade quando l''immagine originale ha dimensioni diverse da quelle definite dagli attributi di larghezza e altezza specificati nell'HTML. Se desideri allargare un'immagine sul browser, dovresti usare CSS poiché il tag descrive l'immagine originale sorgente, non il modo in cui dovrebbe essere visualizzata.

Cosa posso fare?

Assicurati che tutte le immagini siano in un formato ottimizzato per il web, come jpeg, gif o png. Includi, inoltre, gli attributi di larghezza e altezza di tutte le immagini e ricorda che questi dati devono corrispondere alle dimensioni reali dell'immagine sorgente. Se desideri ingrandire l'immagine sul browser, usa il CSS. Mentre infatti il tag dell'immagine nell'HTML definisce l'immagine sorgente, il CSS definisce il modo in cui dev'essere mostrata.