Responsive Image: Wie groß muss das Originalbild sein?

Hallo,

ich würde gerne wissen, wie groß ich die originalen Bilder anlegen muss, damit sie mit dem Contao Responsive Image optimal dargestellt werden und nicht zu viel Performance kosten.
Meine Einstellungen sind folgende:

Anhang 23288

Wenn ich eine Breite von 300 Pixel angebe und bei der Pixeldichte 2x stehen habe, dann sollte doch – so wie ich es verstehe – das Original 600 Pixel breit sein.
Wenn das Original-Bild nur eine Breite von 300 Pixel hat, dann skaliert Contao auf 600 Pixel herauf, oder?

Welche Einstellungen habt Ihr bei den Bildern und wie viele Pixeldichten gebt Ihr an, damit die Performance der Site nicht leidet?
Gebt Ihr bei den Size-Attibut schon etwas für kleine Viewports an oder macht ihr das über zusätzliche Media-Queries?

Danke und viele Grüße
doescher

Zitat:

---

Zitat von doescher

Wenn das Original-Bild nur eine Breite von 300 Pixel hat, dann skaliert Contao auf 600 Pixel herauf, oder?

---

Nein, Contao (4) skaliert nicht rauf.

Zitat:

---

Zitat von Spooky

Nein, Contao (4) skaliert nicht rauf.

---

Aaah, d.h. das Bild muss sowieso mindestens 600 Pixel groß sein, da es sonst einfach schlecht dargestellt wird.
Und mit dem Wert 300 gebe ich dann nur an, wie groß es in der Dimension sein soll und mit 2x die Darstellung auf z.B. Retina-Displays?

Hier ist ne ganz gute Erklärung: https://rocksolidthemes.com/de/conta...picture-contao

Zitat:

---

Zitat von Kahmoon

Hier ist ne ganz gute Erklärung: https://rocksolidthemes.com/de/conta...picture-contao

---

Ich bin gerade am verzweifeln. Ich benutze die Responsiven Bilder ja schon eine ganze Weile, bisher hatte die Bildgrösse nur "informativen Charakter" die Bilder wurden in verschiedenen Größen ausgeliefert, wenn man Size und Pixeldichte ausgefüllt hat. Das ist jetzt nicht mehr so, Contao 4.4.47 und auch höhere Versionen.

Wenn man wie im Beispiel 100 x 100 Pixel einträgt bekommt man auch ein 100 x 100 Pixel Bild ausgeliefert:

Anhang 23290
Anhang 23291
Liegt es an der Ausgabe von width="100" und height="100" im img Tag?

Das 200w Bild wird auf jeden Fall von Contao ausgegeben. Bist du dir sicher, dass du bei sizes 100vw verwenden willst?

Hallo Spooky beide Bilder sind wie 2 Monitore zu betrachten.

Vermutlich stelle ich mich nur zu blöd an! Wenn ich Bildgröße und Höhe rausnehme liefert Contao ein 738 px breites Bild aus. Bei gleicher Auflösung .

Ich habe nur die Anleitung nachgestellt.

Wenn du 100vw eingetragen hast, dann ist das ein Hinweis an den Browser, dass du das Bild immer in voller Bildschirmbreite anzeigen lässt. Du musst dann aber auch noch via CSS dafür sorgen, dass das tatsächlich der Fall ist.

Das gleiche Ergebnis habe ich auch mit Media Querys.

HTML-Code:

---

<img src="assets/images/7/lindenbluetenhonig-500-17842038.jpg" srcset="assets/images/7/lindenbluetenhonig-500-17842038.jpg 100w, assets/images/9/lindenbluetenhonig-500-6dfaa80e.jpg 50w, assets/images/d/lindenbluetenhonig-500-4ecb7640.jpg 200w" sizes="(max-width: 600px) 100vw, 500px" width="100" height="100" alt="lindenhonig" itemprop="image">

---

