Una guida per principianti alle immagini reattive in HTML

Un'immagine reattiva è un'immagine che si adatta alle diverse caratteristiche del dispositivo. Se eseguite correttamente, le immagini reattive possono migliorare le prestazioni e l'esperienza utente di un sito.

Questo articolo illustra come creare immagini reattive in HTML utilizzando srcset e l'elemento immagine.

Perché dovresti usare immagini reattive?

Quando gli ingegneri del software stavano creando il Web, non hanno considerato come i browser avrebbero gestito le immagini reattive. Dopotutto, gli utenti accedevano al Web solo da desktop o laptop. Naturalmente, questo non è vero oggi.

Secondo Statista, oltre il 90% della popolazione mondiale di Internet naviga online utilizzando il proprio telefono cellulare. La maggior parte delle pagine Web su Internet contiene immagini e queste immagini sono una delle metriche utilizzate per misurare le prestazioni Web. Per migliorare le prestazioni, è necessario ottimizzare le immagini rendendole reattive.

Come creare immagini reattive in HTML

Puoi avvicinarti alle immagini reattive da due angolazioni: servendo la stessa immagine con dimensioni diverse o offrendo immagini diverse in base alle caratteristiche di visualizzazione. Potresti usare o. Queste due opzioni gestiscono le immagini reattive in modo diverso, ma visualizzano tutte un'immagine da determinate alternative a seconda delle regole impostate.

Imparentato: Come rendere il tuo sito web reattivo e interattivo con CSS e JavaScript

Usando srcset

Lo standard HTML consente di specificare solo un file immagine. Se si desidera visualizzare un'immagine diversa a seconda delle dimensioni del dispositivo, è necessario utilizzare srcset.

Sintassi:

srcset ti consente di fornire file di origine aggiuntivi e il browser sceglierà l'immagine che sembra ottimale per quella dimensione dell'immagine.

 src="cute-cat.jpg"
 alt="Un simpatico gatto">

srcset è composto da tre parti: il nome del file dell'immagine che specifica il percorso dell'immagine di origine, uno spazio e la larghezza intrinseca o reale dell'immagine.

Utilizzo di srcset con dimensioni

Il problema con l'utilizzo srcset è che non hai il controllo dell'immagine che il browser sceglierà per visualizzare. Combinando srcset insieme a taglie risolve questo problema. taglie definire un insieme di condizioni del supporto che suggeriscono l'immagine con la dimensione ottimale.

Ora puoi riscrivere il tag sopra come segue.

dimensioni="(larghezza massima: 600px) 480px,
 800px"
 src="cute-cat.jpg"
 alt="Un simpatico gatto">

taglie è costituito da una condizione multimediale, in questo esempio è (larghezza massima: 600px) che rappresenta il viewport larghezza, spazio e larghezza dello slot (480px) specificando lo spazio che l'immagine riempirà se la condizione del supporto lo è vero.

Imparentato: Come utilizzare le query multimediali in HTML e CSS per creare siti Web reattivi

Qui, il browser verificherà prima la larghezza del dispositivo e la confronterà con le condizioni del supporto. Se la condizione è vera, controllerà la larghezza dello slot e caricherà un'immagine da srcset con la stessa larghezza o quella successiva più grande.

Nota che stai anche includendo src che fornisce l'immagine per ripiegare su browser che non supportano srcset e taglie.

srcset ti consente anche di servire immagini a diverse risoluzioni usando i descrittori x.

 src="cute-cat-low.jpg"
 alt="Un simpatico gatto">

In questo esempio, se il dispositivo ha una risoluzione di due pixel del dispositivo per CSS o più, il browser caricherà l'immagine cute-cat-high1.jpg.

Pixel hardware e software

Il problema con questa soluzione è che le immagini sono reattive solo in termini di densità di pixel del dispositivo. Questo è il rapporto tra i pixel hardware e i pixel software o CSS. Un pixel hardware è il punto di luce effettivo sullo schermo mentre il pixel software o pixel CSS è un'unità di misura. La densità dei pixel determina la risoluzione del dispositivo.

Quando si esegue il rendering di immagini reattive, non considerare solo la risoluzione; anche la dimensione del display è importante. Altrimenti, potresti finire per caricare inutilmente immagini di grandi dimensioni o immagini troppo pixelate.

 src="cute-cat-low.jpg"
 alt="Un simpatico gatto">

Usando

è un elemento HTML che ne racchiude diversi elementi contenenti diversi file di origine e un elemento. Mentre rende le immagini reattive servendo dimensioni diverse della stessa immagine, consente di modificare effettivamente l'immagine visualizzata.

Sintassi:

Considera una situazione in cui hai un'immagine del paesaggio di grandi dimensioni. L'immagine viene visualizzata e sembra proporzionale su un desktop, ma si riduce notevolmente sui dispositivi mobili in modo tale che gli elementi dell'immagine diventino minuscoli. L'immagine non reattiva contribuisce a un'esperienza utente negativa. Insieme a puoi dire al tuo browser di passare a un'immagine verticale in primo piano quando sei sul cellulare.

Come nel primo approccio, contiene un attributo multimediale che puoi utilizzare per fornire la condizione del supporto. Ad esempio, il browser visualizzerà "cute-cat-480w.jpg" se la larghezza del viewport è 639px o meno. Il srcset contiene il percorso del file immagine che si desidera visualizzare e src specifica l'immagine predefinita.

Imparentato: 7 Nuove funzionalità CSS per creare un sito Web reattivo

Fallback per il formato immagine WebP

Un'altra cosa che gestisce bene sta fornendo un ripiego per i moderni formati di immagine come WebP. Le immagini WebP hanno prestazioni elevate, sono piccole e offrono un'esperienza web veloce. Puoi quindi decidere di utilizzarli sui tuoi siti. Una sfida che potresti incontrare è che non tutti i browser supportano le immagini WebP. Insieme a, non si verifica questo problema poiché il browser può caricare un'immagine alternativa se non supporta WebP.

Perché creare immagini reattive in HTML e non in CSS?

CSS offre solide opzioni per la gestione delle immagini reattive. Allora perché non usarlo? Il browser precarica le immagini prima di analizzare CSS. Quindi, prima che JavaScript del tuo sito rilevi la larghezza del viewport per apportare le modifiche appropriate alle immagini, le immagini originali sono già state precaricate. Per questo motivo, è meglio gestire le immagini reattive utilizzando HTML.

Puntare alla migliore qualità dell'immagine possibile

Hai visto come puoi creare immagini reattive in HTML usando > e in questo articolo. La pubblicazione di immagini reattive di solito implica la considerazione delle dimensioni dell'immagine e della risoluzione dell'immagine in relazione alle dimensioni del display. Se fatto in modo errato, la qualità dell'immagine può risentirne. Assicurati di scegliere un'immagine che offra un'usabilità ottimale utilizzando il minor numero di risorse.

Principi di progettazione web reattiva

I web designer sostengono da anni il responsive design, ma cos'è e come può produrre pagine web di qualità superiore?

Leggi Avanti

Circa l'autore