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: