Le immagini

In questo tutorial scoprirai come utilizzare il tag img in HTML per inserire immagini all’interno delle pagine web. Vedremo quali attributi sono fondamentali, come scegliere il formato di immagine più adatto e alcune buone pratiche per organizzare e ottimizzare le immagini nei progetti web.

Sommario

• 00:00 Introduzione
• 00:27 Il tag img: src e alt
• 01:12 Formati di immagini (PNG, WebP, JPEG, SVG)
• 04:37 Organizzare le immagini nel progetto
• 07:20 Attributi width e height
• 09:52 Ottimizzazione delle immagini
• 11:41 Il tag img inline e immagini cliccabili
• 13:01 Usare immagini online
• 14:14 Conclusione

Il tag img viene utilizzato per visualizzare immagini all'interno di una pagina web. È un elemento vuoto, il che significa che non ha un tag di chiusura e deve sempre includere un attributo src per specificare la fonte dell'immagine.

Esempio

<img src="esempio.jpg" alt="Descrizione dell'immagine">

Attributi comuni del tag img

• src: Specifica il percorso dell'immagine. Può essere un percorso relativo o assoluto.
• alt: Fornisce un testo descrittivo dell'immagine per utenti con difficoltà visive o in caso di errore nel caricamento.
• width: Imposta la larghezza dell'immagine in pixel o percentuale.
• height: Imposta l'altezza dell'immagine in pixel o percentuale.
• title: Mostra un testo descrittivo aggiuntivo quando l'utente passa sopra l'immagine con il mouse.

Note sull'accessibilità

• È importante utilizzare sempre l'attributo alt per descrivere il contenuto dell'immagine, migliorando l'accessibilità per gli utenti non vedenti che utilizzano screen reader.
• Evita di usare descrizioni come "immagine" o "foto", a meno che non siano effettivamente utili per il contesto.

Esempio avanzato con dimensioni specifiche e titolo

<img src="logo.png" alt="Logo aziendale" width="200" height="100" title="Il logo della nostra azienda">

Con questi attributi, è possibile personalizzare l'aspetto e il comportamento delle immagini su una pagina web.