Einsatz des Attribut srcset

  • Firefox-Version
    85.0 (64 bit)
    Betriebssystem
    Windows 10 Home

    Hallo,

    Auf meiner WordPress Seite wird in der Galerie das Attribut srcset eingesetzt.

    Jetzt ist mir leider etwas unklar, warum sich Mozilla Firefox und Chrome hier unterschiedlich verhalten.

    Etwa unter touren.labut.at/harzberg lädt Chrome das "medium" Image mit 300x225 Pixel.
    Bei Aufruf im Firefox wird aber - am selben PC - das eigentlich zu große Image mit 768x576 Pixel geladen.

    Woran kann das wohl liegen? Vielen DANK für jede Unterstützung.

    LG Pedro

  • Hallo,

    kann ich nicht bestätigen. Hier laden sowohl Chrome als auch Firefox die Bilder mit 768px Breite.

    Bei einem Problem wie diesem wäre es natürlich hilfreich, sowohl die Fenstergröße als auch die Device Pixel Ration des Bildschirms anzugeben, damit das Problem unter gleichen Voraussetzungen geprüft werden kann. MacBooks, wie ich sie nutze, gibt es beispielsweise nur mit Retina-Display, die eine doppelt so hohe DPR besitzen wie leider noch normale und minderwertige Bildschirme. Für ein Problem dieser Natur ist das also eine wichtige Angabe.

  • Die Bilder der Gallerie? Hm, bei mir 300x225, sowohl in Fx 85 als auch im Fx 87er Nightly. Hängt die Auswahl nicht von der Bildschirm-Auflösung ab? Ich habe 1920x1080.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

    Einmal editiert, zuletzt von milupo (2. Februar 2021 um 13:16)

  • Und in Chrome? Wichtig ist nicht die Größe in Firefox, sondern der Vergleich, ob beide Browser das gleiche oder ein jeweils unterschiedliches Bild laden. Denn beim srcset-Attribut geht es ja darum, dass es unterschiedliche Varianten eines Bildes gibt. Man kann nicht pauschal sagen, dass die eine Größe richtig und die andere falsch wäre. Daher auch in meinem vorherigen Beitrag die Frage nach der Fenstergröße sowie der DPR. Denn diese Zahlen sind maßgeblich für die Wahl des Bildes.

    Die DPR bekommt man übrigens raus, indem man Folgendes in die Konsole eingibt:

    JavaScript
    window.devicePixelRatio;
  • Und in Chrome? Wichtig ist nicht die Größe in Firefox, sondern der Vergleich, ob beide Browser das gleiche oder ein jeweils unterschiedliches Bild laden.

    Mir ging es erst mal nur darum, dass Firefox bei mir 300x225 lädt und nicht 768x576. Chrome lädt bei mir ebenfalls 300x225. Die DPR ist 1.0909090909090908.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

  • Mir ging es erst mal nur darum, dass Firefox bei mir 300x225 lädt und nicht 768x576.

    Wie gesagt hat das für sich alleine genommen für das Problem keine Aussagekraft. Es sind im Code verschiedene Größen definiert und es hängt sowohl von deiner Fenstergröße als auch von der DPR ab, welches Bild geladen werden soll. Wenn bei dir sowohl Firefox als auch Chrome das gleiche Bild laden, dann ist es egal, ob nun 300×225 oder 768×576, denn dann kannst du davon ausgehen, dass alles korrekt ist (Firefox und Chrome werden kaum einen identischen Bug haben). Es ist auch kein Problem, dass bei mir das größere Bild geladen wird, denn hier ist DPR = 2, es überrascht also nicht. Insofern muss man da nichts weiter vertiefen, bei dir passt alles. Das Problem des Themenerstellers ist aber eine unterschiedliche Bildauswahl in beiden Browsern und das darf nicht sein.

  • Insofern muss man da nichts weiter vertiefen, bei dir passt alles.

    Es ist schön, das zu lesen. :)

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

  • Ich nutze Firefox und Chrome unter einer Bildschirmauflösung von 1920x1080 im Vollbildmodus.
    Die DPR liegt lt. Konsole bei 1,25.

    Firefox nutzt für die Darstellung weiterhin das Image mit 768x576 während Chrome auf die 300x225 Pixel zurückgreift.
    Ich weiß - dank eurer Aussagen - aber nun jedenfalls, dass kein generelles Probleme auf meiner Seite vorliegt.

  • Firefox und Chrome erlauben beide leider nur die Simulation mit DPR = 1 oder DPR = 2, ich kann also nicht DPR = 1,25 simulieren. Aber weder mit dem einen noch mit dem anderen Wert kann ich das Problem bei angegebener Auflösung nachvollziehen. In beiden Fällen verhalten sich Firefox und Chrome bei mir identisch (einmal das kleinere, einmal das größere Bild, aber immer in beiden Browsern). Und neben meinem MacBook Pro mit DPR = 2 habe ich nur noch einen Monitor mit DPR = 1 rumstehen. Dass es nun ausgerechnet mit DPR = 1,25 einen Unterschied gibt, kann ich nicht ausschließen, aber ohne Testmöglichkeit lässt sich da für mich leider nichts Genaueres zu sagen.