Responsive Images und CMS

[Ole]

Hallo zusammen,

ich zerbreche mir derzeit den Kopf darüber, wie ich responsive Bilder im CMS-Workflow implementieren kann/soll/darf/muss.

Hier mal ein paar Hintergrundinfos, die sicher nützlich sind

• Die Webseite baut auf einem Bootstrap-Grid auf
• Das CMS ist kein aktives WCMS. Alle Inhalte werden auf einen Staging-Server generiert und von da auf den Live-Server geschoben. Zwischen Live-Server und CMS besteht keine Verbindung
• Das CMS kann (zumindest theoretisch) beliebig viele Bilder auf Grundlage von Regeln basierend auf einem Ausgangsbild generieren
• Jedes der generierten Bilder kann manuell überschreiben werden
• Die Redakteure sind (nett formuliert) unvorbelastet. Es besteht nicht die Möglichkeit alle Redakteure mit Grafikprogrammen auszurüsten und darauf zu schulen
• Es gibt Webdesigner/Mediengestalter
• Ich nutze <picture> und <srcset> in Verbindung mit dem Picturefill-Polyfill

Ich habe schon mehrere Szenarien durchgedacht, jedoch komme ich auf keinen grünen Zweig. Da wären zum Beispiel

1. One picture to rule them all

Der Redakteur läd ein Bild hoch und das CMS generiert für jeden möglichen Verwendungszweck ein weiteres Bild. Ausgehen von Bootstrap-Breakpoints und 12 Spalten wären das in der Summe 60 generierte Bilder.

Das CMS müsste automatisch erkennen welche Bilder in dem entsprechenden Kontext genommen werden müssen.

Art-Direction wäre nicht möglich.

2. One job one picture

Der Redakteur hinterlegt ein Bild und das CMS generiert nur die für diesen Kontext benötigten 5 Bilder.

Der Nachteil wäre, dass sich Bilder i.d.R. nicht wieder verwenden lassen, wenn sie in einem anderen Kontext verwendet werden sollen.

3. Image Workflow

Der Redakteur hinterlegt nur das gewünschte Bild. Die Art-Direction wird dann im Rahmen eines Freigabeworkflows durch Webdesigner/Mediengestalter erledigt.

Hier sehe ich zwei große Nachteile: Die Zeit bis zur Veröffentlichung eines Textes kann u.U. länger dauern. Und die Webdesigner werden sich für die Mehrarbeit bedanken und versuchen Mistgabeln und Fackeln habhaft zu werden ;)

Habt ihr noch Denkanstöße für mich? Wie macht ihr das?

Danke & Gruß Ole

[Gunnar Bittersmann]

@@Ole

3. Image Workflow

Der Redakteur hinterlegt nur das gewünschte Bild. Die Art-Direction wird dann im Rahmen eines Freigabeworkflows durch Webdesigner/Mediengestalter erledigt.

Hier sehe ich zwei große Nachteile: Die Zeit bis zur Veröffentlichung eines Textes kann u.U. länger dauern.

Warum? Was hat das Bild mit dem Text zu tun? Der kann ja schon vorab mit suboptimalem Bild veröffentlicht werden und dieses später verbessert werden. (Wenn’s wirklich schnell gehen muss.)

Und die Webdesigner werden sich für die Mehrarbeit bedanken und versuchen Mistgabeln und Fackeln habhaft zu werden ;)

Webdesigner/-entwickler sind nicht dafür da, sich selbst das Leben angenehm zu machen, sondern dazu, dem Nutzer das Leben angenehm zu machen.

LLAP

[Ole]

Guten Morgen,

Warum? Was hat das Bild mit dem Text zu tun? Der kann ja schon vorab mit suboptimalem Bild veröffentlicht werden und dieses später verbessert werden. (Wenn’s wirklich schnell gehen muss.)

Es handelt sich hier u.a. um Werbemittel. Da ist das Bild fast noch wichtiger als der Text. Ein nicht optimiertes Bild kann u.U. bedeuten, dass der unbedarfte Redakteur ein Promo-Bild eines Produktes hochläd und sich dann gemütlich 7-100 MB in die Seite ergießen.

Webdesigner/-entwickler sind nicht dafür da, sich selbst das Leben angenehm zu machen, sondern dazu, dem Nutzer das Leben angenehm zu machen.

Ich werde dich zitieren :)

Danke & Gruß Ole

[mark]

Hi,

