Introduzione
In questo tutorial, esploreremo come integrare immagini in una pagina web utilizzando HTML. Le immagini sono un elemento fondamentale per migliorare l´aspetto visivo e l´interattività di un sito. Impareremo a utilizzare il tag <img> e a gestire le sue proprietà per ottimizzare la visualizzazione delle immagini.
Codice completo
<h1>Benvenuti nel mio sito</h1>
<p>Qui troverete una selezione di immagini interessanti.</p>
<h2>Galleria di Immagini</h2>
<div class="galleria">
<img src="immagine1.jpg" alt="Descrizione dell´immagine 1" width="300" height="200">
<img src="immagine2.jpg" alt="Descrizione dell´immagine 2" width="300" height="200">
<img src="immagine3.jpg" alt="Descrizione dell´immagine 3" width="300" height="200">
</div>
<h2>Immagini Responsive</h2>
<p>Per rendere le immagini responsive, possiamo utilizzare il CSS. Ecco un esempio di come farlo:</p>
<pre><code>
.galleria img {
max-width: 100%;
height: auto;
}
</code></pre>
Spiegazione
Il tag <img> è utilizzato per inserire immagini in una pagina HTML. Esso richiede almeno l´attributo src, che specifica il percorso dell´immagine, e l´attributo alt, che fornisce una descrizione testuale dell´immagine per migliorare l´accessibilità e il SEO.
Nel nostro esempio, abbiamo creato una galleria di immagini. Ogni immagine ha una larghezza di 300 pixel e un´altezza di 200 pixel. Tuttavia, è importante notare che le dimensioni possono essere adattate in base al design della pagina.
Per rendere le immagini responsive, abbiamo utilizzato una semplice regola CSS che imposta la larghezza massima delle immagini al 100% del contenitore e l´altezza automatica, permettendo così di mantenere le proporzioni originali.
Best practice
- Utilizza sempre l´attributo
alt: Questo non solo migliora l´accessibilità per gli utenti con disabilità visive, ma aiuta anche i motori di ricerca a comprendere il contenuto dell´immagine. - Ottimizza le immagini: Prima di caricare un´immagine, assicurati che sia ottimizzata per il web. Utilizza formati come JPEG o PNG e riduci le dimensioni del file per migliorare i tempi di caricamento.
- Usa percorsi relativi: Quando possibile, utilizza percorsi relativi per il caricamento delle immagini. Questo rende il tuo codice più portabile e facile da gestire.
- Considera il caricamento lazy: Per pagine con molte immagini, considera l´implementazione del caricamento lazy, che carica le immagini solo quando sono visibili nella finestra del browser.
Riepilogo
In questo tutorial, abbiamo appreso come integrare immagini in una pagina HTML utilizzando il tag <img>. Abbiamo visto l´importanza dell´attributo alt e come rendere le immagini responsive attraverso il CSS. Seguendo le best practice, possiamo migliorare l´accessibilità e le prestazioni del nostro sito web.
Approfondisci con risorse ufficiali
Per ulteriori informazioni sull´uso delle immagini in HTML, ti consiglio di visitare le seguenti risorse ufficiali: