Die interaktive Bildbibliothek ist ein JavaScript-Modul, mit dem die Qualität der von Dynamic Media bereitgestellten und in responsive Webseiten eingebetteten Bilder dynamisch angepasst wird. Darüber hinaus bietet es eine verbesserte Bildqualität auf Geräten mit hochauflösenden Bildschirmen. Die Bibliothek kann auch Ergebnisse aus Smart-Zuschneiden und Smart-Muster responsiv rendern.
Der einfachste Anwendungsfall der Bibliothek für interaktives Bild besteht darin, eine Liste von Haltepunktwerten für die Bildbreite zu definieren. Diese Liste stellt sicher, dass die entsprechende Darstellung geladen und angezeigt wird, wenn die Größe eines Bildes geändert wird, da sich das Layout einer Webseite ändert, indem der Benutzer die Größe des Browserfensters ändert oder die Ausrichtung des Geräts ändert. Die Bibliothek überwacht kontinuierlich die Bildgröße auf dem Bildschirm und holt jedes Mal, wenn eine neue Haltepunktbreite erreicht wird, eine neue Bilddarstellung von Dynamic Media ab.
Demo-URL |
Beschreibung |
|
---|---|---|
1 |
|
Im Folgenden wird ein einfaches Beispiel dargestellt, bei dem sich das interaktive Bild in einem Container befindet, der 50 % der Webseitenbreite beträgt. Jedes Mal, wenn die Größe des Browserfensters geändert wird, ändert sich die Breite des Containers. Wenn die Bildbreite einen der konfigurierten Haltepunkte erreicht, die zu Veranschaulichungszwecken auf 200, 400, 600 und 800 Pixel eingestellt sind, wird eine neue Darstellung heruntergeladen und angezeigt. Das Ziel ist es, unnötige große Bilder zu vermeiden und Netzwerkbandbreite zu sparen. Klicken Sie auf die URL, um die Webseite zu öffnen, die Größe des Browser-Fensters zu ändern und den Netzwerkverkehr zu überwachen. |
2 |
|
Im folgenden Bootstrap wird der gleiche Verwendungsfall auf einer Webseite veranschaulicht. Gemäß Bootstrap-CSS kann die Layoutzelle, der das interaktive Bild hinzugefügt wird, eine der folgenden Breiten annehmen: 360, 720 und 940 Pixel. Dies sind die genauen Werte, die als Haltepunkte an die Bibliothek für interaktives Bild übergeben werden. Dynamic Media stellt daher sicher, dass die Netzwerkbandbreite des Clients effektiv genutzt wird. Darüber hinaus wird sichergestellt, dass das Bild in der exakten Größe angezeigt wird, die angesichts des aktuellen Webseitenlayouts erforderlich ist, ohne dass visuelle Artefakte durch Skalieren des clientseitigen Browsers entstehen. Klicken Sie auf die URL, um die Webseite zu öffnen, die Größe des Browser-Fensters zu ändern, um auf unterschiedliche LayoutHaltepunkte zuzugreifen und den Netzwerkverkehr zu überwachen. Zu den erweiterten Verwendungsbeispielen zählen die Zuweisung verschiedener Bildvorgaben oder Bildserstellungs-Befehle oder beides mit unterschiedlichen Haltepunktwerten. |
3 |
https://marketing.adobe.com/resources/help/en_US/s7/is_ir_api/is_api/samples/image-presets.html
|
In diesem nächsten Beispiel werden Bildvorgaben unterschiedlicher Bildqualität und -formate für unterschiedliche Haltepunktgrößen verwendet. Bei einem kleinen Haltepunkt wird eine Vorgabe mit niedriger Qualität angewendet, die Image Serving zwingt, das GIF-Bild, das auf nur sechs Farben komprimiert wurde, zurückzugeben. Ein mittlerer Haltepunkt verwendet eine Bildvorgabe, die für JPEG mit hoher Komprimierung konfiguriert ist. Der größte Haltepunkt wird mit einer hochwertigen Bildvorgabe unter Verwendung verlustfreier PNG-Datei verknüpft. Diese Methode stellt sicher, dass Bilder mit hoher Qualität an solche Geräte gesendet werden, wobei davon ausgegangen wird, dass Geräte mit größeren Bildschirmen eine größere Bandbreite und Verarbeitungsleistung haben. Klicken Sie auf die URL, um die Webseite zu öffnen, die Größe des Webbrowserfensters von größer zu kleiner zu ändern und zu erkennen, wie die Bildqualität abnimmt. |
4 |
https://marketing.adobe.com/resources/help/en_US/s7/is_ir_api/is_api/samples/crops.html
|
Zusätzlich zu Bildvorgaben ist es möglich, bestimmte Image Serving-Befehle mit Haltepunkten zu verknüpfen. Das folgende Beispiel zeigt, wie das Bannerbild schrittweise in den Interessensbereich beschnitten werden kann, wenn die Bildschirmgröße kleiner wird. Hier verfügt der größte Haltepunkt über keine Image Serving-Befehle, sodass das Bannerbild vollständig sichtbar ist. Beim mittleren Haltepunkt wird moderater Zuschnitt angewendet, sodass nur der Läufer mit dem Text "Läuft"sichtbar ist. An einem kleinen Haltepunkt werden mehr Zuschnitte angewendet, sodass nur das Produkt angezeigt wird. Klicken Sie auf die URL, um die Webseite zu öffnen und die Größe des Browserfensters zu ändern. Beachten Sie, wie das Bild allmählich abgeschnitten wird, wenn Sie von einer größeren zu einer kleineren Größe wechseln. |
5 |
https://marketing.adobe.com/resources/help/en_US/s7/is_ir_api/is_api/samples/template.html
|
Sie können auch Bildservierungsbefehle mit Image Serving-Vorlagen verwenden, um bestimmte Vorlagenparameter basierend auf der Bildgröße zu steuern. In diesem nächsten Beispiel wird eine Image Serving-Vorlage verwendet, bei der die Schriftgröße der Textüberlagerung mit dem Parameter $fontsize parametrisiert wird. Das interaktive Bild ist so konfiguriert, dass es eine größere Schriftgröße für kleinere Bildgrößen verwendet, um sicherzustellen, dass Text immer lesbar bleibt: |
Serverhardware und -software
Mindestanforderungen an den Client-Browser