Automatisch art-directed responsive Bilder? Bitte schön.

In vielen Projekten sind responsive Bilder kein technisches Problem, sondern ein strategisches Anliegen . Das Bereitstellen unterschiedlicher Bilder auf verschiedenen Bildschirmen ist technisch möglich mit srcset und Größen und <picture>-Element und Picturefill (oder einem ähnlichen) Polyfill; Aber all diese Varianten von Bildern müssen erstellt, angepasst und in die Logik des bestehenden CMS integriert werden. Und das ist nicht einfach.

Obendrein muss auch responsives Bild-Markup generiert und in HTML eingefügt werden, und wenn irgendwann eine neue Bildvariante ins Spiel kommt (z. B. ein Dateiformat wie WebP oder eine große Quer-/Hochformat-Variante), muss das Markup aktualisiert werden. Die Menge an zusätzlicher Arbeit, die erforderlich ist, verursacht oft Probleme – wenn Sie also eine perfekte Produktaufnahme haben, müssen Sie entweder manuell Varianten für mobile und Hoch- und Querformat und größere Ansichten erstellen oder Plugins und Erweiterungen erstellen, um den Prozess irgendwie zu automatisieren.

Manchmal funktionieren Workarounds auch gut. Eines davon sind komprimierte Bilder, eine clevere Technik, die darauf hindeutet, dass der Grad der Komprimierung einen größeren Unterschied macht als seine physischen Abmessungen. Mit den Worten von Scott Jehl: „Bei zwei identischen Bildern, die in derselben Größe auf einer Website angezeigt werden, kann eines dramatisch kleiner als das andere in der Dateigröße sein, wenn es sowohl stark komprimiert als auch dramatisch größer ist als es angezeigt wird. ”

Weiterführende Literatur zu SmashingMag:

• Einfache responsive Bilder mit CSS-Hintergrundbildern
• Automatisieren Sie Ihre responsiven Bilder mit Mobify.js
• So lösen Sie adaptive Bilder im responsiven Webdesign
• Responsive Bilder in WordPress mit Art Direction
  

Im Grunde könnten wir also ein bestimmtes Bild vergrößern, es in der schlechtestmöglichen Qualität in Photoshop speichern und den Browser die Neuskalierung vornehmen lassen – im Durchschnitt wäre das tatsächliche Bild, das über das Netzwerk gesendet wird, größer, aber ungefähr 50–65 % kleiner Dateigröße. Nun, das ist ein ziemlicher Unterschied. Und es funktioniert in realen Projekten.

Der Nachteil: Wir verlagern die Arbeit auf den Client, und wenn der Benutzer das Bild speichert, erhält er eine ziemlich suboptimale Version davon. Und es hilft uns auch nicht bei künstlerisch ausgerichteten Bildern. Das ist nicht ganz eine saubere Lösung, die wir suchen.

Der Teufel steckt im… Back-End!

Ein gängiges Szenario wäre die Integration einer Art Back-End-Logik in das CMS, die es Content-Managern ermöglicht, Bilder hochzuladen, Schwerpunkte für jedes einzelne Bild zu definieren und all diese zugeschnittenen Varianten jedes Bildes im Handumdrehen zu generieren.

Das „Zuschneiden“ ist eine knifflige Sache, und wenn Sie die Größe der Bilder ohne Art Direction vollkommen ändern und dem Browser erlauben, ein Bild auszuwählen, das seiner Meinung nach am besten passt, wird es kein großer Aufwand sein – Sie könnten es Verwenden Sie ImageMagick oder ein anderes Bildbearbeitungstool für die Neuskalierung, oder CMS-Plugins könnten dies für Sie erledigen: zB Mobify.js API, Responsive Images im WordPress-Kern und es gibt auch eine Lösung für Drupal.

Wenn die Art Direction jedoch eine Rolle spielt – wenn Sie beispielsweise sehr spezifische Produktaufnahmen an verschiedene Arten von Bildschirmen senden möchten – müssen Sie sich nach fortgeschritteneren Optionen umsehen. Ein breites Landschaftsfoto, das für das schmale Ansichtsfenster verkleinert wurde, ist nicht besonders hilfreich, und ein schmales Bild, das so hochskaliert wird, dass es das gesamte Ansichtsfenster auf einem breiten Bildschirm ausfüllt, wäre nicht besonders hilfreich. Hier brauchen wir bessere, intelligentere Lösungen.

Also, was sind die Optionen?

Nun, wir könnten die Stapelverarbeitung über die inhaltsbewusste Füllung in Photoshop ausführen oder Tools wie Smartcrop.js verwenden, eine ziemlich einfache Implementierung des inhaltsbewussten Bildzuschnitts mit JavaScript. Möglicherweise könnten wir sogar das smartcrop-cli (zusammen mit ImageOptim-CLI) in unsere Grunt- und Gulp-Building-Prozesse integrieren und Bilder im Handumdrehen zuschneiden. Sie können auch imgix mit seinem automatischen Point-of-Interest-Cropping verwenden. Das ist schon ein guter Anfang, aber wir müssten das Markup für all diese Varianten manuell schreiben.

Gute Nachrichten: Es gibt ein neues Kind um den Block. Vor ein paar Tagen haben wir über den Responsive Image Breakpoints Generator geschrieben, ein kleines Open-Source-Tool, mit dem Sie interaktiv Haltepunkte für Ihre Bilder berechnen können. Grundsätzlich können Sie ein Bild hochladen, und das Tool erkennt geeignete Haltepunkte, skaliert Bilder neu und generiert responsives Bild-Markup , das Sie dann in Ihren HTML-Code kopieren/einfügen können. Sie können sogar noch weiter gehen und mithilfe der API des Tools automatisch direkt ansprechende Bilder gestalten.

Wie Eric Portis in seinem Artikel erklärt, können Sie bei Verwendung der Cloudinary-API einen crop_mode angeben, mit dem Sie background-size: cover in CSS nachahmen können. Neben der Bereitstellung von Höhen und Breiten können Sie auch den Schwerpunkt mithilfe des gravity , des Zoomfaktors und der Bereitstellung von Seitenverhältnissen angeben, wodurch URLs etwas besser lesbar werden können. Tatsächlich unterstützt die API die Gesichtserkennung. Wenn Ihre Bilder also menschliche Gesichter enthalten, kann die Art Direction mit einer höheren Wahrscheinlichkeit für einen ziemlich anständigen Zuschnitt automatisiert werden.

Wenn Sie Schwerpunkte für Bilder explizit definieren möchten, sollten Sie sich Sizzlepig (nicht kostenlos) ansehen, ein Bildstapelverarbeitungstool im Browser, das in Google Drive und Dropbox integriert werden kann und es Ihnen ermöglicht, den Zuschnitt zu ändern und Skalierung für jedes Bild.

Zusammenfassung

Im Idealfall hätten wir gerne ein Tool, das entweder „intelligent genug“ Zuschnitte generiert und das responsive Bild-Markup automatisch in den Build einfügt oder eine Schnittstelle bereitstellt, um den Brennpunkt von Bildern visuell anzupassen und „fertig zu erstellen“ auszugeben. gehen“ Markup. Wir sind noch nicht ganz am Ziel, aber vielleicht bald.

In der Zwischenzeit könnten die oben aufgeführten Tools gut genug sein, um in Betracht gezogen zu werden, wenn es darum geht, eine ziemlich entmutigende Aufgabe zu bewältigen, kunstgesteuerte Varianten von Bildern zu erstellen – entweder manuell oder durch die Erstellung benutzerdefinierter CMS-Plugins.