À propos de la bibliothèque d’images réactives
Créé pour :
- Développeur
- Utilisateur ou utilisatrice
La bibliothèque d’images réactives est un module JavaScript qui ajuste dynamiquement la qualité des images diffusées à partir de Dynamic Media et incorporées dans des pages web réactives. En outre, il offre une qualité d’image améliorée sur les périphériques dotés d’écrans haute densité. La bibliothèque peut également générer de manière réactive les résultats à partir du recadrage intelligent et de l’échantillon intelligent.
URL de démonstration
Le cas d’utilisation le plus simple de la bibliothèque d’images réactives consiste à définir une liste de valeurs de point d’arrêt pour la largeur de l’image. Cette liste permet de s’assurer que le rendu approprié est chargé et affiché lorsqu’une image est redimensionnée en raison de la mise en page d’une page web qui change à partir du redimensionnement de la fenêtre du navigateur par un utilisateur ou de la modification de l’orientation de l’appareil. La bibliothèque surveille en permanence la taille de l’image à l’écran et, chaque fois qu’une nouvelle largeur de point d’arrêt est atteinte, elle récupère un nouveau rendu d’image à partir de Dynamic Media.
| URL de démonstration | Description | |
|---|---|---|
| 1 |
Voici un exemple simple où l’image réactive se trouve dans un conteneur qui prend 50 % de la largeur de la page web. Chaque fois que la fenêtre du navigateur est redimensionnée, la largeur du conteneur change. Lorsque la largeur de l’image atteint l’un des points d’arrêt configurés (définis à 200, 400, 600 et 800 pixels à des fins d’illustration), un nouveau rendu est téléchargé et affiché. L’objectif est d’éviter de charger des images volumineuses superflues et d’économiser la bande passante du réseau. Cliquez sur l’URL pour ouvrir la page web, redimensionner la fenêtre du navigateur et contrôler le trafic réseau. | |
| 2 |
L’exemple de Bootstrap suivant illustre le même cas d’utilisation dans une page web. Selon Bootstrap CSS, la cellule de disposition à laquelle l’image réactive est ajoutée peut avoir l’une des largeurs suivantes : 360, 720 et 940 pixels. Ces valeurs sont exactement ce qui est transmis en tant que points d’arrêt à la bibliothèque d’images réactives. Ainsi, Dynamic Media s’assure que la bande passante réseau du client est utilisée efficacement. De plus, il garantit également que l’image est affichée à la taille exacte requise, compte tenu de la mise en page web actuelle, sans artefacts visuels lors de la mise à l’échelle du navigateur côté client. Cliquez sur l’URL pour ouvrir la page web, redimensionnez la fenêtre du navigateur afin d’atteindre différents points d’arrêt de mise en page et surveiller le trafic réseau. Les cas d’utilisation plus avancés incluent l’association de différents paramètres d’image prédéfinis ou commandes de diffusion d’images, ou les deux, à des valeurs de point d’arrêt différentes. | |
| 3 |
https://experienceleague.adobe.com/tools/dynamic-media-demo/is-api/image-presets.html?lang=fr |
Dans l’exemple suivant, des paramètres d’image prédéfinis de qualité et de format d’image différents pour différentes tailles de points d’arrêt sont utilisés. Pour un petit point d’arrêt, un paramètre prédéfini de faible qualité est appliqué, ce qui force le serveur d’images à renvoyer l’image de GIF compressée à six couleurs uniquement. Un point d’arrêt moyen utilise un paramètre d’image prédéfini configuré pour JPEG avec une compression élevée. Le point d’arrêt le plus grand est associé à un paramètre d’image prédéfini de haute qualité à l’aide d’un fichier PNG sans perte. Cette méthode garantit que les images de haute qualité sont diffusées vers ces appareils, en partant du principe que les appareils dotés d’écrans plus grands disposent d’une bande passante et d’une puissance de traitement plus importantes. Cliquez sur l’URL pour ouvrir la page web, redimensionnez la fenêtre du navigateur web de la plus grande à la plus petite, et notez la dégradation de la qualité de l’image. |
| 4 |
https://experienceleague.adobe.com/tools/dynamic-media-demo/is-api/crops.html?lang=fr |
Outre les paramètres d’image prédéfinis, il est possible d’associer des commandes de diffusion d’images spécifiques à des points d’arrêt. L’exemple suivant montre comment recadrer progressivement l’image de bannière dans la région concernée lorsque la taille de l’image à l’écran devient plus petite. Ici, le point d’arrêt le plus grand ne comporte aucune commande de diffusion d’images. L’image de bannière est donc entièrement visible. Au point d’arrêt moyen, le recadrage est modéré, ce qui rend visible uniquement le coureur avec le texte "En cours d’exécution". Plus de recadrage est appliqué au petit point d’arrêt, de sorte que seul le produit s’affiche. Cliquez sur l’URL pour ouvrir la page web et redimensionner la fenêtre de votre navigateur. Remarquez comment l’image se recadre progressivement lorsque vous passez d’une taille plus grande à une taille plus petite. |
| 5 |
https://experienceleague.adobe.com/tools/dynamic-media-demo/is-api/template.html?lang=fr | Vous pouvez également utiliser des commandes de diffusion d’images avec des modèles de diffusion d’images pour contrôler certains paramètres de modèle en fonction de la taille de l’image. Dans cet exemple suivant, un modèle de serveur d’images est utilisé, où la taille de police de la superposition de texte est paramétrée à l’aide du paramètre $fontsize . L’image réactive est configurée de manière à utiliser une taille de police plus grande pour les images plus petites afin de s’assurer que le texte reste toujours lisible : |
Configuration système requise
Matériel et logiciel du serveur
- Dynamic Media Image Serving 6.0.1 ou version ultérieure.
Configuration requise minimale du navigateur client
- Microsoft® Windows® 7 ou version ultérieure ; macOS X 10.8 ou version ultérieure.
- Firefox 23, Safari 6, Chrome 29, IE 9 ou version ultérieure.
- iOS 6 ou version ultérieure.
- Certifié sur iPhone3GS ou version ultérieure et iPad2 ou version ultérieure (navigateurs natifs uniquement).
- Android™ OS 2.3 ou version ultérieure.
- Internet Explorer sur les appareils mobiles n’est actuellement pas pris en charge.