Il Tag <img> Spiegato

Il tag <img> è un elemento HTML auto-chiudente utilizzato per incorporare immagini nelle pagine web. A differenza di altri elementi HTML, non richiede un tag di chiusura e utilizza attributi per definire la sorgente e le proprietà dell'immagine.

Sintassi Base dell'Immagine

<img src="percorso/alla/immagine.jpg" alt="Descrizione dell'immagine" />

Attributi Essenziali del Tag <img>

Attributi Obbligatori:

• src: Specifica il percorso al file immagine
• alt: Fornisce testo alternativo per l'accessibilità

Attributi Opzionali:

• width: Imposta la larghezza dell'immagine in pixel
• height: Imposta l'altezza dell'immagine in pixel
• title: Aggiunge un tooltip quando si passa il mouse sull'immagine
• loading: Controlla quando l'immagine viene caricata (caricamento lazy)

Esempio Completo

<img
  src="immagini/tramonto-spiaggia.jpg"
  alt="Bellissimo tramonto su una spiaggia tropicale con palme"
  width="800"
  height="600"
  title="Paradiso del Tramonto in Spiaggia"
  loading="lazy"
/>

L'Importanza del Testo Alternativo

Il testo alternativo (alt text) è fondamentale per l'accessibilità web e la SEO. Serve a molteplici scopi:

Perché il Testo Alternativo è Importante

1. Accessibilità: I lettori di schermo utilizzano il testo alternativo per descrivere le immagini agli utenti ipovedenti
2. SEO: I motori di ricerca utilizzano il testo alternativo per comprendere il contenuto delle immagini
3. Fallback: Si visualizza quando le immagini non riescono a caricarsi
4. Contesto: Fornisce significato e contesto per l'immagine

Scrivere Testo Alternativo Efficace

Esempi di Buon Testo Alternativo:

<!-- Descrittivo e specifico -->
<img
  src="golden-retriever.jpg"
  alt="Golden retriever che gioca a riportare in un parco soleggiato"
/>

<!-- Descrizione funzionale per i pulsanti -->
<img src="icona-ricerca.png" alt="Cerca" />

<!-- Alt vuoto per immagini decorative -->
<img src="bordo-decorativo.png" alt="" />

Migliori Pratiche per il Testo Alternativo:

• Sii descrittivo ma conciso (sotto i 125 caratteri)
• Includi dettagli importanti e contesto
• Evita "immagine di" o "foto di"
• Usa alt vuoto (alt="") per immagini puramente decorative
• Includi il testo che appare nell'immagine

Esempi di Testo Alternativo Scadente:

<!-- Troppo vago -->
<img src="cane.jpg" alt="cane" />

<!-- Ridondante -->
<img src="tramonto.jpg" alt="Immagine di un tramonto" />

<!-- Troppo lungo -->
<img
  src="ufficio.jpg"
  alt="Un edificio per uffici moderno molto grande con finestre di vetro e struttura in acciaio situato nel centro città con persone che camminano"
/>

Formati di File Immagine e Quando Usarli

Scegliere il formato immagine giusto è cruciale per le prestazioni web e la qualità. Ecco i formati principali e i loro casi d'uso:

JPEG (.jpg, .jpeg)

Migliore per: Fotografie e immagini con molti colori

Caratteristiche:

• Compressione con perdita
• Dimensioni file ridotte
• Supporta milioni di colori
• Nessun supporto per la trasparenza

<img src="foto-paesaggio.jpg" alt="Paesaggio montano all'alba" />

PNG (.png)

Migliore per: Immagini con trasparenza, loghi, grafiche con pochi colori

Caratteristiche:

• Compressione senza perdita
• Supporta la trasparenza
• Dimensioni file maggiori rispetto a JPEG
• Perfetto per loghi e icone

<img src="logo-azienda.png" alt="Logo dell'azienda Mediaweb" />

WebP (.webp)

Migliore per: Applicazioni web moderne (quando supportato)

Caratteristiche:

• Compressione superiore a JPEG e PNG
• Supporta trasparenza e animazione
• Non supportato da tutti i browser
• Dimensioni file 25-35% più piccole

<picture>
  <source srcset="immagine-hero.webp" type="image/webp" />
  <img src="immagine-hero.jpg" alt="Banner hero che mostra il nostro prodotto" />
