HTML
immagini

Sintassi

• <img src="" alt="">

Parametri

Creare un'immagine

Per aggiungere un'immagine a una pagina, usa il tag immagine.

I tag immagine ( img ) non hanno tag di chiusura. I due attributi principali che si danno al tag img sono src , l'origine dell'immagine e alt , che è un testo alternativo che descrive l'immagine.

<img src="images/hello.png" alt="Hello World">

Puoi anche ottenere immagini da un URL web:

<img src="https://i.stack.imgur.com/ALgZi.jpg?s=48&g=1" alt="StackOverflow user Caleb Kleveter">

Nota: le immagini non sono tecnicamente inserite in una pagina HTML, le immagini sono collegate a pagine HTML. Il tag <img> crea uno spazio di attesa per l'immagine di riferimento.

È anche possibile incorporare immagini direttamente all'interno della pagina utilizzando base64:

<img src="data:image/png;base64,iVBOR..." alt="Hello World">

Suggerimento: per collegare un'immagine a un altro documento, annidare semplicemente il tag <img> all'interno dei tag <a> .

Larghezza e altezza dell'immagine

Nota: gli attributi width e height non sono deprecati sulle immagini e non sono mai stati. Il loro uso è stato reso molto più severo.

Le dimensioni di un'immagine possono essere specificate utilizzando gli attributi width e height del tag immagine:

<img src="images/200x200-img.png" width="200" height="200" alt="A 200x200 image">

Specificando la width e l' height di un'immagine, la struttura fornisce al browser un suggerimento su come dovrebbe essere la pagina, anche se si sta solo specificando la dimensione effettiva dell'immagine. Se le dimensioni dell'immagine non sono specificate, il browser dovrà ricalcolare il layout della pagina dopo che l'immagine è stata caricata, il che potrebbe causare il "saltare" durante il caricamento della pagina.

<img src="images/50x50-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/50x50-img.png" width="200" height="200" alt="A 200x200 image">
<img src="images/200x200-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/200x200-img.png" width="50%" height="50%" alt="A 100x100 image">

<img src="images/50x50-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/200x200-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/50x50-img.png" width="0" height="0" alt="A hidden tracking image">

<img src="images/50x50-img.png" width="200" height="200" alt="A 200x200 image">

<img src="images/200x200-img.png" width="50%" height="50%" alt="A 100x100 image">
<img src="images/200x200-img.png" width="1" height="200" alt="A 1x200 image">

Scegliere il testo alternativo

Alt-text è utilizzato dagli screen reader per gli utenti ipovedenti e dai motori di ricerca. È quindi importante scrivere un buon testo alternativo per le tue immagini.

Il testo dovrebbe apparire corretto anche se si sostituisce l'immagine con il suo attributo alt. Per esempio:

<!-- Incorrect -->
<img src="anonymous.png" alt="Anonymous user avatar"/> An anonymous user wrote:
<blockquote>Lorem ipsum dolor sed.</blockquote>
<a href="https://google.com/"><img src="edit.png" alt="Edit icon"/></a> /
<a href="https://google.com/"><img src="delete.png" alt="Delete icon"/></a>

Senza le immagini, sembrerebbe:

Avatar utente anonimo Un utente anonimo ha scritto:

Lorem ipsum dolor sed.

Modifica icona / Elimina icona

Per correggere questo:

• Rimuovi il testo alternativo per l'avatar. Questa immagine aggiunge informazioni agli utenti vedenti (un'icona facilmente identificabile per mostrare che l'utente è anonimo) ma queste informazioni sono già disponibili nel testo. ¹
• Rimuovi l'icona dal testo alternativo per le icone. Sapere che questa sarebbe un'icona se fosse lì non aiuta a comunicare il suo vero scopo.

<!-- Correct -->
<img src="anonymous.png" alt=""/> An anonymous user wrote:
<blockquote>Lorem ipsum dolor sed.</blockquote>
<a href="https://google.com/"><img src="edit.png" alt="Edit"/></a> /
<a href="https://google.com/"><img src="delete.png" alt="Delete"/></a>

