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.
Come inserire le immagini
Per inserire le immagini, si utilizza il tag <img>. Questo non inserisci veramente un’immagine, ma ha il compito di collegarla alla pagina web. Questo tag non si deve chiudere e in esso deve essere incluso anche l’attributo src=”valore”. Al posto di valore, si può inserire un link all’immagine.
<img src="https://esempio.com/immagine.jpg">
Se l’immagine si trova nella stessa cartella in cui si trova il file HTML, indipendentemente se si utilizza un server o il proprio computer in locale, potete inserire solo il nome e l’estensione.
<img src="immagine.jpg">
Quando invece si trova in un’altra cartella, devi inserire il collegamento completo. Se il tuo sito è online, puoi inserire un link con la / senza inserire il dominio.
<img src="/cartella_immagini/immagine.jpg"> // Su un server
<img src="C:/user/cartella_immagini/immagine.jpg"> // Su un computer
Se la si vuole inserire in una sottocartella, basta scrivere nome_cartella/immagine.estensione.
Attributi per le immagini
Molto importante è la dimensione di un’immagine all’interno della pagina. Si può utilizzare l’attributo height=”valore” per indicare l’altezza e width=”valore” per la larghezza all’interno del tag <img>. Se si inseriscono uno o entrambi di questi attributi, si deve indicare un valore in pixel (misurato in px, per esempio width=”50px”) o in percentuale rispetto alla grandezza della pagina (per esempio width=”50%” significa metà larghezza della pagina). Quando non vengono inseriti l’immagine rimane nella grandezza originale.
<img src="immagine.jpg" height="10%" width="20%">
Un altro importante attributo è alt=”valore” che serve per dare un testo alternativo all’immagine. Per esempio, se l’immagine tratta di un campo di tulipani, possiamo inserire questo.
<img src="tulipani.jpg" alt="Un campo di tulipani rossi">
Questo serve nei casi in cui per qualche motivo non venga visualizzata correttamente, ma anche per i servizi di accessibilità, utilizzati ad esempio dai non vedenti, che leggono il testo alternativo contenuto in alt. I motori di ricerca, quindi, tendono a inserire prima i siti in cui le immagini hanno questo attributo.
Possibili problemi nell’uso delle immagini
Utilizzando le immagini nel proprio sito, però, potrebbero nascere problemi per quanto riguarda le prestazioni. Infatti, un’immagine di grosse dimensioni potrebbe portare ad un caricamento della pagina più lungo rispetto ad una che non ne ha.
Per questo consigliamo di controllare la grandezza dell’immagine che non superi i 3MB circa e per ridurla puoi convertirla in un file WEBP. Questo tipo di formato è molto più leggero e meglio ottimizzato per siti web. Puoi convertire un’immagine in WEBP utilizzando normali convertitori online come Convertio.
| Prossima lezione |