Tag HTML <img>

Definizione e uso

<img> Il tag viene utilizzato per incorporare immagini in una pagina HTML.

Technicamente, non viene inserita effettivamente l'immagine nella pagina web, ma viene collegata alla pagina web.<img> Il tag crea un contenitore per referenziare l'immagine.

<img> Il tag ha due attributi obbligatori:

  • src - Definire il percorso dell'immagine
  • alt - Se per qualche motivo l'immagine non può essere visualizzata, specificare il testo alternativo dell'immagine

Attenzione:Inoltre, è sempre consigliabile specificare la larghezza e l'altezza dell'immagine. Se non specificate la larghezza e l'altezza, la pagina potrebbe lampeggiare durante il caricamento dell'immagine.

Suggerimento:Per collegare un'immagine a un altro documento, è sufficiente aggiungere <img> Etichetta annidata in <a> All'interno del tag (vedi l'esempio sottostante).

Vedi anche:

Corso HTML:Immagine HTML

Manuale di riferimento HTML DOM:Oggetto Image

Corso CSS:Impostare lo stile delle immagini

Leggi di più:Come utilizzare correttamente le immagini

Esempio

Esempio 1

Negli esempi seguenti, inseriamo una foto di un tulipano fotografato a Shanghai Flower Port da un ingegnere di CodeW3C.com nella pagina:

<img src="tulip.jpg" alt="Shanghai Flower Port - Tulip" />

Prova personalmente

Shanghai Flower Port - Tulip

Esempio 2

Un altro esempio su come inserire un'immagine:

<img src="dancer.png" alt="Ballerino" width="500" height="749">

Prova personalmente

Suggerimento:Fornire ulteriori esempi nella parte inferiore della pagina.

Proprietà

Proprietà Valore Descrizione
alt Testo Definire il testo alternativo dell'immagine.
crossorigin
  • anonymous
  • use-credentials
 Permettere l'uso di immagini provenienti da siti di terze parti che consentono l'accesso cross-origin insieme a canvas.
height Pixel Definire l'altezza dell'immagine.
ismap ismap Definire l'immagine come una mappatura di immagine del lato server.
loading
  • eager
  • lazy
 Specificare se il browser deve caricare immediatamente l'immagine o ritardare il caricamento fino a quando non si verificano alcune condizioni.
longdesc URL Definire l'URL che punta alla descrizione dettagliata dell'immagine.
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • unsafe-url
 Definire le informazioni di riferimento da utilizzare quando si ottiene l'immagine.
sizes Dimensioni Definire le dimensioni delle immagini per diverse布局 di pagina.
src URL Definire il percorso dell'immagine.
srcset URL-list Specifica una lista di file di immagine da utilizzare in diverse circostanze.
usemap #mapname Definisci l'immagine come mappa client-side.
width Pixel Determina la larghezza dell'immagine.

Proprietà globali

<img> I tag supportano anche Proprietà globali HTML.

Proprietà degli eventi

<img> I tag supportano anche Proprietà degli eventi HTML.

Altri esempi

Esempio 3

Allinea l'immagine (utilizzando CSS):

<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:bottom">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:middle">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:top">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:right">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:left">

Prova personalmente

Esempio 4

Aggiungi un bordo all'immagine (utilizzando CSS):

<img src="flower.gif" alt="[#1#]" style="border:5px solid black">

Prova personalmente

Esempio 5

Aggiungi margini laterali all'immagine (utilizzando CSS):

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:0px 50px">

Prova personalmente

Esempio 6

Aggiungi margini superiori, inferiori ed esterni all'immagine (utilizzando CSS):

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:50px 0px">

Prova personalmente

Esempio 7

Come inserire un'immagine da una cartella o un altro sito web:

<img src="/photo/flower.gif" alt="Fiore" width="180" height="180">
<img src="https://www.codew3c.com/photo/tree.png" alt="Tree" width="150" height="161">

Prova personalmente

Esempio 8

Come aggiungere un hyperlink alle immagini:

<a href="https://www.codew3c.com">
<img src="w3logo.png" alt="codew3c.com" width="400" height="225">
</a>

Prova personalmente

Esempio 9

Come creare una mappa di immagini con aree cliccabili. Ogni area è un hyperlink:

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html">
</map>

Prova personalmente

Leggi di più - Come utilizzare correttamente le immagini

Una delle caratteristiche più evidenti di HTML e XHTML è la capacità di includere immagini nel testo del documento, sia come oggetti interni del documento (immagini inline) sia come documento separato scaricabile tramite hyperlink o come sfondo del documento.

Inserire immagini (icone, foto, spiegazioni, dipinti, ecc.) in modo ragionevole nel contenuto del documento renderà il documento più vivace e affascinante, più professionale e informativo, e più facile da navigare. È anche possibile rendere un'immagine un'indicazione visiva di un hyperlink.

Tuttavia, se si utilizzano eccessivamente le immagini, il documento diventa frammentato, caotico e impossibile da leggere, e durante il download e la visualizzazione della pagina, aumenta anche molto il tempo di attesa inutilizzato per l'utente.

Leggi l'articolo seguente per imparare i due formati di immagini principali sul Web: GIF e JPEG, e come utilizzare correttamente le immagini:

Impostazioni CSS predefinite

La maggior parte dei browser utilizzerà i seguenti valori predefiniti per la visualizzazione <img> Elemento:

img {
  display: inline-block;
}

Prova personalmente

Supporto browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Supporto Supporto Supporto Supporto Supporto