Un utente anonimo ha scritto:

Lorem ipsum dolor sed.

Modifica / Elimina

Le note

¹ C'è una differenza semantica tra l'inclusione di un attributo alt vuoto e l'esclusione del tutto. Un attributo alt vuoto indica che l'immagine non è una parte fondamentale del contenuto (come è vero in questo caso - è solo un'immagine additiva che non è necessaria per comprendere il resto) e quindi può essere omessa dal rendering. Tuttavia, la mancanza di un attributo alt indica che l'immagine è una parte fondamentale del contenuto e che semplicemente non esiste alcun equivalente testuale disponibile per il rendering.

Immagine reattiva usando l'attributo srcset

Usando srcset con le dimensioni

<img sizes="(min-width: 1200px) 580px,
      (min-width: 640px) 48vw,
      98vw"
    srcset="img/hello-300.jpg 300w,
      img/hello-600.jpg 600w,
      img/hello-900.jpg 900w,
      img/hello-1200.jpg 1200w"
    src="img/hello-900.jpg" alt="hello">

sizes sono come le domande dei media, che descrivono lo spazio che l'immagine assume nella vista.

• se viewport è più grande di 1200px, l'immagine è esattamente 580px (ad esempio il nostro contenuto è centrato in un contenitore con una larghezza massima di 1200 px. L'immagine ne prende la metà, meno i margini).
• se viewport è tra 640px e 1200px, l'immagine prende il 48% di viewport (ad esempio, l'immagine viene ridimensionata con la nostra pagina e occupa metà larghezza della vista meno i margini).
• se viewport è di qualsiasi altra dimensione, nel nostro caso inferiore a 640px, l'immagine prende il 98% di viewport (ad esempio, l'immagine viene ridimensionata con la nostra pagina e occupa tutta la larghezza del viewport meno i margini). Le condizioni del supporto devono essere omesse per l'ultimo articolo.

srcset sta solo dicendo al browser quali immagini abbiamo a disposizione e quali sono le loro dimensioni.

• img/hello-300.jpg è largo 300 px,
• img/hello-600.jpg è largo img/hello-600.jpg px,
• img/hello-900.jpg è largo 900px,
• img/hello-1200.jpg è largo 1200px

src è sempre una sorgente di immagini obbligatoria. In caso di utilizzo con srcset , src mostrerà un'immagine di riserva nel caso in cui il browser non supporti srcset .

Utilizzo di srcset senza dimensioni

<img src="img/hello-300.jpg" alt="hello"
     srcset="img/hello-300.jpg 1x, 
       img/hello-600.jpg 2x,
       img/hello-1200.jpg 3x">

srcset fornisce un elenco di immagini disponibili, con descrittore x rapporto dispositivo-pixel.

• se il rapporto pixel del dispositivo è 1, usa img/hello-300.jpg
• se il rapporto pixel del dispositivo è 2, usa img/hello-600.jpg
• se il rapporto pixel del dispositivo è 3, usa img/hello-1200.jpg

src è sempre una sorgente di immagini obbligatoria. In caso di utilizzo con srcset , src mostrerà un'immagine di riserva nel caso in cui il browser non supporti srcset .

Immagine reattiva usando l'elemento dell'immagine

Codice

<picture>
  <source media="(min-width: 600px)" srcset="large_image.jpg">
  <source media="(min-width: 450px)" srcset="small_image.jpg">
  <img src="default_image.jpg" style="width:auto;">
</picture>

uso

Per visualizzare immagini diverse con larghezza dello schermo diversa, è necessario includere tutte le immagini utilizzando il tag sorgente in un tag immagine come mostrato nell'esempio precedente.

Risultato

• Su schermi con larghezza dello schermo> 600px, mostra large_image.jpg
• Su schermi con larghezza dello schermo> 450 px, mostra small_image.jpg
• Su schermi con altra larghezza dello schermo, mostra default_image.jpg