Contao-Camp 2024
Ergebnis 1 bis 17 von 17

Thema: Responsive Image: Wie groß muss das Originalbild sein?

  1. #1
    Contao-Fan
    Registriert seit
    05.11.2012.
    Beiträge
    400

    Standard 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:

    2020-03-11_Bildschirmfoto 2020-03-11 um 17.37.50.png

    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

  2. #2
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.886
    Partner-ID
    10107

    Standard

    Zitat Zitat von doescher Beitrag anzeigen
    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.

  3. #3
    Contao-Fan
    Registriert seit
    05.11.2012.
    Beiträge
    400

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    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?

  4. #4
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.273

    Standard

    Hier ist ne ganz gute Erklärung: https://rocksolidthemes.com/de/conta...picture-contao
    Geändert von Kahmoon (12.03.2020 um 11:06 Uhr)

  5. #5
    Contao-Fan
    Registriert seit
    05.11.2009.
    Ort
    Liebschützberg (Sachsen)
    Beiträge
    526

    Standard

    Zitat Zitat von Kahmoon Beitrag anzeigen
    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:

    RESPIMG_devtool.jpg
    RESPIMG.jpg
    Liegt es an der Ausgabe von width="100" und height="100" im img Tag?
    Angehängte Grafiken Angehängte Grafiken

  6. #6
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.886
    Partner-ID
    10107

    Standard

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

  7. #7
    Contao-Fan
    Registriert seit
    05.11.2009.
    Ort
    Liebschützberg (Sachsen)
    Beiträge
    526

    Standard

    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.

  8. #8
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.886
    Partner-ID
    10107

    Standard

    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.

  9. #9
    Contao-Fan
    Registriert seit
    05.11.2009.
    Ort
    Liebschützberg (Sachsen)
    Beiträge
    526

    Standard

    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.

  10. #10
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.886
    Partner-ID
    10107

    Standard

    Hast du meinen vorherigen Post übersehen?

  11. #11
    Contao-Fan
    Registriert seit
    05.11.2009.
    Ort
    Liebschützberg (Sachsen)
    Beiträge
    526

    Standard

    Nein, habe ich nicht!

    HTML-Code:
    img {
        max-width: 100%;
        height: auto;
    }
    Trotzdem nur Bilder 100 x 100

  12. #12
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.886
    Partner-ID
    10107

    Standard

    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.

  13. #13
    Contao-Fan
    Registriert seit
    05.11.2009.
    Ort
    Liebschützberg (Sachsen)
    Beiträge
    526

    Standard

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

  14. #14
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.886
    Partner-ID
    10107

    Standard

    Zitat Zitat von swinde Beitrag anzeigen
    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 Beitrag anzeigen
    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.

  15. #15
    Contao-Fan
    Registriert seit
    05.11.2009.
    Ort
    Liebschützberg (Sachsen)
    Beiträge
    526

    Standard

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

    beispiel.jpg

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

  16. #16
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.886
    Partner-ID
    10107

    Standard

    Zitat Zitat von swinde Beitrag anzeigen
    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:
    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.

  17. #17
    Contao-Nutzer Avatar von Joern
    Registriert seit
    14.09.2018.
    Beiträge
    130

    Standard

    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.

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •