Guarda qualsiasi pagina web online oggi e noterai che condividono alcune cose in comune. Uno di questi tratti condivisi sono le immagini. Le immagini giuste aggiungono molto alla presentazione di un sito web. Alcune di queste immagini, come il logo di un'azienda, aiutano a brandizzare il sito e connettono quell'entità digitale alla tua azienda fisica.
Per aggiungere un'immagine, un'icona o una grafica alla tua pagina web, devi usare il tag nel codice HTML di una pagina. Metti il IMG etichetta il tuo codice HTML esattamente dove vuoi che l'immagine venga visualizzata. Il browser Web che esegue il rendering del codice della pagina sostituirà questo tag con l'immagine appropriata una volta visualizzata la pagina. Tornando all'esempio del nostro logo aziendale, ecco come puoi aggiungere quell'immagine al tuo sito:
Attributi dell'immagine
Guardando il codice HTML sopra, vedrai che l'elemento include due attributi. Ognuno di essi è richiesto per l'immagine.
Il primo attributo è "src". Questo è letteralmente il file immagine che si desidera visualizzare sulla pagina. Nel nostro esempio usiamo un file chiamato "logo.png". Questo è l'elemento grafico che il browser Web mostrerà quando ha reso il sito.
Noterai anche che prima di questo nome di file, abbiamo aggiunto alcune informazioni aggiuntive, "/ images /". Questo è il percorso del file. La barra diretta iniziale indica al server di cercare nella directory principale. Quindi cercherà una cartella chiamata "images" e infine il file chiamato "logo.png". Utilizzare una cartella chiamata "images" per archiviare tutti gli elementi grafici di un sito è una pratica abbastanza comune, ma il percorso del file verrà modificato in tutto ciò che è rilevante per il tuo sito.
Il secondo attributo richiesto è il testo "alt". Questo è il "testo alternativo" che viene mostrato se l'immagine non riesce a caricare per qualche motivo. Questo testo, che nel nostro esempio recita "Logo aziendale", verrà visualizzato se l'immagine non riesce a caricare. Perché dovrebbe succedere? Una varietà di motivi:
- Percorso file errato
- Nome file errato o errore ortografico
- Errore di trasmissione
- Il file è stato cancellato dal server
Queste sono solo alcune delle possibili ragioni per cui la nostra immagine specificata potrebbe mancare. In questi casi, il nostro testo alternativo verrà visualizzato.
Il testo alternativo viene anche utilizzato dal software di screen reader per "leggere" l'immagine a un visitatore con problemi di vista. Dal momento che non possono vedere l'immagine come facciamo noi, questo testo permette loro di sapere quale sia l'immagine stessa. Questo è il motivo per cui è richiesto un testo alternativo e perché dovrebbe indicare chiaramente quale sia l'immagine!
Un malinteso comune di alt text è che è pensato per scopi di motori di ricerca. Questo non è vero. Mentre Google e altri motori di ricerca leggono questo testo per determinare quale sia l'immagine (ricorda che non possono "vedere" la tua immagine), non dovresti scrivere alt text per fare appello esclusivamente ai motori di ricerca. Autore chiaro testo alternativo che è pensato per gli esseri umani. Se puoi anche aggiungere alcune parole chiave nel tag che attira i motori di ricerca, va bene, ma assicurati sempre che il testo alternativo stia servendo il suo scopo principale affermando quale sia l'immagine per chiunque non possa vedere il file grafico.
Altri attributi
Il IMG il tag ha anche altri due attributi che puoi vedere in uso quando metti un grafico sulla tua pagina web: la larghezza e l'altezza. Ad esempio, se si utilizza un editor WYSIWYG come Dreamweaver, questo aggiunge automaticamente queste informazioni. Ecco un esempio:
Il LARGHEZZA e ALTEZZA gli attributi indicano al browser la dimensione dell'immagine. Il browser quindi conosce esattamente lo spazio disponibile nel layout da allocare e può passare all'elemento successivo nella pagina mentre l'immagine viene scaricata. Il problema con l'utilizzo di queste informazioni nel tuo HTML è che potresti non voler sempre che l'immagine venga visualizzata con le dimensioni esatte. Ad esempio, se si dispone di un sito Web reattivo il cui dimensionamento cambia in base alla schermata dei visitatori e alle dimensioni del dispositivo, si desidera anche che le immagini siano flessibili. Se si specifica nel codice HTML quale sia la dimensione fissa, sarà molto difficile eseguire l'override con le query multimediali CSS reattive. Per questo motivo, e per mantenere una separazione di stile (CSS) e struttura (HTML), è consigliabile NON aggiungere attributi di larghezza e altezza al codice HTML.
Una nota: se lasci queste istruzioni per il ridimensionamento e non specifichi una dimensione in CSS, il browser mostrerà comunque l'immagine al suo valore predefinito, la dimensione nativa.
A cura di Jeremy Girard
