4.4の注目の画像はモバイルデバイスでは大きくなるはずです
私は3 columnsを画像と共に表示するテーマに取り組んでいるので、大型ディスプレイのサムネイルのサイズは360 x 240 pxになります。
サイズを変更すると、iPhoneのようなmobileデバイスでは、1カラムが画像に表示されます。その結果、の機能を備えたイメージは、幅が360pxより大きく大きくなります。
さて、良いPageSpeedスコアを維持するために、私はより大きな画像サイズをデスクトップコンピュータにロードしてCSSで拡大縮小したくはありませんが、モバイルデバイスでは640×426pxのようにおすすめ画像を大きくする必要があります。
モバイルデバイスで同じ画像サイズを使用する際の問題は、1列を埋めるのに十分な大きさではない可能性があり、その横にempty spaceが残ることです。
2つの新しい画像サイズを登録しましたが、the_post_thumbnail()関数は常に間違ったものを選びます。
add_image_size( 'loop', 360, 240, true );
add_image_size( 'loop-mobile', 640, 426, true );
私はさまざまな方法を試しましたが、どれも私が必要としているものに近くありません。
the_post_thumbnail();この場合、モバイルデバイスでは画像が小さすぎます
the_post_thumbnail('loop-mobile');この場合、それは常にPageSpeedスコアに影響を与えるより大きなバージョン640x426pxをロードします。
the_post_thumbnail(array(640,426));PageSpeedスコアと同じ問題があります。
手伝ってくれてありがとう！
答えはWPのレスポンシブイメージを使用して、あなたのユースケースに合うようにsizes属性をカスタマイズすることです。
行間を読みながら、私はあなたが異なる幅で異なるレイアウトを表示するためにレスポンシブデザインアプローチを使用していると仮定します。
最も簡単な方法は、自分自身をthe_post_thumbnailの代わりのテンプレートタグ関数にすることです。
function wpse_221989_the_post_thumbnail( $size, $attr ) {
the_post_thumbnail( $size, $attr );
}
テンプレートのthe_post_thumbnailを呼び出す場合は、代わりにwpse_221989_the_post_thumbnailを呼び出します。なぜ私たちはこうやってそれをするのですか？ WPは、応答画像のsrcsetおよびsizes属性を変更するためのフィルタフックのコンテキストを提供しません。そのため、wpse_221989_the_post_thumbnailラッパー関数を使用して独自のコンテキストを作成しています。
これまでのところ、賢いことは何もありませんが、この関数を基に次のように構築できます。
1 - 一連の画像サイズで描画する
2 - この特定のユースケースに対応するブレークポイントに応じて適切な画像を選択するようにブラウザに依頼します。
1 - あなたのインスタンスでは、あなたの画像のバージョンがすべて同じアスペクト比であるところで、WPが私たちのために物事を処理します。 the_post_thumbnailのような組み込みの画像呼び出しを使用すると、$sizeパラメータで指定された画像と同じ縦横比で、持っているすべての画像サイズからsrcset属性が構築されます。 add_image_sizeを使って、高密度ディスプレイにも十分な大きさの追加バージョンを作成することができます。 WPの縦横比の一致は小さな丸め誤差を許容するため、質問の両方のサイズは問題なく一致するはずです。
2 - ブラウザにスペースに適した画像サイズを選択させるには、カスタムsizes属性が必要になります。 WPのデフォルトのsizes属性は、画像をブラウザの幅いっぱいに広げたいが、画像の本来の幅よりは広くないことを前提としています。あなたのデザインでは、より狭いスクリーンはより大きな画像を必要とし、それからあなたはより小さな画像幅を選択したい特定のブレークポイントの上に必要です。
それで、あなたのイメージサイズからあなたのブレークポイントが640pxにあると仮定すると、私たちはsizes属性が少しこのように欲しいと思います：(min-width: 640px) 33.333vw, 100vw
ブラウザに表示されるのは640px幅以上のウィンドウ用で、ウィンドウ幅の3分の1に最適なイメージをsrcsetリストから選択してください。他のウィンドウ幅（640ピクセル未満）の場合は、リストからウィンドウ全体の幅に最も合うイメージを選択してください。
それをコードに入れるために、属性を返してラッパー関数に組み込むための新しい関数を作成します。
function wpse_221989_sizes() {
return "(min-width: 640px) 33.333vw, 100vw";
}
function wpse_221989_the_post_thumbnail( $size, $attr ) {
add_filter( 'wp_calculate_image_sizes', 'wpse_221989_sizes', 10 , 2 );
the_post_thumbnail( $size, $attr );
remove_filter( 'wp_calculate_image_sizes', 'wpse_221989_sizes', 10 );
}
テーマテンプレートがwpse_221989_the_post_thumbnailを呼び出すと、カスタムのsizes属性がデフォルトに置き換えられます。 the_post_thumbnailを呼び出す前にフィルタにフックし、カスタムテンプレートタグ関数をあなたの質問の文脈に敏感にするようにした直後にアンフックすることで、あなたのテーマの他の部分の画像に生成されたサイズ属性を混乱させません。
$sizeを条件付きでチェックして、テーマ用に作成したさまざまな画像バージョンに異なるルールを選択することで、これをさらに強化できます。
Google Pagespeedがあなたにとって重要であるならば、それがあなたのsrcsetとsizes属性に従うことを確かめるためにテストしてください。そうでない場合は、add_image_sizeを使用してPagespeedウィンドウにぴったり合うサイズを作成し、wpse_221989_the_post_thumbnailの呼び出しでそのサイズを使用して、src属性に設定します。私のサイトでは、デフォルトとして1024pxの画像を使用しています。これはデスクトップとモバイルの両方のPagespeed分析を満足させるものと思われます。
あなたの問題はレスポンシブデザインをしないことから来ています。レスポンシブデザインでは、クライアント側ですべてを決定するようにしておく必要があります。サーバーコードですべての画面サイズに一致するものを提供しようとすると、通常失敗するか、キャッシュを使用できなくなります。
理想的な解決策は srcset 属性です。 W3C HTML 5+ドキュメント残念なことに、そのデフォルトの wordpressでの実装 が吸い込まれてしまいますので、適切な場所に画像を表示するには、適切なAPIを使用する必要があります。
注意：srcsetは、従うべきではないブラウザへの単なる推奨事項です。ブラウザの責任に任せたくないのであれば、同様のことをするJSライブラリを見つける必要があります。