Über die Bibliothek responsiver Bilder

1

https://experienceleague.adobe.com/tools/dynamic-media-demo/is-api/responsive-static-image-simple.html?lang=de?lang=de

Im Folgenden finden Sie ein einfaches Beispiel, bei dem sich das responsive Bild in einem Container befindet, der 50 % der Webseitenbreite annimmt. Jedes Mal, wenn die Größe des Browser-Fensters geändert wird, ändert sich die Behälterbreite. Wenn die Bildbreite einen der konfigurierten Haltepunkte erreicht, der für Veranschaulichungszwecke auf 200, 400, 600 und 800 Pixel festgelegt ist, wird eine neue Ausgabedarstellung heruntergeladen und angezeigt. Das Ziel besteht darin, das Laden unnötiger großer 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 Netzwerk-Traffic zu überwachen.

2

https://experienceleague.adobe.com/tools/dynamic-media-demo/is-api/responsive-static-image-bootstrap.html?lang=de?lang=de

Das folgende Bootstrap-Beispiel zeigt den gleichen Anwendungsfall auf einer Webseite. Gemäß Bootstrap-CSS kann die Layoutzelle, der das responsive Bild hinzugefügt wird, eine der folgenden Breiten annehmen: 360, 720 und 940 Pixel. Diese Werte werden genau als Haltepunkte an die responsive Bildbibliothek übergeben. Daher stellt Dynamic Media sicher, dass die Netzwerkbandbreite des Clients effektiv verwendet wird. Außerdem wird sichergestellt, dass das Bild in der genauen Größe angezeigt wird, die für das aktuelle Web-Seiten-Layout erforderlich ist, ohne dass visuelle Artefakte die clientseitige Browserskalierung erfordern.

Klicken Sie auf die URL, damit Sie die Webseite öffnen, die Größe des Browser-Fensters ändern, um unterschiedliche Layout-Haltepunkte zu erreichen, und überwachen Sie den Netzwerk-Traffic.

Erweiterte Anwendungsfälle umfassen die Zuordnung verschiedener Bildvorgaben, Image Serving-Befehle oder beides mit unterschiedlichen Breakpoint-Werten.

3

https://experienceleague.adobe.com/tools/dynamic-media-demo/is-api/image-presets.html?lang=de?lang=de

In diesem nächsten Beispiel werden Bildvorgaben unterschiedlicher Bildqualität und -format für unterschiedliche Breakpoint-Größen verwendet. Bei einem kleinen Breakpoint wird eine Vorgabe mit niedriger Qualität angewendet, die das Image Serving zwingt, das auf sechs Farben komprimierte GIF-Bild zurückzugeben. Ein mittlerer Breakpoint verwendet eine Bildvorgabe, die für JPEG mit hoher Komprimierung konfiguriert ist. Der größte Haltepunkt wird mit einer Bildvorgabe hoher Qualität unter Verwendung verlustfreien PNG-Elements verknüpft. Diese Methode stellt sicher, dass hochwertige Bilder an solche Geräte gesendet werden, wobei davon ausgegangen wird, dass Geräte mit größeren Bildschirmen eine größere Bandbreite und Verarbeitungsleistung aufweisen.

Klicken Sie auf die URL, damit Sie die Webseite öffnen, die Größe des Webbrowserfensters von größer zu kleiner ändern und feststellen, wie sich die Bildqualität verschlechtert.

4

https://experienceleague.adobe.com/tools/dynamic-media-demo/is-api/crops.html?lang=de?lang=de

Neben Bildvorgaben ist es möglich, bestimmte Image Serving-Befehle mit Haltepunkten zu verknüpfen. Das folgende Beispiel zeigt, wie es möglich ist, das Bannerbild schrittweise in den gewünschten Bereich zu beschneiden, wenn die Bildschirmbildgröße kleiner wird. Hier verfügt der größte Haltepunkt überhaupt nicht über Image Serving-Befehle, sodass das Bannerbild vollständig sichtbar ist. Beim mittleren Breakpoint wird moderates Zuschneiden angewendet, sodass nur der Runner mit dem Text "Running"sichtbar ist. An kleinen Haltepunkten wird mehr Zuschnitt angewendet, sodass nur das Produkt angezeigt wird.

Klicken Sie auf die URL, um die Webseite zu öffnen und die Größe des Browser-Fensters zu ändern. Beachten Sie, wie das Bild schrittweise beschnitten wird, wenn Sie von einer größeren zu einer kleineren Größe wechseln.

5

https://experienceleague.adobe.com/tools/dynamic-media-demo/is-api/template.html?lang=de?lang=de

Sie können auch Image Serving-Befehle 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. Responsives Bild ist so konfiguriert, dass eine größere Schriftgröße für kleinere Bildgrößen verwendet wird, um sicherzustellen, dass Text immer lesbar bleibt: