Info zur Bibliothek für interaktives Bild

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.

Demo-URLs

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

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

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

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

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:

Systemanforderungen

Serverhardware und -software

  • Dynamic Media Image Serving 6.0.1 oder höher.

Mindestanforderungen an den Client-Browser

  • Microsoft® Windows® 7 oder höher; Mac OS X 10.8 oder höher.
  • Firefox 23, Safari 6, Chrome 29, IE 9 oder höher.
  • iOS 6 oder höher.
  • Zertifiziert für iPhone3GS oder höher und iPad2 oder höher (nur native Browser).
  • Android OS 2.3 oder höher.
  • Internet Explorer auf Mobilgeräten wird derzeit nicht unterstützt.

Auf dieser Seite

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