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 .
Lesezeichen