Der Redakteur läd ein Bild hoch und das CMS generiert für jeden möglichen Verwendungszweck ein weiteres Bild. Ausgehen von Bootstrap-Breakpoints und 12 Spalten wären das in der Summe 60 generierte Bilder.

60? Responsive ist was anderes. M.M. braucht es für deine Anwendung nicht mehr als 3.

1. Orginal komprimiert, das der größten benötigten, oder einer Standard Auflösung entspricht. Diesen Schritt brauchst du auch nur, wenn du das nicht schon beim Upload machst.
2. Mittelgroße Ansicht Falls 1) Höhe > 1200px *, oder Breite > 800px * -> Änderung der Höhe, oder Breite auf 500px *.
3. Thumbnail für sehr kleine Bildgrößen: < 150px * Breite

*Die Grenzwerte sind nur ein Beispiel. Diese legst du am besten selbst fest. Jedes Bild passt du dann per css an seinen Container an. Der Container bestimmt die Anzeigegröße nicht das Bild selbst.

Die Unterschiedlichen Bildgrößen schonen "nur" die Bandbreite deiner User. Es macht keinen Sinn 60 Bilder unterschiedlicher Größe anzulegen. Die dritte Variante (Thumbnail) ist deshalb auch vernachlässigbar, wenn du nicht gerade eine Bilder Gallerie anzeigst, oder von Thumbnails übermäßig gebrauch machst.

Über horizontale und vertikale Ausrichtungen von Bildern musst du dir Gedanken machen. Das war bei meiner Implementierung ein Problem, vor allem bei Extremen, z.B.: Bilder mit den Abmessungen 70x1500 oder 1500x70. Ich hab das so (nicht zufriedenstellend) gelöst, dass ich von diesen Bildern nur Ausschnitte angezeigt habe.

lg

[Ole]

Guten Morgen

60? Responsive ist was anderes. M.M. braucht es für deine Anwendung nicht mehr als 3.

Um ein Bild nur einmal für alle möglichen Verwendungszwecke im CMS vorzuhalten sind 3 Versionen nicht wirklich ausreichend. Die möglichen Viewports erstrecken sich, mal ausgehend von den Bootstrap-Breakpoints von < 786px bis >1200px und das ganze auf jeweils 1-12 Spalten.

Natürlich können einzelne Bilder bei der Maximalausprägung ähnlich groß sein, aber um einen überschau- und im CMS abbildbaren Regelsatz zu formulieren ist es einfacher alle Bilder zu generieren als immer mögliche Größenannäherungen übergreifend zu ermitteln.

Danke & Gruß Ole

[robertroth]

Liebe Mitdenker, liebe Wissende, liebe Neugierige,

wenn es sich um ein passives Backend handelt, muss eben das Frontend aktiv werden. Das bedeutet, dass Du es so machst, wie man™ es schon seit über 10 Jahren gemacht hat:

mit JavaScript: nur als Hinweis

Die Seite wird mit den Bildern in der geringsten Auflösung aufgebaut.
Wenn JavaScript am Client vorhanden ist, stellt ein Script fest, wie hoch die aktuelle Auflösung ist und schreibt die Pfade aller Sources auf das Verzeichnis der Bilder mit der passenden Auflösung. Das geht relativ einfach, weil man nur einen Verzeichnispfad vor die (relativen) Pfade der Bilder setzen muss. JavaScript macht dann alleine den Rest :-)

Sicherlich kennt Gunnar eine bessere Lösung. Die hat er uns aber bisher verweigert ;-P

Spirituelle Grüße
Euer Robert
[e-mail]

[Ole]

Moin

wenn es sich um ein passives Backend handelt, muss eben das Frontend aktiv werden. Das bedeutet, dass Du es so machst, wie man™ es schon seit über 10 Jahren gemacht hat:

Du weißt aber schon wie <picture> + <source> bzw. der derzeit noch notwendige Polyfill arbeiten?

Danke & Gruß Ole

[Christian Kruse]

Hallo Ole,

lang ists her, schön mal wieder was von dir zu lesen :)

LG,
CK

[robertroth]

Liebe Mitdenker, liebe Wissende, liebe Neugierige,

wenn es sich um ein passives Backend handelt, muss eben das Frontend aktiv werden. Das bedeutet, dass Du es so machst, wie man™ es schon seit über 10 Jahren gemacht hat:

