Angesichts der Tatsache, dass es immer mehr Devices auf dem Markt gibt, deren Bildschirmgröße eine enorme Spannbreite umfassen, ist das Bearbeiten und Verwenden von Medien – insbesondere natürlich von Bildern – eine immer größere Herausforderung für Entwickler. Zwar gibt es zahlreiche Frameworks und Best Practices zur Arbeit mit Responsive Images, allerdings fehlt vielen davon eine gute Lösung des Hautproblems: die richtige Auswahl der Bildauflösung und die passende Anzahl verschiedener Bildversionen beziehungsweise Responsive Image Breakpoints.

Vor allem zwei Fehler werden dabei laut Nadav Soferman oft begangen. Zum einen wird häufig die höchstmögliche Bildauflösung an alle User ausgespielt, was vor allem für User mit schlechten mobilen Internetverbindungen lange Ladezeiten und einen hohen Datenverbrauch bedeutet. Zum anderen erstellen viele Webentwickler zu viele verschiedene Versionen eines Bildes, damit sie der Auflösung und Displaygröße möglichst vieler Geräte gerecht werden können; eine hohe Bildverarbeitungs-CPU-Zeit und unnötig hohe Speicheranforderungen sind die Folge.

Lesen Sie dazu auch weitere Tipps zum Umgang mit Responsive Images.

Responsive Image Breakpoints einfach bestimmen

Um Entwicklern die Auswahl der passenden Responsive Image Breakpoints zu erleichtern, hat der Cloud-basierte Dienstleister Cloudinary den Responsive Image Breakpoint Generator entwickelt – ein Tool, mit dem sich Bilder hochladen lassen und zu den eigenen Design-Anforderungen passende Bilddimensionen und Breakpoints definiert werden können. Dabei können sowohl die Auflösung, die Abstände zwischen den Dateigrößen-Stufen sowie die maximale Anzahl von Bildern festgelegt werden, und auch das Seitenverhältnis lässt sich mit dem Tool auswählen (siehe Screenshot).

Responsiv Image Breakpoint Generator Einstellungen, Quelle: http://www.responsivebreakpoints.com/

Nach dem Bild-Upload werden die benötigten Breakpoints gemäß der zuvor vorgenommenen Einstellungen generiert und in einer Tabelle übersichtlich zusammengefasst. Ebenso lassen sich alle skalierten und optimierten Bilder direkt herunterladen. Zudem generiert der Responsive Image Breakpoint Generator ein entsprechendes HTML-Markup, das problemlos kopiert und in den eigenen Code eingefügt werden kann.

Auch für Web-Applikationen, in denen von Usern hochgeladene Bilder enthalten sind, bietet der Responsive Image Breakpoint Generator eine Lösung zum Generieren von passenden Breakpoints. Dafür wird, so erklärt das Entwicklerteam des Tools, für jedes hochgeladene Bild eine API-Methode aufgerufen:

For each uploaded image, you need to call an API method to generatet he breakpoints, store or cache them on your side, and then build your HTML5 or CSS responsive web code according to these breakpoints.

Das entsprechende API kann direkt aus dem genutzten Entwicklungsframework aufgerufen werden; zur Verfügung stehen dafür Open-Source-SDKs für Ruby on Rails, Node.js, Python, PHP, Java oder .Net.

Mehr Informationen zu dem Responsive Image Breakpoint Generator bietet der oben genannte Blogpost sowie die Projekt-Website; zudem steht das Tool auf GitHub zur Verfügung.

PsyConversion: Website-Optimierung mit neuropsychologischen Prinzipien

mit Rouven Klein (elaboratum – NewCommerceConsulting)

SEO 2019: Wie man in einem kompetitiven Markt wächst

mit Matthäus Michalik (Claneo GmbH)

Webseiten mit Bootstrap 4 entwickeln

mit Jens Grochtdreis (webkrauts.de)

Praktische Web-Animation

mit Lisi Linhart (lisilinhart.info)

Aufmacherbild: Photo Frames on Rope. Illustration on white background von Shutterstock / Urheberrecht: DVARG