Konzept: Responsive Bildstile
Vorrausgesetztes Wissen¶
Was sind responsive Bildstile?¶
Das Modul Responsive Image, welches mit dem Kernsystem ausgeliefert wird, stellt responsive Bildstile bereit. Dies ermöglicht Ihnen Bilder auf Ihrer Website zu erzeugen, die speziell für verschiedene Bildschirmgrößen optimiert sind. Dies hilft beispielsweise dabei Ihre Website auf mobilen Geräten schnneller zu laden, da unter Verwendung des Moduls responsive Imagae erzeugte Bilder für kleinerere Bildschirme optimiert sind.
Ein responsiver Bildstil ist die Zuordnung eines Bildstils oder mehrerer Bildstile zu einem Breakpoint. Breakpoints sind die Umbruchpunkte, an denen sich ein responsives Design anpassen muss, um auf unterschiedliche Bildschirmgrößen zu reagieren. Responsive Bildstile können entweder mit Breakpoints funktionieren, die in Ihrem Theme definiert sind, oder mit Breakpoints, die über die Einstellungen für responsive Bilder festgelegt wurden.
Wenn ein responsiver Bildstil definiert ist, kann er in den Anzeigeeinstellungen von Bildfeldern ausgewählt werden. Auf diese Weise kann die Website Bilder mittels des HTML5 picture-Tag oder unter Verwendung der Attribute srcset und sizes in einem img- Tag ausliefern, je nachdem, wie der responsive Bildstil eingerichtet ist.
Verwandte Themen¶
Hinzufügen von Basisfeldern zu einem Inhaltstyp
Zusätzliche Ressourcen¶
- Drupal.org Community-Dokumentationsseite „Reaktionsfähiges Webdesign"
- Drupal.org_ Community-Dokumentationsseite „Responsive Bilder in Drupal 9 (englisch)"
- Drupal.org Community-Dokumentationsseite „Arbeiten mit Breakpoints in Drupal 9“ (englisch)
- Blog-Post „Responsive Bilder in Drupal 8 mit 'srcset'“ (englisch)
Mitwirkende
Adaptiert von Boris Doesborg von Responsiv Bilder in Drupal 9 (englisch), copyright 2000 - 2026 von den einzelnen Mitwirkenden an der Dokumentation der Drupal-Community.
Ins Deutsche übersetzt von Joachim Namyslo.