Il HTML Il tag IMG regola l'inserimento di immagini e altri oggetti grafici statici all'interno di una pagina web. Questo tag comune supporta diversi attributi obbligatori e facoltativi che aggiungono ricchezza alla tua capacità di progettare un sito Web accattivante e incentrato sull'immagine.
Un esempio di tag IMG HTML completamente formato è simile al seguente:
Attributi tag IMG richiesti
src="/percorso/a/immagine.jpg"
L'unico attributo di cui hai bisogno per ottenere un'immagine da visualizzare su una pagina web è il src attributo. Questo attributo identifica il nome e la posizione del file immagine da visualizzare.
alt="Descrizione dell'immagine"
Per scrivere XHTML e HTML4 validi, il alt anche l'attributo è obbligatorio. Questo attributo viene utilizzato per fornire ai browser non visivi un testo che descrive l'immagine. I browser visualizzano il testo alternativo in modi diversi. Alcuni lo visualizzano come un pop-up quando si posiziona il mouse sull'immagine, altri lo visualizzano nelle proprietà quando si fa clic con il pulsante destro del mouse sull'immagine e alcuni non lo visualizzano affatto.
Usa il testo alternativo per fornire ulteriori dettagli sull'immagine che non sono rilevanti o importanti per il testo della pagina web. Tuttavia, ricorda che negli screen reader e in altri browser di solo testo, il testo verrà letto in linea con il resto del testo sulla pagina. Per evitare confusione, utilizza un testo alternativo descrittivo che dica (ad esempio) "Informazioni sul Web Design e HTML" anziché solo "logo".
Il alt il testo è essenziale anche per la SEO (Search Engine Optimization). I bot che i motori di ricerca, come Google, utilizzano per esplorare i contenuti dei siti non possono "vedere" le immagini. Si affidano al alt testo per determinare cosa c'è sulla pagina.
Nel HTML5, il alt l'attributo non è sempre richiesto, perché puoi usare a didascalia per aggiungere più descrizione ad esso. Puoi anche utilizzare questo attributo per indicare un ID che contiene una descrizione completa:
aria-descriptionby="Descrizione dell'immagine"
Il testo alternativo non è inoltre necessario se l'immagine è puramente decorativa, come un elemento grafico nella parte superiore di una pagina Web o icone. Ma se non sei sicuro, includi il testo alternativo per ogni evenienza.
Attributi di dimensionamento
larghezza = "500"e.
altezza = "500"A seconda del design, utilizzando il. altezza e. larghezza
In genere, vorrai impostare la dimensione dell'immagine nel tuo CSS. Il più delle volte, questo sarà il risultato delle dimensioni del contenitore padre di un'immagine. Questo approccio consente la massima flessibilità durante l'adattamento a diverse dimensioni dello schermo. Tuttavia, ci sono ancora casi in cui potresti voler specificare le dimensioni dell'immagine come attributi HTML.
Altri attributi IMG utili
title = "Nome descrittivo dell'immagine"L'attributo è un attributo globale che può essere applicato a qualsiasi. elemento HTML. Inoltre, il. titolo
La maggior parte dei browser supporta il titolo attributo, ma lo fanno in modi diversi. Alcuni visualizzano il testo come popup mentre altri lo visualizzano nelle schermate informative quando l'utente fa clic con il pulsante destro del mouse sull'immagine. Puoi usare il titolo attributo per scrivere informazioni aggiuntive sull'immagine, ma non contare sul fatto che queste informazioni siano nascoste o visibile. Non dovresti assolutamente usarlo per nascondere le parole chiave per i motori di ricerca. Questa pratica è oggi penalizzata dalla maggior parte dei motori di ricerca.
usemap=""e.
ismap=""Questi due attributi impostano lato client () e lato server (ISMAP) mappe immagine
longdesc="Una descrizione più dettagliata della tua immagine"Il. longdesc
Attributi IMG deprecati e obsoleti
Diversi attributi sono ora obsoleti in HTML5 o deprecati in HTML4. Per il miglior HTML, dovresti trovare altre soluzioni invece di usare questi attributi.
bordo="3"
allinea = "sinistra"Questo attributo ti consente di posizionare un'immagine all'interno del testo e di far scorrere il testo attorno ad essa. Puoi allineare un'immagine a destra o a sinistra. È stato deprecato a favore del. proprietà CSS float
hspcace="10"e.
vspazio="10"Il. hspazio e. vspazio gli attributi aggiungono uno spazio bianco orizzontalmente ( hspazio) e verticalmente ( vspazio
lowsrc="/percorso/a/lowres.jpg"Il. lowsrc L'attributo fornisce un'immagine alternativa quando l'origine dell'immagine è così grande da essere scaricata molto lentamente. Ad esempio, potresti avere un'immagine di 500 KB che desideri visualizzare sulla tua pagina web, ma il download di 500 KB richiederebbe molto tempo. Quindi crei una copia molto più piccola dell'immagine, magari in bianco e nero o semplicemente estremamente ottimizzata, e la metti nel file. lowsrc
Il lowsrc l'attributo è stato aggiunto a Netscape Navigator 2.0 al tag. Faceva parte del livello DOM 1 ma è stato poi rimosso dal livello DOM 2. Il supporto del browser è stato approssimativo per questo attributo, sebbene molti siti affermino che sia supportato da tutti i browser moderni. Non è deprecato in HTML4 o obsoleto in HTML5 perché non è mai stato una parte ufficiale di nessuna delle due specifiche.
Evita di utilizzare questo attributo e ottimizza invece le tue immagini in modo che si carichino rapidamente. La velocità di caricamento della pagina è una parte fondamentale di un buon web design e le immagini di grandi dimensioni rallentano enormemente le pagine, anche se usi il lowsrc attributo.