Informazioni sulla libreria di immagini reattive

La libreria di immagini reattive è un modulo JavaScript che regola dinamicamente la qualità delle immagini servite da Dynamic Media e incorporate in pagine web reattive. Inoltre, offre una migliore qualità delle immagini sui dispositivi con schermi ad alta densità. La libreria può anche eseguire il rendering dinamico dei risultati da Smart Crop e Smart Swatch.

URL demo

Il caso d’uso più semplice della libreria di immagini reattive è quello di definire un elenco di valori dei punti di interruzione per la larghezza dell’immagine. Questo elenco assicura che il rendering appropriato venga caricato e visualizzato quando un'immagine viene ridimensionata a causa di modifiche nel layout di una pagina web derivanti dal ridimensionamento della finestra del browser da parte dell'utente o dalla modifica dell'orientamento del dispositivo. La libreria controlla continuamente le dimensioni dell'immagine sullo schermo e ogni volta che viene raggiunta una nuova larghezza del punto di interruzione recupera una nuova rappresentazione dell'immagine da Dynamic Media.

URL demo

Descrizione

1

https://marketing.adobe.com/resources/help/en_US/s7/is_ir_api/is_api/samples/responsive-static-image-simple.html

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://marketing.adobe.com/resources/help/en_US/s7/is_ir_api/is_api/samples/responsive-static-image-bootstrap.html

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 sono i valori esatti che vengono passati 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, ridimensiona la finestra del browser in modo da raggiungere diversi punti di interruzione del layout e monitora 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://marketing.adobe.com/resources/help/en_US/s7/is_ir_api/is_api/samples/image-presets.html

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, ridimensiona la finestra del browser Web da più grande a più piccola e osserva come la qualità dell’immagine si riduce.

4

https://marketing.adobe.com/resources/help/en_US/s7/is_ir_api/is_api/samples/crops.html

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://marketing.adobe.com/resources/help/en_US/s7/is_ir_api/is_api/samples/template.html

È 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:

Requisiti di sistema

Hardware e software del server

  • Dynamic Media Image Serving 6.0.1 o versione successiva.

Requisiti minimi del browser client

  • Microsoft® Windows® 7 o versione successiva; Mac OS X 10.8 o versione successiva.
  • Firefox 23, Safari 6, Chrome 29, IE 9 o versione successiva.
  • iOS 6 o versione successiva
  • Certificato su iPhone3GS o versioni successive e iPad2 o versioni successive (solo browser nativi).
  • Sistema operativo Android 2.3 o successivo.
  • Internet Explorer su dispositivi mobili non è attualmente supportato.

In questa pagina

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now