Responsive Images srcset funktioniert nicht

71

Ich habe versucht, den neuen srcset-Ansatz für reaktionsschnelle Bilder mithilfe des folgenden HTML-Codes zu implementieren

        <img class="swapImages"
        srcset="assets/images/content/large.jpg 1200w,
                assets/images/content/medium.jpg 800w,
                assets/images/content/small.jpg 400w"
        sizes="100vw"
        src="assets/images/content/small.jpg"
        alt="responsive image">

Ich benutze Chrome 40 und alles, was ich bekomme, ist das größte Bild. Die Größe meines Browsers zu ändern und den Cache zu leeren, bewirkt nichts.

Ich habe irgendwo gelesen, dass ich Polyfill machen musste, also habe ich das Picturefill-Plugin verwendet, obwohl Chrome es unterstützen sollte ..... funktioniert immer noch nicht.

Ich habe eine Demoseite dafür zusammengestellt: http://www.darrencousins.com/lab/resp-img-srcset/

Was mache ich falsch / nicht bekommen?

Jede Hilfe wird massiv geschätzt.

image  responsive-design  srcset 
— sygad1
quelle
2
— Alexander Farkas
2
KEY TAKEAWAY VON HIER: Cache leeren / inkognito verwenden!
— SRack

Antworten:

94

Du hast es richtig.

Die Sache ist, dass, sobald Ihr Browser das Bild mit höherer Auflösung (geladen, im Cache) hat, es keinen Sinn mehr hat, ein Bild mit geringerer Qualität herunterzuladen, selbst wenn Sie Ihr Fenster verkleinern (der Punkt dabei ist, Verkehr zu sparen).

Wenn Sie dies testen möchten, verkleinern Sie einfach Ihr Fenster und laden Sie dann die Seite (nachdem Sie den Cache geleert haben / oder verwenden Sie den Inkognito-Modus). Sie erhalten die Handy- oder Tablet-Version. Wenn Sie dann das Fenster vergrößern, wird Ihr Browser irgendwann zu einem Bild mit höherer Auflösung wechseln.

— TondaCZE
quelle
25
Das funktioniert bei mir nicht, obwohl ich meinen Cache lösche! : /
— J86
2
Probieren Sie den Inkognito-Modus von Chrome aus, um sicherzugehen (wenn Sie bereits damit getestet haben, schließen Sie alle Fenster / Registerkarten und beginnen Sie von vorne). Verkleinern Sie zuerst das Fenster und laden Sie dann die Seite. Die Reihenfolge ist entscheidend. Es sollte funktionieren, vielleicht versuchen Sie, Informationen über Ihren Browser bereitzustellen.
— TondaCZE
2
Ich hatte Probleme mit Chrome (48) und habe versucht, das Pixelverhältnis zu ändern. Es hat funktioniert. Siehe meine Antwort unten: stackoverflow.com/a/34222310/4063626 Weiß jemand, warum dies passiert?
— MeV
3
Ich fand, dass eine gute Möglichkeit, Chrome ohne Verwendung von Incognito erneut versuchen zu lassen, darin besteht, sicherzustellen, dass devtools geöffnet sind, mit der rechten Maustaste auf die Schaltfläche "Aktualisieren" zu klicken und "Cache leeren und neu laden" zu wählen.
— Sam Rueby
8
Damit dies in Chrome funktioniert, musste ich die Größe des eigentlichen Browserfensters ändern und nicht den Schieberegler für den "reaktionsschnellen" Modus verwenden
— Nadia
49

Bei Verwendung in einem img-Tag überlässt das Attribut srcset die Entscheidung dem Browser, welches Bild geladen werden soll, wie von TondaCZE angegeben. Wenn Sie Browser zwingen möchten, Bilder in bestimmten Ansichtsfenstern zu laden, möchten Sie das Bildelement verwenden.

<picture>
  <source srcset="large.jpg" media="(min-width: 1200px)" />
  <source srcset="medium.jpg" media="(min-width: 800px)" />
  <img src="small.jpg" />
</picture>
— mike.pj
quelle
10
Du hast Recht. Nur die Korrektur ist das Standardbild-Tag, das <img src="small.jpg">anstelle von haben sollte <img srcset="small.jpg">.
— WayBehind
1
imgDas sizesAttribut " using " sollte geeignet sein, um den Browser zu zwingen, an bestimmten Haltepunkten ein bestimmtes Bild zu verwenden. developer.mozilla.org/en-US/docs/Learn/HTML/…
— Sam Rueby
8
Es ist auch erwähnenswert, dass blindes Vorschlagen zur Verwendung <picture>nicht ideal ist, da es <picture>eine andere semantische Bedeutung hat als <img>. cloudfour.com/thinks/dont-use-picture-most-of-the-time
— Sam Rueby
Mein Bild wird nicht einmal geladen, wenn ich diesen Ansatz verwende. Vielleicht sind weitere Informationen zum Unterschied zwischen <picture>und <img>Tag erforderlich?
— JCutting8
1
Du bist ein Retter.
— Sai
14

