I siti web sono pieni di immagini, perché possono raffigurarne il contenuto e rendono la lettura del testo più piacevole e coinvolgente per i visitatori. Scopriamo quindi come aggiungerle.
Per inserire le immagini, si utilizza il tag <img>. Questo tag non si deve chiudere e in esso deve essere incluso anche l'attributo src=”valore”, che specifica la posizione dell'immagine. Al posto di valore, si deve inserire il link dell'immagine che si vuole aggiungere.
<img src="https://esempio.com/immagine.jpg">
Se l'immagine si trova nella stessa cartella in cui si trova il file HTML, indipendentemente dal fatto che si utilizzi un server o il proprio computer in locale, puoi inserire solo il nome del file e la sua estensione.
<img src="immagine.jpg">
Quando invece si trova in un'altra cartella, devi inserire il percorso completo. Se il tuo sito è online, puoi utilizzare un percorso che inizia con ”/percorso”, senza specificare il dominio.
<img src="/cartella_immagini/immagine.jpg"> <!-- Su un server -->
<img src="C:/user/cartella_immagini/immagine.jpg"> <!-- Su un computer -->
Se l'immagine si trova in una sottocartella, basta scrivere nome_cartella/immagine.estensione.
Molto importante è la dimensione di un'immagine all'interno della pagina. Si può utilizzare l'attributo height=”valore” per indicarne l'altezza e width=”valore” per la larghezza, entrambi all'interno del tag <img>. Se si inseriscono uno o entrambi questi attributi, bisogna indicare un valore in pixel (misurato in px, per esempio width=”50px”) oppure in percentuale rispetto alla larghezza della pagina (per esempio width=”50%” significa metà della larghezza della pagina). Abbiamo approfondito le unità di misura nella lezione Le unità di misura in CSS. Quando non vengono specificati, l'immagine mantiene le sue dimensioni originali.
<img src="immagine.jpg" height="10%" width="20%">
Un altro attributo importante è alt=”valore”, che serve per fornire un testo alternativo all'immagine. Per esempio, se l'immagine raffigura un campo di tulipani, possiamo inserire questa descrizione.
<img src="tulipani.jpg" alt="Un campo di tulipani rossi">
Questo attributo viene utilizzato quando, per qualche motivo, l'immagine non viene visualizzata correttamente, ma anche dai servizi di accessibilità, ad esempio quelli utilizzati dalle persone non vedenti, che leggono il testo alternativo contenuto nell'attributo alt. Inoltre, i motori di ricerca tendono a favorire i siti in cui le immagini sono dotate di questo attributo.
Utilizzando le immagini nel proprio sito, però, potrebbero nascere problemi riguardo le prestazioni. Infatti, un'immagine di grandi dimensioni potrebbe aumentare il tempo di caricamento della pagina rispetto a una più leggera.
Per questo consigliamo di verificare che la dimensione dell'immagine non superi circa 3 MB e, se necessario, di convertirla nel formato WEBP. Questo formato è molto più leggero e meglio ottimizzato per i siti web. Puoi convertire un'immagine in WEBP utilizzando uno dei numerosi convertitori disponibili online.