Informazioni sulla libreria di immagini reattive

1

https://experienceleague.adobe.com/tools/dynamic-media-demo/is-api/responsive-static-image-simple.html?lang=it?lang=it

Di seguito è riportato un esempio semplice in cui l’immagine reattiva si trova all’interno di un contenitore che occupa il 50% della larghezza della pagina web. Ogni volta che la finestra del browser viene ridimensionata, la larghezza del contenitore cambia. Quando la larghezza dell’immagine raggiunge uno dei punti di interruzione configurati, impostati a 200, 400, 600 e 800 pixel a scopo illustrativo, viene scaricato e visualizzato un nuovo rendering. L'obiettivo è quello di evitare il caricamento di immagini di grandi dimensioni non necessarie e di risparmiare la larghezza di banda della rete.

Fai clic sull’URL per aprire la pagina web, ridimensionare la finestra del browser e monitorare il traffico di rete.

2

https://experienceleague.adobe.com/tools/dynamic-media-demo/is-api/responsive-static-image-bootstrap.html?lang=it?lang=it

L’esempio di Bootstrap seguente illustra lo stesso caso d’uso in una pagina web. In base a Bootstrap CSS, la cella di layout a cui viene aggiunta l’immagine reattiva può avere una delle seguenti larghezze: 360, 720 e 940 pixel. Questi valori sono esattamente ciò che viene passato come punti di interruzione alla libreria di immagini reattive. Dynamic Media garantisce l'utilizzo efficiente della larghezza di banda di rete del cliente. Inoltre, assicura che l'immagine venga visualizzata nelle dimensioni richieste, dato il layout della pagina web corrente, senza artefatti visivi derivanti dal ridimensionamento del browser lato client.

Fai clic sull’URL per aprire la pagina web, ridimensionare la finestra del browser in modo da raggiungere diversi punti di interruzione del layout e monitorare il traffico di rete.

I casi d’uso più avanzati includono l’associazione di diversi predefiniti immagine, comandi Image Server o entrambi con valori di punti di interruzione diversi.

3

https://experienceleague.adobe.com/tools/dynamic-media-demo/is-api/image-presets.html?lang=it?lang=it

In questo esempio vengono utilizzati predefiniti per immagini di diversa qualità e formato per diverse dimensioni dei punti di interruzione. Per un piccolo punto di interruzione, viene applicato un predefinito di bassa qualità che forza Image Serving a restituire l'immagine GIF compressa solo a sei colori. Un punto di interruzione medio utilizza un predefinito per immagini configurato per JPEG con compressione elevata. Il punto di interruzione più grande è associato a un predefinito per immagini di alta qualità che utilizza PNG senza perdita di dati. Questo metodo garantisce la trasmissione di immagini di alta qualità a tali dispositivi, partendo dal presupposto che i dispositivi con schermi più grandi abbiano una larghezza di banda e una potenza di elaborazione maggiori.

Fai clic sull’URL per aprire la pagina web, ridimensionare la finestra del browser Web da più grande a più piccola e notare il degrado della qualità dell’immagine.

4

https://experienceleague.adobe.com/tools/dynamic-media-demo/is-api/crops.html?lang=it?lang=it

Oltre ai predefiniti per immagini, è possibile associare comandi Image Serving specifici a punti di interruzione. L’esempio seguente mostra come è possibile ritagliare gradualmente l’immagine del banner nell’area di interesse quando le dimensioni dell’immagine sullo schermo diventano più piccole. In questo caso, il punto di interruzione più grande non dispone di alcun comando Image Serving, quindi l’immagine del banner è completamente visibile. Al punto di interruzione medio si applica un ritaglio moderato, rendendo visibile solo il corridore con testo "In esecuzione". Al punto di interruzione piccolo viene applicato un maggior numero di ritaglio in modo che venga mostrato solo il prodotto.

Fai clic sull’URL per aprire la pagina web e ridimensionare la finestra del browser. Osserva come l’immagine si ritaglia gradualmente passando da una dimensione più grande a una più piccola.

5

https://experienceleague.adobe.com/tools/dynamic-media-demo/is-api/template.html?lang=it?lang=it

È inoltre possibile utilizzare i comandi Image Serving con Image Serving Templates per controllare alcuni parametri del modello in base alle dimensioni dell'immagine. In questo esempio successivo, viene utilizzato un modello Image Serving in cui la dimensione del font della sovrapposizione di testo è parametrizzata utilizzando il parametro $fontsize . L’immagine reattiva è configurata per utilizzare un font di dimensioni maggiori per immagini di dimensioni più piccole, in modo che il testo rimanga sempre leggibile: