Inserimento delle immagini

1.1 Elemento <img>

Il multimediale in HTML svolge un ruolo importante nel migliorare la percezione visiva delle pagine web. L'inserimento delle immagini è uno degli aspetti chiave del multimediale in HTML. Di solito, per questo si utilizza l'elemento <img>. Vediamolo più in dettaglio:

L'elemento <img> è progettato per l'inserimento di immagini su una pagina web. È un elemento vuoto: non ha un tag di chiusura e include solo attributi.

Sintassi

    <img src="URL_immagine" alt="Descrizione" width="Larghezza" height="Altezza">
  

    
      <img src="images/photo.jpg" alt="Descrizione dell'immagine" width="500" height="300">
    
  

Esaminiamo un po' più in dettaglio gli attributi dell'elemento <img>

1.2 Attributo src

Il nome completo dell'attributo src è source (sorgente).

L'attributo src specifica il percorso del file immagine che deve essere visualizzato sulla pagina. Questo può essere un percorso assoluto o relativo.

Esempi:

URL Assoluto:

    
      <img src="https://example.com/images/photo.jpg">
    
  

Percorso relativo:

    
      <img src="images/photo.jpg">
    
  

L'URL assoluto include l'intero indirizzo dell'immagine, compresi il protocollo (http o https), il dominio e il percorso. Il percorso relativo indica la posizione del file rispetto al documento corrente, il che è comodo quando si lavora con file locali.

1.3 Attributo alt

Nome completo: alternative text (testo alternativo)

L'attributo alt fornisce una descrizione testuale dell'immagine. Questo testo viene visualizzato se l'immagine non può essere caricata ed è usato per migliorare l'accessibilità, poiché i lettori di schermo lo usano per descrivere l'immagine agli utenti con disabilità visiva.

Esempi:

    
      <img src="images/sunset.jpg" alt="Fotografia di un bel tramonto">
    
  

Un buon testo alternativo aiuta gli utenti a capire il contenuto dell'immagine se non è disponibile e contribuisce al miglioramento della SEO (ottimizzazione per motori di ricerca) della pagina.

1.4. Attributo width

L'attributo width imposta la larghezza dell'immagine in pixel. Se l'attributo height non è specificato, l'immagine mantiene le sue proporzioni quando la larghezza cambia.

Esempi:

    
      <img src="images/photo.jpg" width="500">
    
  

L'utilizzo di una larghezza fissa può essere utile per controllare le dimensioni dell'immagine, ma è importante considerare la flessibilità del design.

1.5 Attributo height

L'attributo height imposta l'altezza dell'immagine in pixel. Se l'attributo width non è specificato, l'immagine mantiene le sue proporzioni quando l'altezza cambia.

Esempi:

    
      <img src="images/photo.jpg" height="300">
    
  

Simile all'attributo width, l'uso di un'altezza fissa può essere utile, ma è necessario considerare la flessibilità.

Esempio di utilizzo degli attributi insieme

    <img data-max-width="800" data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e" src="https://cdn.javarush.com/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="sunset">
  

    
      <img src="images/sunset.jpg" alt="Fotografia di un bel tramonto" width="500" height="300">
    
  

In questo esempio, l'immagine verrà caricata dal file images/sunset.jpg, mostrata con una larghezza di 500 pixel e un'altezza di 300 pixel, e in caso l'immagine non venga caricata, verrà mostrato il testo "Fotografia di un bel tramonto".