Durante la distribuzione di un sito Web, gli sviluppatori di solito utilizzano la stessa immagine per tutte le dimensioni dello schermo, il che non è una buona pratica poiché non è possibile fare affidamento sul browser per il ridimensionamento. In tale situazione, le immagini reattive entrano in azione garantendo che l'immagine venga scaricata con dimensioni e qualità adeguate per il dispositivo corrispondente, migliorando così la velocità di caricamento della pagina.
Come migliorare la velocità di caricamento della pagina utilizzando immagini reattive?
Per migliorare la velocità di caricamento della pagina tramite immagini reattive, considera le seguenti metodologie:
Esempio 1: migliorare la velocità di caricamento della pagina tramite immagini reattive utilizzando l'attributo 'srcset'.
L'approccio più conveniente per applicare immagini reattive può essere quello di utilizzare il comando ' srcset ' attributo accumulato nel '
DOCTYPEhtml >
< html >
< Testa >
< meta set di caratteri = 'utf-8' >
< meta nome = 'vista' contenuto = 'larghezza=larghezza-dispositivo, scala-iniziale=1' >
< titolo > titolo >
Testa >
< corpo >
< imm src = 'F:\ARTICOLI TECNICI LAVORO\imgre.png' qualunque cosa = 'Immagine reattiva'
srcset = 'F:\LAVORO ARTICOLI TECNICI\imgre.png 400w, F:\LAVORO ARTICOLI TECNICI\imgre.png 800w, F:\LAVORO ARTICOLI TECNICI\imgre.png 1200w'
/>
corpo >
html >
In questo codice:
- IL ' srcset ' è incluso l'attributo che comprende il percorso dell'immagine e larghezze diverse ogni volta.
- È tale che l’immagine “ F:\ARTICOLI TECNICI LAVORO\imgre.png 400w ' rappresenta un percorso immagine avente una larghezza di ' 400 'pixel.
- Sulla base di queste informazioni, il browser analizza l'immagine più adatta da scaricare in base alle dimensioni dello schermo dell'utente, in modo che gli schermi più piccoli visualizzino immagini più piccole, risparmiando così la larghezza di banda.
Produzione
Esempio 2: migliorare la velocità di caricamento della pagina tramite immagini reattive specificando diverse densità di pixel
In questo esempio, il percorso dell'immagine verrà specificato insieme a diverse densità di pixel per i display ad alta risoluzione. Ciò può essere ottenuto tramite il “ srcset ', illustrato di seguito:
DOCTYPEhtml >< html >
< Testa >
< meta set di caratteri = 'utf-8' >
< meta nome = 'vista' contenuto = 'larghezza=larghezza-dispositivo, scala-iniziale=1' >
< titolo > titolo >
Testa >
< corpo >
< imm src = 'F:\ARTICOLI TECNICI LAVORO\imgre.png' qualunque cosa = 'Immagine reattiva' srcset = 'F:\LAVORO ARTICOLI TECNICI\imgre.png 1x, F:\LAVORO ARTICOLI TECNICI\imgre.png 1.5x, F:\LAVORO ARTICOLI TECNICI\imgre.png 2x'
/>
corpo >
html >
In questo frammento di codice, specifica tre volte il percorso dell'immagine con densità di pixel variabili. È tale che il browser sceglie l'immagine più appropriata/adatta per garantire la massima qualità su vari schermi.
Nota: IL ' 1x 'pixel è il valore predefinito, quindi spetta all'utente associarlo o meno al percorso dell'immagine.
Produzione
Esempio 3: migliorare la velocità di caricamento della pagina tramite immagini reattive utilizzando l'attributo 'dimensioni'.
In alcune situazioni, può esserci una limitazione in cui la dimensione effettiva dell'immagine sullo schermo varia dalla larghezza dello schermo. Per affrontare questo problema, il “ dimensioni L'attributo ' può essere utilizzato per includere la dimensione dell'immagine rispetto alle query multimediali o una dimensione fissa. Di seguito è riportata la dimostrazione del codice:
DOCTYPEhtml >< html >
< Testa >
< meta set di caratteri = 'utf-8' >
< meta nome = 'vista' contenuto = 'larghezza=larghezza-dispositivo, scala-iniziale=1' >
< titolo > titolo >
Testa >
< corpo >
< imm src = 'F:\ARTICOLI TECNICI LAVORO\imgre.png' qualunque cosa = 'Immagine reattiva' srcset = 'F:\LAVORO ARTICOLI TECNICI\imgre.png 50w, F:\LAVORO ARTICOLI TECNICI\imgre.png 800w, F:\LAVORO ARTICOLI TECNICI\imgre.png 1200w'
dimensioni = '(larghezza massima: 800px) 100vw, 800px'
/>
corpo >
html >
In questo blocco di codice, il ' dimensioni L'attributo 'integra le query multimediali e le dimensioni. È tale da guidare il browser a optare per la dimensione dell’immagine rispetto alla larghezza dello schermo dell’utente. Ciò garantisce che le immagini non superino la larghezza massima target.
Produzione
Considerazioni importanti durante l'utilizzo dell'attributo 'sizes'.
Ci sono alcune limitazioni nell'uso del ' dimensioni ” come elencato di seguito:
- Quando si utilizzano più query multimediali nella sezione ' dimensioni ', assicurati che sia selezionata la prima vera query multimediale. Inoltre, assicurati che le query multimediali siano ordinate dalla più specifica alla meno specifica.
- L'attributo 'dimensioni' non supporta le dimensioni percentuali poiché il browser non è a conoscenza di quanto sarà largo qualcosa specificato in percentuale finché non è a conoscenza della larghezza dell'elemento genitore.
Esempio 4: migliorare la velocità di caricamento della pagina tramite immagini reattive utilizzando l'elemento '
IL '
< html >
< Testa >
< meta set di caratteri = 'utf-8' >
< meta nome = 'vista' contenuto = 'larghezza=larghezza-dispositivo, scala-iniziale=1' >
< titolo > titolo >
Testa >
< corpo >
< immagine >
< fonte media = '(larghezza massima: 100px)' srcset = 'F:\ARTICOLI TECNICI LAVORO\imgbanner.png' />
< img src = 'F:\ARTICOLI TECNICI LAVORO\imgre.png' qualunque cosa = 'Immagine reattiva' />
immagine >
corpo >
html >
Secondo queste righe di codice:
- Specificare la '
'elemento che accumula il ' ' elementi per immagini diverse e lasciare che il browser scelga quello appropriato in base alle dimensioni dello schermo dell'utente. - Inoltre, se nessuno dei “
' gli elementi sono adatti alle dimensioni dello schermo, l'immagine specificata nel ' ' Il tag funge da fallback. - Ciò aggiunge di conseguenza un'immagine alternativa in un caso imprevisto, mantenendo così la velocità di caricamento della pagina migliorata.
Produzione
Conclusione
La velocità di caricamento della pagina può essere migliorata tramite immagini reattive utilizzando il comando ' srcset ', specificando diverse densità di pixel, utilizzando l'attributo ' dimensioni ', o tramite l'attributo '