Ich habe gerade festgestellt, dass auf Ihrer Demoseite ( http://www.darrencousins.com/lab/resp-img-srcset/ ) die mobile Version (auch bei Größenänderung des Browsers oder Verwendung des DevTools - Gerätemodus) bei Google nie angezeigt wurde Chrome (Version 48).

Wenn Sie das Pixelverhältnis des Geräts auf 1 ändern, wird das richtige Bild geladen.

Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein

Ich weiß nicht warum, ich frage mich, ob die w-Deskriptoren das Pixelverhältnis des Geräts berücksichtigen

— MeV
quelle
4
Der Browser multipliziert den Wert aus dem Größenattribut mit dem Pixelverhältnis des Geräts, bevor er aus der Liste der Breiten im Attribut srcset auswählt.
— Dsluis
"Das Ändern des Pixelverhältnisses des Geräts auf 1 scheint das richtige Bild zu laden" Game Changer (Y)
— Jono
5

Ich denke, Sie testen auf einem Chrome-Browser, und der einzige Grund, warum es dort nicht funktioniert, ist, dass es eine Chrome-Funktion ist. Siehe unten Stapelüberlauf-Thread (gilt auch für die neueste Version von Chrome v54):

Google Chrome Version 40 srcset Attributprobleme

Überprüfte Ihre Seite auf IE8 und Firefoxv49 und die Dinge funktionieren wie ein Zauber!

Die andere Sache, die ich beobachtet habe, ist, dass Chrome zwar keine anderen Bilder herunterlädt, aber die Größe der heruntergeladenen Bilder ziemlich gut ändert. In gewisser Weise sind wir immer noch in einem viel besseren Zustand, wenn es nur so auf Seite gewesen wäre:

<img srcset="assets/images/content/large.jpg 1200w" alt="large image">

— Kaashan
quelle
2

Wenn Sie die Seitenleiste von Chrome DevTools verwenden, können Sie Chrome anweisen, den Cache zu deaktivieren, wenn DevTools geöffnet ist. Wenn Sie Ihr Ansichtsfenster ändern und aktualisieren, wird das richtige reaktionsfähige Bild angezeigt, wenn Sie ständig das größte (zwischengespeicherte) Bild erhalten.

  1. Öffnen Sie DevTools ( F12 )
  2. Gehen Sie zu Einstellungen
  3. Scrollen Sie nach unten zu Netzwerk
  4. Überprüfen Sie Disable Cache (während DevTools geöffnet ist )
— BadHorsie
quelle
1

Wir hatten das gleiche Problem, als wir zum ersten Mal in unserem Projekt mit srcsets arbeiteten. Nachdem wir einige Zeit investiert hatten, konnte eines unserer Teammitglieder das Problem endlich lösen. Der Grund, warum Ihr Code nicht funktioniert, liegt in der Nichtübereinstimmung der Größen im Attribut srcset und Größen. Sie müssen die doppelte Breite im srcset angeben, damit der Browser sie mit der Breite in Größen abgleichen kann. Zum Beispiel,

 <img
        srcSet="image1920w.png 1920w,image720w.png 720w"
        sizes="(min-width: 960px) 960px,
        360px"
        src="www.image1920w.com"
         alt="Sample"
     />

Hier ein Beispiel für einen Arbeitscode, den Sie ausprobieren können.

Stellen Sie sicher, dass Sie es inkognito öffnen (da der Browser nach dem Laden eines Bildes mit höherer Auflösung kein Bild mit niedrigerer Auflösung zurückgibt) und den Code zuerst in einer Browsergröße von weniger als 1920 Pixel ausführen, um das Bild mit kleinerer Auflösung (Sonnenuntergang) zu sehen, und sobald Sie beginnen Wenn Sie den Browser vergrößern, sehen Sie das größere Bild (Blume).

— Abhilasha Arvind Gadekar
quelle
-3

Öffnen Sie Ihr Entwicklungstool, wechseln Sie zur Registerkarte "Netzwerk" und deaktivieren Sie "catch". das ist alles nichts anderes.

— Satywan Kumar
quelle
1
Diese Antwort fügt dem von @BadHorsie vor 11 Monaten geposteten nichts hinzu!
— Adrian Mole
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.