Lezione 9 — Immagini in HTML: src, alt e l'ottimizzazione delle performance

Scopri come inserire immagini in HTML correttamente utilizzando i tag src e alt, e impara le migliori tecniche per ottimizzare le performance del tuo sito web.

Introduzione alle immagini in HTML

Le immagini sono elementi fondamentali di qualsiasi sito web moderno. Non servono solo a rendere una pagina esteticamente gradevole, ma svolgono ruoli cruciali nella comunicazione, nel branding e nell'esperienza utente (UX). Tuttavia, inserire un'immagine in una pagina web non significa semplicemente "caricare un file"; significa gestire risorse che possono influenzare pesantemente la velocità di caricamento e l'accessibilità del sito.

In questa nona lezione del corso "Impara HTML in 45 lezioni", esploreremo in profondità l'elemento <img>, analizzando i suoi attributi fondamentali, l'importanza dell'accessibilità tramite l'attributo alt e le strategie per garantire che le immagini non rallentino il tuo sito.

L'elemento e l'attributo src

In HTML, l'immagine viene inserita tramite il tag <img>. Una caratteristica fondamentale di questo elemento è che è un elemento void (o auto-chiudente), il che significa che non possiede un tag di chiusura come </img>.

L'attributo più importante è senza dubbio src, abbreviazione di source (sorgente). Questo attributo indica al browser l'indirizzo (URL) del file immagine che deve essere scaricato e visualizzato.

Percorsi Relativi vs Percorsi Assoluti

