Über die Bibliothek responsiver Bilder about-responsive-image-library

Responsive Image Library ist ein JavaScript-Modul, das die Bildqualität von Dynamic Media dynamisch anpasst und in responsive Webseiten eingebettet ist. Darüber hinaus bietet es eine verbesserte Bildqualität auf Geräten mit High-Density-Bildschirmen. Die Bibliothek kann auch Ergebnisse aus smartem Zuschneiden und smartem Farb-/Bildmuster responsiv rendern.

Demo-URLs section-4f72c1dc38bf4e03acfa5205733a05a5

Der einfachste Anwendungsfall der Bibliothek responsiver Bilder besteht darin, eine Liste mit Breakpoint-Werten für die Bildbreite zu definieren. Diese Liste stellt sicher, dass die entsprechende Ausgabedarstellung geladen und angezeigt wird, wenn die Größe eines Bildes geändert wird, weil sich das Layout der Webseite von einem Benutzer ändert, der die Größe des Browser-Fensters ändert oder die Ausrichtung des Geräts ändert. Die Bibliothek überwacht kontinuierlich die Bildschirmbildgröße und ruft jedes Mal, wenn eine neue Breakpoint-Breite erreicht wird, eine neue Bilddarstellung aus Dynamic Media ab.

Demo-URL
Beschreibung
1

https://experienceleague.adobe.com/tools/dynamic-media-demo/is-api/responsive-static-image-simple.html?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

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.

Zu den erweiterten Anwendungsfällen gehört 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

In diesem nächsten Beispiel werden Bildvorgaben unterschiedlicher Bildqualität und -format für unterschiedliche Breakpoint-Größen verwendet. Für einen kleinen Breakpoint wird eine Vorgabe mit niedriger Qualität angewendet, die das Image Serving zwingt, das auf nur sechs Farben komprimierte GIF-Bild zurückzugeben. Ein mittlerer Breakpoint verwendet eine Bildvorgabe, die für das 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

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 Größe des Bildschirmbilds 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

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:

Systemanforderungen section-35ea9e9c79cc43d7bcefdc240340fba4

Serverhardware und -software

  • Dynamic Media Image Serving 6.0.1 oder höher.

Mindestanforderungen an den Client-Browser

  • Microsoft® Windows® 7 oder höher; macOS 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.
recommendation-more-help
a26166cd-f2f4-45ce-996d-96a0f0d6cf49