Le immagini all’interno di un sito web sono fondamentali per arricchirlo e rendere attiva l’interazione con l’utente, rendendo la pagina più appetibile. Nei semplici passaggi che andremo a descrivere, impareremo come inserire immagini in html e come migliorare la gestione e la qualità dell’immagine nel linguaggio HTML, così da avere la massima resa possibile sulla propria app web.
Ma facciamo un passo indietro, cos’è l HTML?
L’ HTML è un linguaggio di markup, dunque non si identifica come linguaggio di programmazione. L’acronimo html sta per Hypertext Mark-up Language ed è utilizzato per la creazione di documenti ipertestuali, le pagine che tutti vediamo sul web. Composto da tag e attributi html, permette di creare la struttura di tutte le pagine web sin dagli anni ’90.
Come inserire immagini in html
Il tag immagine HTML è proprio quello che ci consentirà di inserire l’immagine all’interno della nostra pagina web, ma il linguaggio HTML fornisce diverse soluzioni per la gestione delle immagini. Ad esempio:
- <img> utilizzando src
- <img> utilizzando srcset
- <picture> con più <source> e srcset
- <img> con solo src ed un Image Manager (risulta essere una soluzione molto pratica.
Supponiamo di avere un sito web che sta semplicemente caricando un’immagine da un dominio. Vediamo come inserire immagini in HTML:
<!DOCTYPE html>
<html>
<body>
<img
src="https://aulab.it/img/aulab-hackademy-header.webp"
alt="PC portatile su uno sfondo giallo e grigio."
>
</body>
</html>10.
Un documento HTML con un singolo tag image ha un attributo src e alt. Questo è il primo step per caricare e visualizzare un’immagine su una pagina web, ora l’obiettivo è ottimizzare questa immagine.
Step 1: ottimizzare e fare il “resize” dell’immagine
Il primo passaggio è piuttosto semplice. Le immagini della tua pagina html dovrebbero essere grandi a seconda della necessità (anche gusto personale). Se la tua immagina è 600×400 pixel, è inutile far scaricare agli utenti un’immagine 1920×1080 pixel. Molti siti web non necessitano della massima qualità possibile. La compressione dell’immagine viene in aiuto in queste situazioni. Per la compressione si può utilizzare Squoosh, una web app che ci permette di fare rapidamente il resize di un’immagine a scelta.
Step 2: creare immagini responsive
L’attributo srcset nel linguaggio HTML è cruciale per questo compito. Ci permette di definire più origini (differenti) per l’immagine, in base a determinate caratteristiche, come ad esempio la larghezza del dispositivo.
<!DOCTYPE html>
<html>
<body>
<img
srcset="
https://aulab.it/img/aulab-hackademy-header-1080x540.webp 1080w,
https://aulab.it/img/aulab-hackademy-header-480x240.webp 480w,
https://aulab.it/img/aulab-hackademy-header-200x100.webp 200w,
https://aulab.it/img/aulab-hackademy-header-768x384.webp 768w,
https://aulab.it/img/aulab-hackademy-header-1080x540.webp 1200w"
src="https://aulab.it/img/aulab-hackademy-header.webp"
alt="PC portatile su uno sfondo giallo e grigio."
>
</body>
</html>16.
Ecco fatto. Cinque immagini di diverse dimensioni definendo le larghezze corrispondenti. Visivamente non ci sono cambiamenti, ma l’immagine così si adatterà alle dimensioni degli schermi.
Più piccola è la dimensione e più rapido è il caricamento e l’invio dell’immagine. Gli attributi di srcset nel linguaggio HTML aiutano a ridimensionare l’immagine anche quando questa viene caricata su uno schermo relativamente piccolo e viceversa.
Questo metodo migliora tanto l’esperienza dell’utente, risparmiando sulla bandwidth e migliorando le prestazioni non soltanto visive, ma anche di caricamento.
Step 3: utilizzare formati di immagini moderni
L’immagine che stiamo caricando è nel formato WebP, ormai molto utilizzato nei siti web, a discapito dei più conosciuti JPG, PNG o GIF. Questi formati forniscono tassi di compressione molto più elevati senza grosse perdite di dati, il che significa che possiamo effettivamente visualizzare la stessa immagine in un file di dimensioni molto inferiori.
Il linguaggio HTML ci mette a disposizione l’elemento HTML <picture>.
Simile all’attributo srcset, picture consente di definire diverse fonti di immagini da impostare in base alle caratteristiche del dispositivo.
Una cosa che distingue l’elemento picture dall’attributo srcset è che possiamo scegliere come target diversi tipi mime.
Aggiungiamo un elemento immagine al nostro esempio che includa i formati AVIF se il browser li supporta.
<!DOCTYPE html>
<html>
<body>
<picture>
<source
type="image/avif"
srcset="
https://aulab.it/img/aulab-hackademy-header-1080x540.webp 1080w,
https://aulab.it/img/aulab-hackademy-header-480x240.webp 480w,
https://aulab.it/img/aulab-hackademy-header-200x100.webp 200w,
https://aulab.it/img/aulab-hackademy-header-768x384.webp 768w,
https://aulab.it/img/aulab-hackademy-header-1080x540.webp 1200w"
>
<img
src="https://aulab.it/img/aulab-hackademy-header.webp"
alt="PC portatile su uno sfondo giallo e grigio."
>
</picture>
</body>
</html>21.
In questo modo il formato visualizzato dall’utente sarà AVIF, più moderno, più compresso, ma con la massima resa grazie agli strumenti che fornisce il nostro linguaggio di markup preferito.
Step 5: semplificare i formati di immagine più moderni
Per semplificare si intende utilizzare una versione diversa della immagine caricata per ogni formato e larghezza a seconda del dispositivo target. Sebbene i browser forniscano funzionalità per rendere immagini migliori e l’esperienza utente elevata, ciò ha un costo per il lavoro degli sviluppatori.
Potremmo automatizzare il processo quando le immagini vengono caricate per generare i diversi formati e dimensioni, quindi archiviare quei dettagli in un database. Ci sono strumenti che possono aiutare, come sharp, ma è ancora dispendioso.
Si può utilizzare Akamai Image and Video Manager, anche se ci sono altre app che svolgono lo stesso tipo di lavoro. L’obiettivo principale è fornire la migliore immagine per l’utente senza far impazzire gli sviluppatori.
Utilizzando Image Manager è possibile creare un’istanza dell’immagine che vogliamo caricare andando a modificare l’URL e risparmiando l’utilizzo di codice superfluo come il blocco del tag <picture>.
Quindi l’URL diventerà questo ” https://images.aulab.it/img/aulab-hackademy-header.webp “.
Abbiamo visto come in diversi modi è possibile gestire e migliorare la qualità delle immagini in una pagina web grazie ad HTML. Partendo dal banale tag immagine html img, andando via via a scoprire i diversi attributi che possono rendere l’esperienza utente migliore e più immersiva. Grazie all’Image Manager tutti i tag e attributi html vengono rimpiazzati ed è un grosso risparmio per lo sviluppatore web.
Il linguaggio di markup è anche questo, esplorazione e opportunità di avere diverse strade da percorrere. Certo che è sempre meglio scegliere la soluzione più rapida e meno dispendiosa per uno sviluppatore web.
Se questo piccolo tutorial su come inserire le immagini in html e come ottimizzarle quando vuoi creare un sito web o una pagina semplice html ti è piaciuto e ti ha incuriosito, non puoi assolutamente perderti la nostra guida html e css in italiano, grazie alla quale potrai iniziare a padroneggiare discretamente questi due linguaggi e muovere i tuoi primi passi per diventare un programmatore! Cosa aspetti
