Tool zum einfacheren Erstellen von Image-Breakpoints im Responsive Webdesign

Responsive Image Breakpoint Generator
Kommentare

Auch wenn sich der User vielleicht über die umfangreiche Auswahl zwischen verschiedenen Mobile Devices freut, ist genau diese Geräte-Vielfalt für den Entwickler ein großes Problem – vor allem, wenn es darum geht, eine Website responsiv zu gestalten. Um die Auswahl der richtigen Breakpoints von Responsive Images zu vereinfachen, steht mit dem Responsive Image Breakpoints Generator ein neues Tool zur Verfügung, das Entwicklern einige Arbeit abnehmen soll.

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.

API Summit 2017

Web APIs mit moderner Web-Technologie konsumieren

mit Rainer Stropek (software architects)

API First mit Swagger & Co.

mit Thilo Frotscher (Freiberufler)

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

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.

Stellen Sie Ihre Fragen zu diesen oder anderen Themen unseren entwickler.de-Lesern oder beantworten Sie Fragen der anderen Leser.

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.

Name Responsive Image Breakpoint Generator
Hersteller Cloudinary
Projektwebsite http://www.responsivebreakpoints.com/
GitHub https://github.com/cloudinary/responsive_breakpoints_generator

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

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -