CONTATTACI

Blog

Migliorare le immagini in HTML

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?

Cos è il codice 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

Articoli correlati

Il linguaggio HTML (Hypertext Markup Language) è uno dei più conosciuti e diffusi: lo si trova infatti praticamente in tutte le pagine web esistenti. È una scelta popolare tra i principianti che si…

Seguici su Facebook

Vuoi entrare nel mondo della programmazione?

Scopri di più sui nostri corsi!

Chiamaci al numero verde

Contattaci su WhatsApp

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.