Responsive Images und CMS

[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