webentwicklung-frage-antwort-db.com.de

WP 4.4. responsive lädt ein normales Bild nach dem Laden des responsiven Bildes

Ich habe die 2 neuen Größen hinzugefügt, die ich teste:

// testing
add_image_size('new-small', 500, false);
add_image_size('medium-large', 768, false); // just added today for devices support

bild ausgegeben HTML:

<img class="alignnone size-full wp-image-24" src="http://localhost:8888/pfj_blog/wp-content/uploads/2016/01/test-image.jpg" alt="test-image" width="932" height="524" srcset="http://localhost:8888/pfj_blog/wp-content/uploads/2016/01/test-image-500x281.jpg 500w, http://localhost:8888/pfj_blog/wp-content/uploads/2016/01/test-image-768x432.jpg 768w, http://localhost:8888/pfj_blog/wp-content/uploads/2016/01/test-image.jpg 932w" sizes="(max-width: 932px) 100vw, 932px">

Ich schaue mir die Registerkarte "Netzwerk" in Chrom an. Wenn ich den Browser mit einer Auflösung von beispielsweise 500 x 900 (Breite Höhe) neu lade, wird zunächst das richtige Bild und anschließend sofort das natürliche Bild geladen:  enter image description here 

Hat jemand darauf gestoßen oder weiß, wie man es behebt?

4
RMH

Dies ist eher eine allgemeine Frage zu srcset und Browser, keine WordPress-spezifische Frage.

Im Allgemeinen können Sie jedoch nicht vorhersagen, wie Browser mit den srcset-Informationen umgehen. Für Ihr spezielles Beispiel scheint es, dass Sie den Cache zwischen Ihren Neuladungen nicht vollständig geleert haben. Beachten Sie die Antwort 304, die darauf hinweist, dass in Ihrem Browser das Bild bereits zwischengespeichert ist (304 ist die nicht geänderte Antwort).

In einer solchen Situation ist es für einen Browser durchaus sinnvoll, einfach das größte Bild zu verwenden, das sich bereits im Cache befindet. Sie haben bereits eine Version mit höherer Qualität, können diese aber auch verwenden. Wenn Sie hier ein Bild mit geringerer Qualität verwenden, sparen Sie keine Netzwerkbandbreite. Dies ist der eigentliche Sinn von srcset. Der Algorithmus von Chrome lautet nicht einfach "Verwenden der passenden Bildgröße".

Um also wirklich zu testen, müssen Sie den Cache leeren und neu laden. Jedes Mal.

Einige Hintergrundinformationen zur Verwendung von srcset durch verschiedene Browser: https://stackoverflow.com/questions/28683635/is-die-etwas-falsch-mit-meinem-srcset-definition-oder-ist-aktuellen-browsersupport

Bearbeiten: Wie Mark Kaplun in den Kommentaren ausführt, ist es durchaus möglich, dass ein Browser ein größeres Bild basierend auf der Verbindungsgeschwindigkeit auswählt. Chrome wählt beispielsweise immer das größte Image aus, wenn bekannt ist, dass sich das Image im lokalen Dateisystem befindet (wie beim Anzeigen einer lokalen HTML-Datei). Möglicherweise kennt es auch "localhost" und wählt dann auch das große Bild aus. Man kann das Thema nicht erzwingen, man kann nicht hinter den Vorhang schauen. Nicht wirklich. Das Ziel von srcset ist es, den Browsern die Informationen zu geben, damit sie das Bild auswählen können. Nicht, dass Sie für sie entscheiden können, welches Bild unter welchen Umständen verwendet wird.

6
Otto