Il tag HTML 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 sulle immagini.
Un esempio di tag IMG HTML completamente formato assomiglia a questo:
Attributi del tag IMG richiesti
SRC.L'unico attributo necessario per ottenere un'immagine da visualizzare su una pagina Web è l'attributo SRC. Questo attributo identifica il nome e la posizione del file immagine da visualizzare.
ALT.Per scrivere XHTML e HTML4 validi, il ALT anche l'attributo è richiesto. Questo attributo viene utilizzato per fornire ai browser non visuali il testo che descrive l'immagine. I browser visualizzano il testo alternativo in modi diversi. Alcuni lo visualizzano come pop-up quando si passa il mouse sull'immagine, altri lo si visualizza in proprietà quando si fa clic con il pulsante destro sull'immagine e alcuni non lo visualizzano affatto.
Utilizzare il testo alternativo per fornire ulteriori dettagli sull'immagine che non sono rilevanti o importanti per il testo della pagina Web. Ma ricorda che nei lettori di schermo e in altri browser di solo testo, il testo verrà letto in linea con il resto del testo sulla pagina. Per evitare confusione, usa un testo alternativo descrittivo che dice (ad esempio) "Informazioni su Web Design e HTML" invece di "logo".
In HTML5, il ALT l'attributo non è sempre richiesto, perché è possibile utilizzare una didascalia per aggiungere ulteriori descrizioni. Puoi anche usare l'attributo ARIA-describedby per indicare un ID che contiene una descrizione completa.
Anche il testo alternativo non è richiesto se l'immagine è puramente decorativa, ad esempio un'immagine nella parte superiore di una pagina Web o di icone. Ma se non sei sicuro, includi alt text per ogni evenienza.
Attributi IMG consigliati
LARGHEZZA e ALTEZZA. Dovresti prendere l'abitudine di usare sempre il LARGHEZZA e ALTEZZA attributi. E dovresti sempre usare la dimensione reale e non ridimensionare le immagini con il browser.
Questi attributi accelerano il rendering della pagina perché il browser può allocare spazio nella progettazione dell'immagine e quindi continuare a scaricare il resto del contenuto, piuttosto che attendere che l'intera immagine venga scaricata.
Altri attributi utili IMG
TITOLO. L'attributo è un attributo globale che può essere applicato a qualsiasi elemento HTML. Inoltre, il TITOLO attributo ti consente di aggiungere ulteriori informazioni sull'immagine.
La maggior parte dei browser supporta il TITOLO attributo, ma lo fanno in modi diversi. Alcuni visualizzano il testo come pop-up mentre altri lo visualizzano in schermate di informazioni quando l'utente fa clic con il tasto destro sull'immagine. Puoi usare il TITOLO attributo per scrivere ulteriori informazioni sull'immagine, ma non contare che queste informazioni siano nascoste o visibile. Non dovresti assolutamente usarlo per nascondere le parole chiave per i motori di ricerca. Questa pratica è ora penalizzata dalla maggior parte dei motori di ricerca.
USEMAP e ISMAP. Questi due attributi impostano le mappe immagine lato client () e lato server (ISMAP) alle immagini.
LONGDESC. L'attributo supporta gli URL per una descrizione più lunga dell'immagine. Questa funzione rende le tue immagini più accessibili.
Attributi IMG deprecati e obsoleti
Diversi attributi sono ora obsoleti in HTML5 o deprecati in HTML4. Per il miglior codice HTML, dovresti trovare altre soluzioni invece di utilizzare questi attributi.
CONFINE. L'attributo definisce la larghezza in pixel di qualsiasi bordo attorno all'immagine. È stato deprecato a favore dei CSS in HTML4 ed è obsoleto in HTML5.
ALLINEARE. Questo attributo ti consente di posizionare un'immagine all'interno del testo e far scorrere il testo attorno ad esso. È possibile allineare un'immagine a destra o a sinistra. È stato deprecato in favore della proprietà CSS float in HTML4 ed è obsoleto in HTML5.
HSPACE e VSPACE. Il HSPACE e VSPACE gli attributi aggiungono lo spazio bianco orizzontalmente (HSPACE) e verticalmente (VSPACE). Lo spazio bianco verrà aggiunto ad entrambi i lati del grafico (superiore e inferiore o sinistro e destro), quindi se hai solo bisogno di spazio su un lato, dovresti usare CSS. Questi attributi sono stati deprecati in HTML4 a favore della proprietà CSS margin e sono obsoleti in HTML5.
LOWSRC. Il LOWSRC attributo fornisce un'immagine alternativa quando la tua sorgente di immagini è così grande da essere scaricata estremamente lentamente. Ad esempio, potresti avere un'immagine di 500 KB che desideri visualizzare sulla tua pagina web, ma 500 KB impiegherebbero molto tempo per il download. Così crei una copia molto più piccola dell'immagine, forse in bianco e nero o solo estremamente ottimizzata, e la metti nella LOWSRC attributo. L'immagine più piccola verrà scaricata e mostrata per prima, quindi, quando verrà visualizzata l'immagine più grande, sostituirà quella a bassa sorgente.
Il LOWSRC l'attributo è stato aggiunto a Netscape Navigator 2.0 al IMG etichetta. Era parte del livello DOM 1, ma è stato rimosso dal livello DOM 2. Il supporto del browser è stato approssimativo per questo attributo, sebbene molti siti affermino che è supportato da tutti i browser moderni. Non è deprecato in HTML4 o obsoleto in HTML5 perché non è mai stato una parte ufficiale di entrambe le specifiche.
Evita di utilizzare questo attributo e invece di ottimizzare le immagini in modo che vengano caricate rapidamente. La velocità di caricamento della pagina è una parte fondamentale della buona progettazione Web e le immagini di grandi dimensioni rallentano enormemente le pagine, anche se si utilizza il LOWSRC attributo.
