Un'immagine reattiva è un'immagine che si adatta alle diverse caratteristiche del dispositivo che la visualizza. Se eseguite correttamente, le immagini reattive possono migliorare le prestazioni del sito Web e differenziare la tua esperienza utente.
Questo articolo spiega come creare immagini HTML reattive utilizzando srcset ed elemento Immagine. Verificare Code on the Go: le migliori app di modifica HTML per Android.
Link veloci
Perché dovresti usare immagini reattive?
Quando un ingegnere del software creava pagine Web, non pensava a come i browser gestiscono le immagini reattive. Dopotutto, gli utenti spesso accedevano al Web solo da computer desktop o laptop. Naturalmente, questo non è vero oggi.
ا لـ S Oltre il 90 per cento degli utenti di Internet nel mondo naviga sul Web utilizzando i propri telefoni cellulari. La maggior parte delle pagine web contiene immagini e queste immagini sono una delle metriche utilizzate per misurare le prestazioni web. Per migliorare le prestazioni, devi migliorare le tue immagini rendendole reattive. Verificare I migliori strumenti di sviluppo Web popolari utilizzati da tutti i professionisti.
Come creare immagini HTML reattive
Il responsive web design significa non solo che i layout possono cambiare in base agli attributi del dispositivo in uso, ma anche al contenuto. Ad esempio, sui monitor ad alta risoluzione (2x), è necessaria anche una grafica ad alta risoluzione per garantire il livello di nitidezza. Un'immagine con un valore di larghezza del 50% può funzionare bene solo quando il browser è largo 800px, ma avrà un grande impatto su un telefono stretto e il problema del consumo di larghezza di banda elevata persisterà anche quando le dimensioni vengono ridotte per adattarsi a piccole dimensioni schermi.
Caratteristiche dell'oggetto img di grande importanza; Poiché aiuta a scaricare, decodificare e visualizzare i contenuti, i browser moderni sono compatibili con numerosi formati di immagine diversi. L'incorporamento di immagini che funzionano su tutti i dispositivi non è lo stesso del desktop e sono necessarie solo alcune piccole modifiche per fare una buona impressione.
Puoi lavorare con immagini reattive da due angolazioni: presentando la stessa immagine con dimensioni diverse o presentando immagini diverse in base alle caratteristiche di visualizzazione. Puoi usare o . Queste due opzioni gestiscono le immagini reattive in modo diverso, ma visualizzano tutte un'immagine da determinate alternative a seconda dell'insieme di regole.
usa srcset
La funzione ti consente di farlo HTML standard specificando un solo file immagine. Se si desidera visualizzare un'immagine diversa a seconda delle dimensioni del dispositivo, è necessario utilizzare srcset.
sintassi:
La funzione ti consente di farlo srcset Fornendo file di origine aggiuntivi, il browser sceglierà l'immagine che sembra ottimale per le dimensioni dello schermo utilizzate.
Costituita srcset Ha tre parti: il nome del file immagine che specifica il percorso dell'immagine di origine, l'area e la larghezza intrinseca o reale dell'immagine.
Usa srcset con le dimensioni
Il problema sta nell'uso di srcset In quanto non puoi controllare quale immagine il browser sceglie di visualizzare. La combinazione di srcset e dimensioni risolve questo problema. Le dimensioni sono definite da una serie di termini multimediali che indicano che un'immagine è la dimensione ottimale.
Ora puoi ridigitare il tag sopra come segue.
Le dimensioni consistono in uno stato del supporto, in questo esempio (larghezza massima: 600px) che rappresenta la larghezza della porta, l'area e la larghezza dello slot (480px) specificando quanto spazio occuperà l'immagine se lo stato del supporto è vero.
Qui, il browser verificherà prima il rendering del dispositivo e lo confronterà con lo stato del supporto. Se la condizione è vera, controllerà la larghezza dell'apertura e caricherà un'immagine di srcset Stessa larghezza o l'immagine successiva più grande.
Nota che stai anche includendo src Che fornisce l'immagine per riferimento ai browser che non supportano srcset e dimensioni.
ti permetto srcset Presenta anche immagini in diverse risoluzioni utilizzando descrittori x.
In questo esempio, se il dispositivo ha una risoluzione di 1 pixel per CSS o più, il browser caricherà l'immagine cute-cat-highXNUMX.jpg.
L'attributo srcset migliora il comportamento dell'elemento img, rendendo più semplice fornire più file immagine per diverse caratteristiche hardware. Come in image-set , la funzione CSS originale, srcset Il browser ha il diritto di scegliere l'immagine migliore in base alle caratteristiche del dispositivo, ad esempio utilizzando un'immagine 2x su uno schermo 2x e, eventualmente, in futuro, un'immagine 1x su un dispositivo 2x quando si utilizza una rete a larghezza di banda limitata.
Pixel hardware e software
Il problema con questa soluzione è che le immagini rispondono solo in termini di densità di pixel del dispositivo. Questo è il rapporto tra pixel hardware e pixel software o CSS. Un pixel hardware è il punto di luce effettivo sullo schermo mentre un 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 le dimensioni dello schermo contano. Altrimenti, potresti finire per caricare inutilmente immagini di grandi dimensioni o immagini estremamente pixelate.
Utilizzo
Attributo È un elemento HTML che racchiude molti elementi che contiene vari file sorgente e un elemento . mentre si fa Le immagini rispondono offrendo dimensioni diverse della stessa immagine, permettendoti di farlo effettivamente modificare l'immagine visualizzata.
sintassi:
Considera una situazione in cui hai una foto di paesaggi di grandi dimensioni. L'immagine viene visualizzata e sembra proporzionale sul desktop, ma si riduce così tanto sui dispositivi mobili che gli elementi nell'immagine diventano piccoli. Un'immagine che non risponde contribuisce a un'esperienza utente negativa. utilizzando l'attributo , puoi dire al tuo browser di passare a un primo piano quando utilizzi un telefono cellulare.
Come nel primo metodo, l'attributo contiene un attributo multimediale che puoi utilizzare per fornire lo stato del supporto. Ad esempio, il browser visualizzerà "cute-cat-480w.jpg" se il viewport è di 639 pixel o meno. conserva l'attributo srcset Viene specificato il percorso del file immagine che si desidera visualizzare src immagine predefinita.
Torna a WebP. Formato immagine
L'altra cosa di cui ti occupi è una caratteristica Una buona cosa è fornire un backup in formati di immagine moderni come WebP. Le immagini WebP hanno prestazioni elevate, sono spesso di piccole dimensioni e offrono un'esperienza Web veloce. Quindi puoi decidere di usarli sui tuoi siti web. La sfida che potresti dover affrontare è che non tutti i browser supportano le immagini WebP. con tema Non riscontrerai questo problema poiché il tuo browser può caricare un'immagine alternativa se non supporta WebP.
Perché dovresti creare immagini crestate in HTML e non in CSS?
CSS offre potenti opzioni per la gestione delle immagini reattive. Perché non lo usi allora? Il browser web precarica le immagini prima di analizzare il CSS. Quindi, prima che javascript del tuo sito rilevi il viewport per apportare le modifiche appropriate alle immagini, le immagini originali verranno precaricate. Per questo motivo, è meglio lavorare con immagini responsive con HTML.
Puntare alla migliore qualità dell'immagine possibile
Hai visto come creare immagini HTML reattive con un attributo و In questo articolo. La fornitura di immagini reattive di solito implica la considerazione delle dimensioni e della risoluzione dell'immagine in relazione alle dimensioni dello schermo. Se eseguita in modo errato, la qualità dell'immagine può risentirne. Assicurati di scegliere un'immagine che sfrutti al meglio l'utilizzo del minor numero di risorse. Verificare Come aprire e convertire immagini HEIC su Android.
