Eines der größten Probleme, mit denen Designer und Entwickler heute konfrontiert sind, ist das Responsive Design. Dieser Design-Stil ist zwar ein Segen für Benutzer überall - und stellt sicher, dass Inhalte auf allen Geräten richtig angezeigt werden -, aber das Entwerfen von Inhalten kann einige Probleme bereiten.

Dies ist insbesondere der Fall, wenn man bedenkt, wie Bilder in das Responsive-Design-Modell passen (oder nicht). Wie Designer gut wissen, passiert normalerweise eines von zwei Dingen, wenn sie mit Bildern im Responsive Design arbeiten. Entweder werden die Bilder zu übergroßen und zu langsamen Seiten, oder sie enden mit einer Vielzahl unterschiedlicher Bildgrößen, um verschiedene Bildschirme unterzubringen, was pures Chaos darstellt. Entweder ist die Realität aus der Perspektive der Designer nicht gut genug.

Jetzt gibt es eine Image-Service-Firma, die den Frustrationen dieser Designer zuzuhören scheint.

Vor Kurzem wurde eine intelligente Lösung für Breakpoints mit reaktionsfähigen Bildern vorgestellt, mit der sich die Probleme der Entwickler bei der Suche nach den richtigen Bilddimensionen für ihre Responsive-Site-Designs stellen.

Anstatt Designer zu entwerfen, die entweder zu große oder zu viele Bilder entwerfen, können sie sich jetzt auf eine Technologie verlassen, die ihnen hilft, automatisch die optimalen Bilddimensionen zu finden, die für das beste Seherlebnis sowohl in mobilen Apps als auch in Webanwendungen erforderlich sind Bereich der Bildschirmgrößen. Responsive Image Breakpoints Generator ist ein Open-Source-Tool, mit dem Designer ihre Bilder interaktiv studieren und responsive Bild-Breakpoints erstellen können.

Und so funktioniert es: Designer können schnell und einfach die am besten übereinstimmenden Haltepunkte für jedes Bild generieren, das sie auf Basis ihrer vorgegebenen Schwellenwerte auf das Tool hochladen. Retina-Display-Anpassungen und Anpassungen des Seitenverhältnisses bieten Designern zusätzliche Möglichkeiten, ihre Bilder anzupassen.

Das Tool ermuntert Designer, Bildbreitenwerte zu ermitteln, die die Dateigröße stark verringern. Dies ist immer willkommen, um sicherzustellen, dass die Seiten ihre Geschwindigkeit nicht verlieren. Die Algorithmen des Unternehmens interpretieren die Bilder, um immer die besten Haltepunkte zu finden. Dies gibt den Designern die Freiheit, sowohl zeitgenössische Bilder als auch HTML5-Elemente basierend auf den berechneten Breakpoints zu erstellen.

Diese Freiheit bedeutet, dass Designer die Fähigkeiten zur Generierung von Responsive-Image-Breakpoints über eine API haben, die es ihnen ermöglicht, sofort Breakpoints für jedes gängige Bildformat zu erstellen: JPG, GIF, WebP und PNG. Diese können entweder in ihrem ursprünglichen Format oder in einem neuen Format erstellt werden, das in den Bildumwandlungseinstellungen festgelegt wurde.

Dank dieses Tools haben Designer jetzt den Luxus, sich nicht auf ihre besten Annahmen verlassen zu müssen, wenn es darum geht, ihre Bildgrößen für ihre Responsive-Design-Websites anzupassen.