web-dev-qa-db-ja.com

WP 4.4。レスポンシブイメージをロードした後、レスポンシブロードは通常のイメージをロード

私がテストしている2つの新しい追加サイズがあります。

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

画像出力された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">

私はクロムでネットワークタブを見ています、そして私が例えば500x900（幅の高さ）でブラウザをリロードするとき、それは最初に正しい画像をロードし、そしてその後すぐに自然な画像をロードします： enter image description here 

誰かがそれに遭遇したり、それを修正する方法を知っていますか？

functionsimagesadd-image-sizeresponsive
4
RMH

これはより一般的なsrcsetとブラウザの質問であり、WordPress特有の質問ではありません。

しかし、一般的には、srcset情報を使ってブラウザが何をするのかを予測することはできません。あなたの具体的な例では、リロードの間にキャッシュを完全にクリアできなかったようです。 304応答は、ブラウザにすでに画像がキャッシュされていることを示しています（304はNot Modified応答です）。

そのような状況では、ブラウザがすでにキャッシュにある最大の画像を単純に使用することは、ブラウザにとって完全に合理的です。あなたはすでにより高品質のバージョンを持っています、それを使うかもしれません。ここで低品質の画像を使用してもネットワーク帯域幅は節約されません。これはsrcsetの最初のポイントのようなものです。 Chromeのアルゴリズムは、単に「収まる画像サイズを使用する」ことではありません。

そのため、実際にテストするには、キャッシュをクリアしてリロードする必要があります。毎回。

ブラウザごとのsrcsetの使用方法に関するいくつかの背景情報： https://stackoverflow.com/questions/28683635/is-there-something-wrong-with-my-srcset-definition-or-is-current-browser-suppor

編集：Mark Kaplunがコメントで指摘しているように、ブラウザは接続速度に基づいてより大きな画像を選択することが完全に可能です。たとえば、Chromeは、画像がローカルファイルシステム上にあることを認識している場合は、常に最大の画像を選択します（ローカルの.htmlファイルを表示しているように）。それはまた「localhost」について知っているかもしれず、その場合も大きな画像を選択します。あなたは問題を強いることはできません、あなたはカーテンの向こうに覗くことはできません。あんまり。 srcsetの目的は、ブラウザに画像を選択させるための情報をブラウザに提供することです。どのイメージがどの状況で使用されるかをあなたが彼らに決めることができないのはあなたのためではありません。

6
Otto