</picture>

SVG (.svg)

Migliore per: Grafiche semplici, icone, loghi che devono scalare

Caratteristiche:

• Formato vettoriale (scalabile)
• Dimensioni file molto ridotte
• Nitidezza perfetta a qualsiasi dimensione
• Può essere stilizzato con CSS

<img src="icona-freccia.svg" alt="Freccia destra" />

GIF (.gif)

Migliore per: Animazioni semplici (usare con parsimonia)

Caratteristiche:

• Supporta l'animazione
• Limitato a 256 colori
• Dimensioni file grandi per le animazioni
• Considera formati video per animazioni complesse

Immagini Responsive e Srcset

I siti web moderni devono funzionare su varie dimensioni e risoluzioni dello schermo. Le immagini responsive garantiscono prestazioni e qualità ottimali su tutti i dispositivi.

L'Attributo srcset

L'attributo srcset ti permette di fornire multiple sorgenti immagine per diverse condizioni dello schermo:

<img
  src="immagine-800w.jpg"
  srcset="immagine-400w.jpg 400w, immagine-800w.jpg 800w, immagine-1200w.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  alt="Immagine paesaggio responsive"
/>

Comprendere la Sintassi di Srcset

Descrittori di Larghezza (w):

srcset=" immagine-piccola.jpg 400w, immagine-media.jpg 800w, immagine-grande.jpg 1200w "

Descrittori di Densità (x):

srcset=" immagine.jpg 1x, immagine-2x.jpg 2x, immagine-3x.jpg 3x "

L'Elemento <picture>

Per scenari di immagini responsive più complessi, usa l'elemento <picture>:

<picture>
  <!-- Mobile: immagine più piccola, ritagliata -->
  <source media="(max-width: 600px)" srcset="hero-mobile.jpg" />

  <!-- Tablet: immagine di dimensioni medie -->
  <source media="(max-width: 1024px)" srcset="hero-tablet.jpg" />

  <!-- Desktop: immagine a dimensione piena -->
  <source media="(min-width: 1025px)" srcset="hero-desktop.jpg" />

  <!-- Fallback per browser più vecchi -->
  <img src="hero-desktop.jpg" alt="Banner hero che mostra i nostri servizi" />
</picture>

Art Direction con Picture

Usa immagini diverse per diverse dimensioni dello schermo:

<picture>
  <!-- Mobile: orientamento verticale -->
  <source media="(max-width: 600px)" srcset="immagine-verticale.jpg" />

  <!-- Desktop: orientamento orizzontale -->
  <img src="immagine-orizzontale.jpg" alt="Collaborazione del team in ufficio moderno" />
</picture>

Ottimizzare le Immagini per le Prestazioni Web

L'ottimizzazione delle immagini è cruciale per siti web a caricamento veloce. Ecco le tecniche essenziali:

1. Scegli le Dimensioni Giuste

<!-- Non fare questo: immagine grande ridimensionata -->
<img
  src="immagine-enorme-4000x3000.jpg"
  width="400"
  height="300"
  alt="Foto prodotto"
/>

<!-- Fai questo: immagine dimensionata appropriatamente -->
<img src="prodotto-400x300.jpg" width="400" height="300" alt="Foto prodotto" />

2. Implementa il Caricamento Lazy

<!-- Browser moderni -->
<img src="immagine.jpg" alt="Descrizione" loading="lazy" />

<!-- Con fallback intersection observer -->
<img
  src="placeholder.jpg"
  data-src="immagine-reale.jpg"
  alt="Descrizione"
  class="lazy-load"
  loading="lazy"
/>

3. Usa Compressione Appropriata

Per immagini JPEG:

• Usa qualità 80-85% per la maggior parte delle foto
• Usa qualità 90-95% per immagini hero importanti
• Usa qualità 60-75% per miniature

Per immagini PNG:

• Usa strumenti come TinyPNG o ImageOptim
• Considera la conversione a WebP quando possibile

4. Implementa il Progressive Enhancement

<picture>
  <!-- Formato moderno per browser supportati -->
  <source srcset="immagine.avif" type="image/avif" />
  <source srcset="immagine.webp" type="image/webp" />

  <!-- Fallback per tutti i browser -->
  <img src="immagine.jpg" alt="Descrizione" />
