Über die Bibliothek responsiver Bilder
Erstellt für:
- Entwickler
- Benutzende
Die responsive Bildbibliothek ist ein JavaScript-Modul, das die Qualität der von Dynamic Media bereitgestellten und in responsive Web-Seiten eingebetteten Bilder dynamisch anpasst. 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 smarten Farb-/Bildmustern dynamisch rendern.
Demo-URLs
Der einfachste Anwendungsfall der Bibliothek Responsive Image besteht darin, eine Liste von 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 Web-Seiten-Layout ändert, nachdem ein Benutzer die Größe des Browser-Fensters geändert hat oder die Ausrichtung des Geräts geändert wurde. Die -Bibliothek überwacht kontinuierlich die Bildgröße auf dem Bildschirm und ruft jedes Mal, wenn eine neue Breakpoint-Breite erreicht wird, eine neue Bildausgabedarstellung von Dynamic Media ab.
| Demo-URL | Beschreibung | |
|---|---|---|
| 1 |
Im Folgenden finden Sie ein einfaches Beispiel, bei dem sich das responsive Bild in einem Container befindet, der 50 % der Web-Seitenbreite einnimmt. Jedes Mal, wenn die Größe des Browser-Fensters geändert wird, ändert sich die Container-Breite. Wenn die Bildbreite einen der konfigurierten Haltepunkte erreicht (die zu Illustrationszwecken auf 200, 400, 600 und 800 Pixel festgelegt sind), wird eine neue Ausgabedarstellung heruntergeladen und angezeigt. Dadurch soll das Laden unnötiger großer Bilder vermieden und Netzwerkbandbreite gespart werden. Klicken Sie auf die URL, um die Web-Seite zu öffnen, die Größe des Browser-Fensters zu ändern und den Netzwerk-Traffic zu überwachen. | |
| 2 |
Das folgende Bootstrap-Beispiel veranschaulicht denselben Anwendungsfall auf einer Web-Seite. 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 sind genau das, was als Haltepunkte an die Bibliothek für responsive Bilder übergeben wird. Auf diese Weise stellt Dynamic Media sicher, dass die Netzwerkbandbreite des Clients effektiv genutzt wird. Außerdem wird sichergestellt, dass das Bild in der exakt erforderlichen Größe angezeigt wird - angesichts des aktuellen Web-Seiten-Layouts - ohne visuelle Artefakte durch die Skalierung des Client-seitigen Browsers. Klicken Sie auf die URL, um die Web-Seite zu öffnen, die Größe des Browser-Fensters zu ändern, um verschiedene Layout-Breakpoints aufzurufen, und den Netzwerk-Traffic zu überwachen. Zu den komplexeren Anwendungsfällen gehören die Zuordnung verschiedener Bildvorgaben, Image-Serving-Befehle oder beides zu 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 mit unterschiedlicher Bildqualität und unterschiedlichem Format für unterschiedliche Breakpoint-Größen verwendet. Für einen kleinen Breakpoint wird eine Vorgabe von niedriger Qualität angewendet, die 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 Breakpoint ist mit einer Bildvorgabe hoher Qualität mit verlustfreiem PNG verbunden. Durch dieses Verfahren wird sichergestellt, dass diesen Geräten hochwertige Bilder bereitgestellt werden, wobei davon ausgegangen wird, dass Geräte mit größeren Bildschirmen eine größere Bandbreite und Rechenleistung aufweisen. Klicken Sie auf die URL, um die Web-Seite zu öffnen. Ändern Sie die Größe des Webbrowser-Fensters von größer auf kleiner und beobachten Sie eine Verschlechterung der Bildqualität. |
| 4 |
https://experienceleague.adobe.com/tools/dynamic-media-demo/is-api/crops.html?lang=de |
Zusätzlich zu Bildvorgaben ist es möglich, bestimmte Bildbereitstellungsbefehle Breakpoints zuzuordnen. Das folgende Beispiel zeigt, wie es möglich ist, das Bannerbild schrittweise in den gewünschten Bereich zuzuschneiden, da die Bildschirmbildgröße geringer wird. Hier verfügt der größte Breakpoint über keine Image-Serving-Befehle, sodass das Bannerbild vollständig sichtbar ist. Bei einem mittleren Breakpoint wird ein moderater Zuschnitt angewendet, sodass nur der Runner mit „Laufen“-Text sichtbar wird. Bei einem kleinen Breakpoint wird mehr Zuschnitt angewendet, sodass nur das Produkt angezeigt wird. Klicken Sie auf die URL, um die Web-Seite zu öffnen und die Größe des Browser-Fensters zu ändern. Beachten Sie, wie das Bild schrittweise von einer größeren zu einer kleineren Größe abgeschnitten wird. |
| 5 |
https://experienceleague.adobe.com/tools/dynamic-media-demo/is-api/template.html?lang=de | Sie können Bildbereitstellungsbefehle auch mit Bildbereitstellungsvorlagen verwenden, um bestimmte Vorlagenparameter basierend auf der Bildgröße zu steuern. In diesem nächsten Beispiel wird eine Bildbereitstellungsvorlage verwendet, bei der die Schriftgröße der Textüberlagerung mithilfe $fontsize- parametrisiert wird. Responsives Bild ist so konfiguriert, dass bei kleineren Bildgrößen eine größere Schriftgröße verwendet wird, um sicherzustellen, dass Text immer lesbar bleibt: |
Systemanforderungen
Server-Hardware und -Software
- Dynamic Media Image Serving 6.0.1 oder höher.
Mindestanforderungen für 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 wird auf Mobilgeräten derzeit nicht unterstützt.