Informazioni sulla libreria Immagine reattiva about-responsive-image-library
La Libreria di immagini responsive è un modulo JavaScript che regola dinamicamente la qualità delle immagini fornite da Dynamic Medie e incorporate nelle pagine web responsive. Inoltre, offre una migliore qualità delle immagini su dispositivi con schermi ad alta densità. La libreria può anche eseguire il rendering responsive dei risultati da Ritaglio avanzato e Campione avanzato.
URL demo section-4f72c1dc38bf4e03acfa5205733a05a5
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 venga caricata e visualizzata la rappresentazione appropriata quando un’immagine viene ridimensionata a causa di modifiche nel layout della pagina web apportate da un utente che ridimensiona la finestra del browser o modifica l’orientamento del dispositivo. La libreria monitora continuamente le dimensioni delle immagini sullo schermo e ogni volta che viene raggiunta una nuova larghezza del punto di interruzione recupera una nuova rappresentazione dell’immagine da Dynamic Medie.
Di seguito è riportato un semplice esempio 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 scaricata e visualizzata una nuova rappresentazione. L'obiettivo è quello di evitare il caricamento di inutili immagini di grandi dimensioni e di risparmiare larghezza di banda.
Fai clic sull’URL per aprire la pagina web, ridimensionare la finestra del browser e monitorare il traffico di rete.
L’esempio di Bootstrap seguente illustra lo stesso caso d’uso in una pagina web. In base al CSS Bootstrap, la cella layout alla quale 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 Medie garantisce un utilizzo efficace della larghezza di banda del client. Inoltre, garantisce che l’immagine venga visualizzata nelle dimensioni esatte necessarie-dato il layout della pagina web corrente-senza artefatti visivi dovuti al ridimensionamento del browser lato client.
Fai clic sull’URL per aprire la pagina web, ridimensionare la finestra del browser per raggiungere diversi punti di interruzione del layout e monitorare il traffico di rete.
Casi d’uso più avanzati includono l’associazione di diversi predefiniti immagine o comandi Image Server, o entrambi, con valori di punto di interruzione diversi.
In questo esempio vengono utilizzati predefiniti immagine con qualità e formato diversi per punti di interruzione di dimensioni diverse. Per un piccolo punto di interruzione, viene applicato un predefinito di bassa qualità che forza Image Server a restituire l'immagine GIF compressa solo a sei colori. Un punto di interruzione medio utilizza un predefinito immagine configurato per JPEG con compressione elevata. Il punto di interruzione più grande è associato a un predefinito immagine di alta qualità utilizzando PNG senza perdita di dati. Questo metodo garantisce che immagini di alta qualità vengano distribuite a tali dispositivi, partendo dal presupposto che i dispositivi con schermi più grandi abbiano una maggiore larghezza di banda e una maggiore potenza di elaborazione.
Fai clic sull’URL per aprire la pagina web, ridimensionare la finestra del browser web dalle dimensioni maggiori a quelle più piccole e notare il deterioramento della qualità dell’immagine.
Oltre ai predefiniti per immagini, è possibile associare specifici comandi Image Server ai punti di interruzione. L'esempio seguente mostra come è possibile ritagliare gradualmente l'immagine del banner nell'area di interesse man mano che le dimensioni dell'immagine sullo schermo si riducono. In questo caso, il punto di interruzione più grande non dispone di alcun comando Image Server, pertanto l'immagine del banner è completamente visibile. Al punto di interruzione medio applica un ritaglio moderato, rendendo visibile solo l’esecutore con il testo "In esecuzione". In un punto di interruzione di piccole dimensioni, viene applicato un numero maggiore di ritagli in modo da visualizzare solo il prodotto.
Fare clic sull'URL per aprire la pagina Web e ridimensionare la finestra del browser. Osserva come l’immagine viene ritagliata gradualmente quando passi da una dimensione più grande a una più piccola.
Requisiti di sistema section-35ea9e9c79cc43d7bcefdc240340fba4
Hardware e software per server
- Dynamic Medie Image Server 6.0.1 o versione successiva.
Requisiti minimi del browser client
- Microsoft® Windows® 7 o versione successiva; macOS 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 versione successiva e iPad2 o versione successiva (solo browser nativi).
- Android™ OS 2.3 o versione successiva.
- Internet Explorer su dispositivi mobili non è attualmente supportato.