Responsive Images srcset funktioniert nicht

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.

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.

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>

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.

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

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">

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 )

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

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