Esistono due modi principali per definire l'attributo src:

  1. Percorsi Assoluti: Vengono utilizzati quando l'immagine si trova su un server esterno. In questo caso, si indica l'URL completo.

    • Esempio: src="https://esempio.com/immagini/logo.png"

  2. Percorsi Relativi: Vengono utilizzati quando l'immagine si trova all'interno della stessa cartella o in una sottocartella del tuo progetto. Questo è l'approccio preferito per le risorse interne al sito, poiché rende il progetto portabile (se sposti l'intero sito su un altro server, i collegamenti rimangono validi).

    • Esempio: src="images/foto-profilo.jpg" (l'immagine si trova nella cartella images che è nella stessa directory del file HTML).

Ecco un esempio base di implementazione:

<!-- Esempio di inserimento immagine con percorso relativo -->
<img src="assets/img/banner-principale.jpg" alt="Panorama delle montagne al tramonto">

In questo codice, il browser cercherà il file banner-principale.jpg all'interno della cartella assets/img e lo renderà a video.

L'importanza dell'attributo alt: Accessibilità e SEO

L'attributo alt (testo alternativo) è spesso trascurato dai principianti, ma è uno dei pilastri dello sviluppo web professionale. Il suo scopo è fornire una descrizione testuale dell'immagine qualora questa non possa essere visualizzata o qualora l'utente non possa vederla.

Perché l'attributo alt è obbligatorio per un buon sviluppatore?

  1. Accessibilità (Screen Reader): Le persone non vedenti o ipovedenti utilizzano software chiamati screen reader che leggono il contenuto della pagina. Quando lo screen reader incontra un'immagine, leggerà ad alta voce il contenuto dell'attributo alt. Senza di esso, l'utente saprebbe solo che c'è "un'immagine", perdendo il contesto del contenuto.
  2. Fallback in caso di errore: Se l'immagine non viene caricata (a causa di un errore nel percorso src o di una connessione internet lenta), il browser mostrerà il testo contenuto nell'attributo alt al posto dell'immagine.
  3. SEO (Search Engine Optimization): I motori di ricerca come Google non "vedono" le immagini come gli umani, ma ne leggono il codice. Un attributo alt descrittivo aiuta Google a capire di cosa tratta l'immagine, migliorando il posizionamento del sito nelle ricerche di Google Immagini.

Come scrivere un buon testo alt

Un errore comune è scrivere "Immagine di..." o "Foto di...". È inutile, perché lo screen reader specifica già che si tratta di un'immagine.

  • Sbagliato: alt="Foto di un gatto nero"
  • Corretto: alt="Gatto nero che dorme su un divano di velluto rosso"

Se l'immagine è puramente decorativa (ad esempio una linea di separazione o un pattern di sfondo), l'attributo alt deve essere presente ma vuoto: alt="". In questo modo, gli screen reader ignoreranno l'immagine, evitando di disturbare l'utente con informazioni irrilevanti.

Performance e Ottimizzazione delle Immagini

Le immagini sono spesso l'elemento più pesante di una pagina web. Se carichi immagini non ottimizzate, i tempi di caricamento aumenteranno, portando gli utenti ad abbandonare il sito e penalizzando il tuo ranking SEO.

Scelta del formato

Non tutti i formati di immagine sono uguali. Scegliere quello giusto è il primo passo per l'ottimizzazione:

  • JPEG: Ideale per fotografie e immagini complesse. Offre un buon compromesso tra qualità e compressione.
  • PNG: Perfetto per loghi, icone o immagini che richiedono trasparenza. I file sono generalmente più pesanti dei JPEG.
  • SVG: Formato vettoriale. Ideale per icone e illustrazioni semplici. Non perde qualità se ingrandito e ha un peso bassissimo perché è basato su codice XML.
  • WebP: Il formato moderno creato da Google. Offre una compressione superiore sia per foto che per grafiche, mantenendo un'alta qualità. È caldamente raccomandato per il web moderno.

Ridimensionamento e Compressione

Un errore classico è caricare un'immagine di 4000x3000 pixel per poi visualizzarla in un quadratino di 200x200 pixel tramite CSS. Il browser scaricherà comunque l'intero file pesante, sprecando banda e tempo.

Regola d'oro: Ridimensiona l'immagine nelle dimensioni esatte (o quasi) in cui verrà visualizzata prima di caricarla sul server. Usa strumenti come TinyPNG o Squoosh per comprimere i file senza perdere qualità visibile.

Lazy Loading: Caricamento Differito

Il Lazy Loading permette di istruire il browser a caricare l'immagine solo quando l'utente sta per scorrere la pagina e l'immagine sta per entrare nel campo visivo (viewport). Questo accelera drasticamente il caricamento iniziale della pagina.

In HTML moderno, basta aggiungere l'attributo loading="lazy":

<!-- L'immagine verrà caricata solo quando l'utente scorre verso il basso -->
<img src="galleria/foto-vacanze.jpg" alt="Spiaggia bianca e mare cristallino" loading="lazy">

Esempi Pratici e Casi d'Uso

Vediamo come applicare tutto quanto appreso in tre scenari comuni.

Caso 1: Il Logo del Sito

Il logo è l'elemento più importante dell'header. Deve essere nitido, veloce da caricare e accessibile.

<header>
  <a href="/">
    <img src="img/logo-azienda.svg" alt="Logo Azienda WebDev - Home Page" width="150" height="50">
  </a>
</header>

Perché SVG? Perché il logo deve essere perfetto su ogni risoluzione di schermo (Retina, 4K) e deve pesare pochissimi KB.

Caso 2: Immagine di Copertina (Hero Image)

L'immagine principale di un sito deve essere d'impatto ma non deve bloccare il rendering della pagina.

<section class="hero">
  <img src="img/hero-banner.webp" alt="Sviluppatore che scrive codice JavaScript su un laptop" fetchpriority="high">
</section>

Nota: Qui non usiamo loading="lazy" perché l'immagine è all'inizio della pagina. Anzi, useremo fetchpriority="high" per dire al browser di dare priorità a questo file.

Caso 3: Galleria di Prodotti (E-commerce)

In una pagina con 50 prodotti, caricare tutte le immagini contemporaneamente sarebbe disastroso.

<div class="product-grid">
  <img src="prod/scarpa-1.webp" alt="Scarpa da corsa rossa modello FastRun" loading="lazy">
  <img src="prod/scarpa-2.webp" alt="Scarpa da corsa blu modello FastRun" loading="lazy">
  <img src="prod/scarpa-3.webp" alt="Scarpa da corsa verde modello FastRun" loading="lazy">
  <!-- Altre 47 immagini... -->
</div>

Perché Lazy Loading? Perché l'utente vedrà solo le prime 4-8 immagini. Caricare le altre 42 immediatamente sarebbe uno spreco di risorse.

Errori Comuni e FAQ

Perché l'immagine non appare?

Se vedi l'icona di un'immagine rotta e il testo alt, controlla questi punti:

  1. Errore di battitura: Il nome del file è case-sensitive su molti server (es. Foto.jpg è diverso da foto.jpg).
  2. Percorso errato: Hai scritto src="immagini/foto.jpg" ma la cartella si chiama img?
  3. Estensione sbagliata: Il file è un .png ma hai scritto .jpg?

Devo sempre mettere width e height?

Sì, è consigliato. Specificando le dimensioni nell'HTML, il browser riserva lo spazio necessario per l'immagine prima ancora che sia scaricata. Questo evita il fastidioso "salto" del contenuto (Cumulative Layout Shift - CLS) mentre la pagina si carica, migliorando l'esperienza utente e il punteggio Core Web Vitals di Google.

Posso usare immagini da internet (Hotlinking)?

Tecnicamente sì, usando l'URL assoluto. Tuttavia, è una pessima pratica. Se il proprietario del sito originale elimina l'immagine o cambia l'URL, l'immagine sul tuo sito sparirà. Inoltre, alcuni siti bloccano l'hotlinking per risparmiare banda.

Prossimi passi

Ora che conosci le basi per inserire e ottimizzare le immagini in HTML, sei pronto per fare un salto di qualità. Ecco cosa ti suggerisco di studiare per approfondire:

  1. L'elemento <picture>: Impara a servire immagini diverse in base alla risoluzione dello schermo (Responsive Images) utilizzando l'elemento <picture> e l'attributo srcset. Questo ti permetterà di mostrare un'immagine piccola sui telefoni e una grande sui desktop.
  2. CSS Background Images: Scopri quando è meglio usare l'elemento <img> (per contenuti significativi) e quando è meglio usare background-image in CSS (per elementi decorativi).
  3. Strumenti di compressione: Sperimenta con strumenti come Squoosh.app per capire come diverse impostazioni di compressione influenzano la qualità e il peso del file.

Ricorda: un sito web veloce è un sito web che converte. L'ottimizzazione delle immagini è uno dei modi più rapidi ed efficaci per migliorare le performance complessive del tuo progetto.