Ausgabe ein Bild 100x100!
Lösche ich die Bildgrößen oder trage 0 ein dann siehts so aus:

HTML-Code:

---

<img src="files/img/lindenbluetenhonig-500.jpg" srcset="files/img/lindenbluetenhonig-500.jpg 783w" sizes="(max-width: 600px) 100vw, 500px" width="783" height="600" alt="lindenhonig" itemprop="image">

---

Und bei verschiedenen Viewgrößen werden verschiedene Bilder erzeugt.

Hast du meinen vorherigen Post übersehen? ;)

Nein, habe ich nicht!

HTML-Code:

---

img {
    max-width: 100%;
    height: auto;
}

---

Trotzdem nur Bilder 100 x 100

Ja, weil dein Bild ja auch nur 100x100 groß ist. Du hast aber bei sizes 100vw eingetragen, damit sagst du dem Browser, dass du das Bild eigentlich 100vw groß darstellen lassen wirst. Aber in deinem CSS machst du das dann tatsächlich nicht.

Ich beziehe mich hier ja auf das Tutorial was hier verlinkt wurde, weil ich der Meinung bin das man das nicht mehr 1:1 verwenden kann! Siehe mein Beispiel.

Vermutlich gab es hier mal eine Änderung im Core, siehe hier:
https://community.contao.org/de/show...sponsive+image

Dort hast Du selbst unter #8 einen Link auf Github gesetzt.

Früher hatte ich für Bootstrap immer die Bildbreite auf 380px für mobile gesetzt und dann für größere Bildschirme über das Size Attribute per Media Querys. Das geht jetzt nicht mehr, da immer die Bildbreite als Inlinestyle width = 100 px ausgegeben wird.

Um auf die Ausgangsfrage zurück zu kommen: "4.4.x Responsive Image: Wie groß muss das Originalbild sein?" Nicht mehr die minimale sondern die maximal benötigte Breite. ?

Zitat:

---

Zitat von swinde

Ich beziehe mich hier ja auf das Tutorial was hier verlinkt wurde, weil ich der Meinung bin das man das nicht mehr 1:1 verwenden kann! Siehe mein Beispiel.

---

Was genau kannst du nicht mehr 1:1 verwenden?

Zitat:

---

Zitat von swinde

Um auf die Ausgangsfrage zurück zu kommen: "4.4.x Responsive Image: Wie groß muss das Originalbild sein?" Nicht mehr die minimale sondern die maximal benötigte Breite. ?

---

Das ist in Contao 4 generell so. Und solltest du natürlich auch in Contao 3 so handhaben, denn wenn du ein Bild aufblasen lässt, sieht das ja nicht gut aus.

In dem Tut. sieht man gleich am Anfang die Bildgröße:

Anhang 23292

Wenn man das so übernimmt, bekommt man das von mir geschriebe Verhalten. Obwohl C4 verschiedene Bildvarianten erstellt bekommt man nur 100x100 Bilder ausgegeben.

Zitat:

---

Zitat von swinde

Wenn man das so übernimmt, bekommt man das von mir geschriebe Verhalten. Obwohl C4 verschiedene Bildvarianten erstellt bekommt man nur 100x100 Bilder ausgegeben.

---

Ja, weil dir vermutlich das richtige CSS fehlt. Es steht ja auch folgendes im Tutorial:

Zitat:

---

Wenn das Bild immer in voller Breite des Fensters angezeigt wird, tragen Sie 100vw ein.

---

Wenn du bei sizes 100vw einträgst, heißt das nicht, dass dann automatisch das Bild in 100vw angezeigt wird. Sondern du gibst damit dem Browser nur den Hinweis, dass du das Bild immer in voller Breite des Fenster anzeigen lassen wirst - per CSS.

Zitat:

---

Zitat von doescher

Anhang 23288

---

Bei den Angaben für die Pixeldichte/Skalierungsfaktor ist das erste Komma falsch gesetzt. Korrekt sollte es "0.5x,1x,1.5x,2x" heißen.