Du weißt aber schon wie <picture> + <source> bzw. der derzeit noch notwendige Polyfill arbeiten?

Ich würde mal vermuten, im Hintergrund mit JS.

Mit einem aktiven Backend könnte man die Bilder selbstverständlich passend generieren lassen. Da CMSse sowieso die Zugriffsrechte auf Ressourcen prüfen sollten, werden diese ohnehin meistens per Skript ausgeliefert.

Aber Du schriebst ja, dass dein Backend passiv sei, wenn ich das richtig verstanden habe?

Spirituelle Grüße
Euer Robert
[e-mail]

[Gunnar Bittersmann]

@@robertroth

Mit einem aktiven Backend könnte man die Bilder selbstverständlich passend generieren lassen.

Das Backend kam verschiedene Varianten eines Bildes generieren.

Das Backend kann aber nicht ohnes Weiteres wissen, welche davon gerade für einen gewissen Client die passende ist. Wie willst du die dafür notwendigen Informationen vom Client zum Backend kriegen?

Und warum? Die Wahl der passenden Variante ist Sache des Clients; der kann das am besten. Vom Server bekommt er dazu mitgeteilt, welche Varianten zur Verfügung stehen. Das passiert mit srcset/picture.

LLAP

[robertroth]

Liebe Mitdenker, liebe Wissende, liebe Neugierige,

@@robertroth

Mit einem aktiven Backend könnte man die Bilder selbstverständlich passend generieren lassen.

Das Backend kann verschiedene Varianten eines Bildes generieren.

Das Backend kann aber nicht ohnes Weiteres wissen, welche davon gerade für einen gewissen Client die passende ist. Wie willst du die dafür notwendigen Informationen vom Client zum Backend kriegen?

Das schrieb ich schon: mit JavaScript
Und ich habe auch einen Beispiel-Link hinterlassen.

Und warum? Die Wahl der passenden Variante ist Sache des Clients; der kann das am besten. Vom Server bekommt er dazu mitgeteilt, welche Varianten zur Verfügung stehen. Das passiert mit srcset/picture.

Und weil Du hier dafür der Spezialist bist, wäre es nett, wenn Du das Verfahren nochmals in einfachen deutschen Worten erläutern könntest. Wer liefert wann was und warum? Wieviel Roundturns gehören dazu?

Spirituelle Grüße
Euer Robert
[e-mail]

[robertroth]

Liebe Mitdenker, liebe Wissende, liebe Neugierige,

es gibt eine nette Beschreibung dafür unter srcset Beschreibung

Leider fehlt mir bei diesem Verfahren der wesentliche Punkt: Die Größe eines Images kann nicht einfach von der Auflösung des Client-Displays abhängig gemacht werden. Vielmehr sollte auch die zur Verfügung stehende Bandbreite ein wichtiges Kriterium für die Größe und Qualität des (ohne Usereinwirkung) übertragenen Bildes sein.

Der Artikel nimmt kurz Bezug darauf unter "Keine Kontrolle bei srcset & sizes".

Solange das nicht geklärt ist, würde ich an Mobile Devices immer erst eine Vorschau mit geringer Dateigröße ausliefern und erst auf Klick des Users auf einen Wahllink (x1, x2, x3, ...) eine höhere Auflösung ausliefern. Die Größe kann, wie (fast) immer schon, der Browser skalieren. Es gab da welche, die nicht größer skalieren konnten - nur kleiner, aber das ist wohl lange her.

Spirituelle Grüße
Euer Robert
[e-mail]

[Kay]

Habt ihr noch Denkanstöße für mich? Wie macht ihr das?

Sieh dir diese Mechanismen an. Vielleicht kannst du davon was gebrauchen zur Ideenfindung.

Media Files

template lookups

[Larry-Fiona]

Hallo Ole,

Bootstrap hat dafür eine tolle Class:

class="center-block img-responsive"

[Ole]

Hallo

Bootstrap hat dafür eine tolle Class:

Naja, "toll" ist ein wenig übertrieben. Die macht ja nichts weiter, als

max-width: 100%;
height: auto;
display: block;

zu setzen. Das ist zwar generell nützlich (ich setzte es auch ein) bringt mich aber mit meinem Problem nicht weiter. Mit <picture> liefere ich entsprechend den Breakpoints unterschiedliche Bilder aus, die Frage ist wie ich immer das optimale Bild ausliefere und nicht wie es dargestellt wird.

Danke & Gruß Ole