</picture>

5. Aggiungi Attributi di Dimensionamento Appropriati

<!-- Previene il layout shift -->
<img
  src="immagine.jpg"
  alt="Descrizione"
  width="800"
  height="600"
  style="max-width: 100%; height: auto;"
/>

Tecniche Avanzate per le Immagini

Mappe Immagine

Crea aree cliccabili all'interno di un'immagine:

<img src="mappa-mondo.jpg" alt="Mappa del mondo" usemap="#mappamondo" />

<map name="mappamondo">
  <area
    shape="rect"
    coords="0,0,100,100"
    href="nord-america.html"
    alt="Nord America"
  />
  <area shape="circle" coords="200,200,50" href="europa.html" alt="Europa" />
</map>

Figure e Figcaption

Fornisci significato semantico e didascalie:

<figure>
  <img src="grafico.jpg" alt="Grafico crescita vendite che mostra aumento del 25%" />
  <figcaption>
    Crescita Vendite: Q4 2024 mostra un aumento del 25% rispetto al trimestre precedente
  </figcaption>
</figure>

Integrazione CSS

Stilizza le immagini con CSS:

<img src="profilo.jpg" alt="Foto profilo utente" class="immagine-profilo" />

.immagine-profilo {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #007bff;
}

Errori Comuni con le Immagini da Evitare

1. Testo Alternativo Mancante

<!-- Sbagliato -->
<img src="grafico-importante.jpg" />

<!-- Corretto -->
<img
  src="grafico-importante.jpg"
  alt="Grafico crescita fatturato che mostra aumento del 40%"
/>

2. Usare Immagini per il Testo

<!-- Sbagliato: testo nell'immagine -->
<img src="testo-intestazione.jpg" alt="Benvenuti nel Nostro Sito Web" />

<!-- Corretto: testo reale -->
<h1>Benvenuti nel Nostro Sito Web</h1>

3. Non Ottimizzare le Dimensioni dei File

<!-- Sbagliato: file enorme -->
<img src="foto-5mb.jpg" alt="Foto del team" />

<!-- Corretto: file ottimizzato -->
<img src="foto-ottimizzata-200kb.jpg" alt="Foto del team" />

4. Ignorare il Design Responsive

<!-- Sbagliato: dimensione fissa -->
<img src="hero.jpg" width="1200" height="800" alt="Immagine hero" />

<!-- Corretto: responsive -->
<img
  src="hero.jpg"
  srcset="hero-400w.jpg 400w, hero-800w.jpg 800w, hero-1200w.jpg 1200w"
  sizes="100vw"
  alt="Immagine hero"
  style="max-width: 100%; height: auto;"
/>

Riassunto delle Migliori Pratiche

1. Includi sempre il testo alternativo per accessibilità e SEO
2. Scegli il formato file giusto basato sul tipo di immagine e caso d'uso
3. Ottimizza le dimensioni dei file senza sacrificare la qualità necessaria
4. Usa immagini responsive con attributi srcset e sizes
5. Implementa il caricamento lazy per migliori prestazioni
6. Includi attributi width e height per prevenire il layout shift
7. Usa HTML semantico con figure e figcaption quando appropriato
8. Testa su diversi dispositivi per assicurarti che le immagini si visualizzino correttamente
9. Considera formati moderni come WebP e AVIF con fallback
10. Monitora le prestazioni e ottimizza basandoti sui dati degli utenti reali

Conclusione

Lavorare con le immagini in HTML comporta molto più che aggiungere semplicemente un tag <img> alla tua pagina. Comprendendo l'implementazione corretta, i requisiti di accessibilità, i formati file, le tecniche responsive e le strategie di ottimizzazione, puoi creare siti web che sono veloci, accessibili e visivamente accattivanti su tutti i dispositivi.

Ricorda che le immagini impattano significativamente sia l'esperienza utente che le prestazioni del sito web. Prenditi il tempo per implementare queste tecniche correttamente, e i tuoi utenti ti ringrazieranno con un migliore coinvolgimento e caricamenti di pagina più veloci.

Inizia a implementare queste tecniche di ottimizzazione delle immagini nel tuo prossimo progetto, e vedrai miglioramenti immediati sia nei punteggi di prestazioni che di accessibilità.