Bildgrößen?

Gibts zu den Bildgrößen, die man im Theme definieren kann, irgendeine Anleitung? Ja, Rocksolid Blog kenne ich schon, stehe trotzdem irgendwie total auf dem Schlauch. Machen will ich eigentlich nur folgendes ... und weiß nicht ob es überhaupt geht und wenn ja wie.

Mein Layout geht über die volle Viewportbreite und ich will ein Headerbild einbinden, das ebenfalls über die volle Breite geht. Das Headerbild liegt im Original in Größe 2560x640px vor, so dass es auch bei "etwas" breiteren Bildschirmen noch gut aussieht. Allerdings auf Kosten der herunterzuladenden Datenmenge. Diese will ich jetzt bei schmaleren Viewports verringern. Zum Beispiel einfach stufenweise immer mit Faktor 2 kleiner. Also hätte ich gern, dass aus meinem großen Bild kleinere mit Breite 1280px und 640px erzeugt werden. Der Browser soll dann wie folgt die Bilder verwenden:

Viewportbreite bis 640px: verwendet Bild mit Bildbreite 640px
Viewportbreite bis 641-1280px: verwendet Bild mit Bildbreite 1280px
Viewportbreite größer als 1280px: verwendet Bild mit Bildbreite 2560px

Mein erster Ansatz war, eine Bildgröße zu definieren mit Breite 2560px, proportional, Skalierungsfaktoren 1x, 0.5x, 0.25x.
Als Sizes Attribut habe ich angegeben: (max-width: 640px) 640px, (max-width: 1280px) 1280px, 2560px

Das funktioniert schon mal gar nicht, es wird immer das große Bild genommen, sehe ich in der Grafikinfo, auch nach Neuladen der Seite nach dem Resize. Scheint also schon mal völlig verkehrt zu sein.

Brauche ich dazu zusätzliche "Bildgrößen media queries" und was ist der Unterschied zum Sizes-Attribut? Was muss ich jetzt einstellen für diese doch eigentlich recht einfache(?) Vorgabe?

Ich wäre ja schon froh. es wenigstens soweit hinzubekommen, die Kür wäre dann noch, die kleineren Bilder selbst rechnen und fürs Web optimieren zu können, aber das stelle ich mir dann nochmal eine Nummer komplizierter vor :rolleyes:.

Die Einstellungen sehen schon recht gut aus. Wenn das Bild jedoch immer genauso breit ist wie das Browserfenster, ist deine Sizes-Einstellung nicht ganz korrekt. Du solltest bei Sizes "100vw" einstellen.

Um einen besseren (bzw. kleineren) Fallback für alte Browser zu erreichen, solltest du noch die Skalierung umdrehen. D. h. du stellst als Breite 640 ein und als Skalierungsfaktoren 1x, 2x, 4x.

Die fertige Einstellung der Bildgröße sollte also folgendermaßen aussehen:

• Breite: 640
• Sizes-Attribut: 100vw
• Skalierungsfaktor: 1x, 2x, 4x

Das testen ob es korrekt funktioniert ist leider nicht so einfach. Zum einen sind die Developer-Tools einiger Browser noch nicht so aktuell dass sie das tatsächlich verwendete Bild anzeigen. Zum anderen laden manche Browser die kleineren Bilder nicht nach, wenn ein größeres bereits geladen wurde oder sich im Cache befindet. Unser Tipp zum testen der Bildgrößen:

1. Cache deaktivieren
2. Nach der Größenänderung des Browsers die Seite neu laden
3. Rechtsklick auf das Bild und „Grafik anzeigen“ oder „Bild in neuem Tab öffnen“ verwenden um herauszufinden welches Bild geladen wurde.

Ok, danke, sieht gut aus. Welches Bild verwendet wird sehe ich im Firefox 41.0.1 erst dann richtig, wenn ich das Bild anklicke und Grafik anzeigen wähle. Gege ich direkt auf der angezeigten Webseite auf Grafik-Info, zeigt er mir 640x160 skaliert auf 1600x400 (z.B.), obwohl er in Wirklichkeit das richtige Bild 2560x640 verwendet. Da habe ich mich heute vormittag wohl bei meinen Tests vom Browser verar***** lassen. Denn die 100vw hatte ich da auch mal drin bei den site-Attributen. Und mit dem großen Bild als Hauptgröße fällt das ja visuell auch nicht weiter auf. :rolleyes:. Wozu sind dann eigentlich die Bildgrößen Media-Queries gut?

Und wenn ich die Bilder in den verschiedenen Größen selbst erstellen will? Dann muss ich mir wohl mein eigenes Template für die Ausgabe erstellen?

Zitat:

---

Zitat von tab

Wozu sind dann eigentlich die Bildgrößen Media-Queries gut?

---

Die Bildgrößen-Media-Queries werden benötigt wenn das Bild nicht immer dieselbe Breite hat. Wenn ein Bild auf kleinen Bildschirmen bis 600 Pixel in voller Breite angezeigt wird und bei größeren Bildschirmen in halber Bildschirmbreite, wäre bei Sizes (max-width: 600px) 100vw, 50vw einzutragen.

Zitat:

---

Zitat von tab

Und wenn ich die Bilder in den verschiedenen Größen selbst erstellen will? Dann muss ich mir wohl mein eigenes Template für die Ausgabe erstellen?

---

Wichtig ist bei der manuellen Verwendung von sizes uns srcset, dass die verschiedenen Bilder den gleichen Inhalt, Bildausschnitt und Proportion aufweisen müssen. Für andere Bildausschnitte (Art-Direction) muss <picture> und <source> verwendet werden.

Da haben wir uns wohl missverstanden. Das sizes-Eingabefeld meine ich nicht, das glaube ich mittlerweile begriffen zu haben :). Ich mache mal einen Screenshot um zu zeigen was ich meine.
Anhang 16710
Wenn ich da draufklicke, bekomme ich einen Dialog angezeigt, in dem ich praktisch nochmal das selbe eingeben kann wie in meiner ursprünglich angelegten Bildgröße. Und ich kann viele davon anlegen, die dann aber alle zu meiner ursprünglich angelegten Bildgröße gehören. Trotzdem ist es das wohl keine zusätzliche Bildgröße, denn die kann ich ja auf andere Art und Weise einen Level höher anlegen. Und jede davon kann wieder beliebig viele Bildgrößen-Media-Queries enthalten.

Sobald mindestens ein Bildgrößen-Media-Query angelegt ist, wird für die Ausgabe das <picture>-Element und für jeden Bildgrößen-Media-Query ein <source>-Element erzeugt. Bildgrößen-Media-Queries sollten nur für „Art Direction“ verwendet werden. Den Unterschied zwischen Bildern ohne Art-Direction (srcset und sizes) und Bildern mit Art-Direction (<picture> und <source>) haben wir in unserem Blog genauer erklärt:
http://rocksolidthemes.com/de/contao...picture-contao

Ah, ok, danke dafür. Gut zu wissen, brauche ich mit Sicherheit auch demnächst mal bzw damit lassen sich auch ein paar schon bestehende Websites sicher noch gelegentlich etwas aufhübschen für Smartphone-User.