いくつかの歴史

ユーザーが WordPress に画像をアップロードすると、新しい画像は自動的に小さいサイズにトリミングされます。たとえば、1500 x 706 の画像をアップロードすると、画像サイズは次のようになります：

  • フルサイズ – 1500 x 706
  • 大 – 500 x 235
  • 中 – 300 x 141
  • サムネイル – 150 x 150

したがって、WordPress はメディアライブラリにアップロードされた各画像のいくつかのサイズを自動的に作成します。追加のサイズはテーマに応じて作成されます。フルサイズの画像が投稿に添付されている場合、デスクトップおよびモバイルデバイスのユーザーはフルサイズの画像を見ることができます。しかし、モバイルデバイスでは表示やファイルサイズのためにフルサイズの画像を使用することは理にかなっていません。

レスポンシブデザインが普及する前は、多くのサイトがデバイスタイプ（例：電話、タブレットなど）に基づいてブラウザに異なるレイアウト（画像を含む）を動的に提供しようとしました。この場合、すべての動的な処理はサーバーで行われ、ページがレンダリングされる前に行われました。この戦略は通常、アダプティブデザインという用語に関連付けられます。

一方、レスポンシブデザインは、メディアクエリのようなツールを使用して、単一のページがブラウザで表示される際にビューポートの幅や表示密度に基づいて応答することを可能にします。

レスポンシブ画像は、第二の戦略に従い、すべての情報をブラウザに事前に送信し、ページが読み込まれる前にサーバーでその決定を行うのではなく、ブラウザが適切な画像を読み込むことを可能にします。

動作の仕組み

画像の利用可能なサイズをsrcset属性に含めることで、ソフトウェアはデバイスの画面サイズに基づいて適切な画像を自動的に使用および表示できるようになります。WordPress にフルサイズの 1500 x 706 の画像を投稿に添付すると、モバイルデバイスは代わりに大または中サイズの画像を見ることになります—これにより帯域幅を節約し、ページの読み込み時間を短縮する可能性があります。

既存のマークアップとの互換性のために、srcsetやsizesは、すでに contentHTML に存在する場合は追加または変更されません。レスポンシブ画像には設定を構成する必要はなく、魔法は裏で行われます。

ブラウザ側

ブラウザがソースセットリストから最適な画像を選択できるようにするために、WordPress はsizes属性をデフォルトで含めており、これは(max-width: {{image-width}}px) 100vw, {{image-width}}pxに相当します。このデフォルトは、ほとんどのサイトでそのまま機能しますが、テーマは必要に応じてsizes属性をカスタマイズするべきです。

通常のブラウザリクエストはサーバーに送信され、サーバーは応答を返します。この応答には、他のリソースへのリンク—フォント、CSS、JS、画像が含まれます。ブラウザはこれらのリソースに気付き、サーバーに追加のリクエストを送信してそれらのリソースを取得します。

このレスポンシブ画像アプローチが行うことは、画像タグに追加の属性を提供し、ブラウザにその特定の画像タグに利用可能な異なる画像ファイルを通知することです。これにより、ブラウザはウィンドウ/ビューポートサイズやブラウザがサポートする解像度に応じて適切な画像ファイル（ソース）をインテリジェントにリクエストできます。これは、ブラウザが過剰に大きな画像をリクエストし、その後スペースに合わせてサイズを変更するのではなく、画像に対して適切な「サイズ」の画像ファイルをリクエストできることを意味します。

srcsetとsizesの動作の全体像については、A List ApartのEric PortisによるResponsive Images in Practiceをお読みください。

新しい機能とフック

この機能を実装するために、次の新しい関数が WordPress に追加されました：

  • wp_get_attachment_image_srcset()–画像添付のsrcset属性の値を取得します。
  • wp_calculate_image_srcset()–srcset属性に含める画像ソースを計算するためのヘルパー関数。
  • wp_get_attachment_image_sizes()–画像のsizes属性値を作成します。
  • wp_calculate_image_sizes()–画像のsizes属性を作成するためのヘルパー関数。
  • wp_image_add_srcset_and_sizes()–既存のimg要素にsrcsetおよびsizes属性を追加します。 
  1.  <a name="a-new-default-image-size"></a>
  3. ## 新しいデフォルト画像サイズ
  5. 新しいデフォルトの中間サイズ、`````medium_large`````がレスポンシブ画像サポートをより活用するために追加されました。この新しいサイズはデフォルトで768pxの幅で、高さ制限はなく、WordPress で利用可能な他のサイズと同様に使用できます。標準サイズであるため、新しい画像がアップロードされるか、サードパーティのプラグインでサイズが再生成されるときにのみ生成されます。  
  7. `````medium_large`````サイズは、投稿に挿入する画像を選択する際のUIには含まれておらず、メディア設定ページから画像サイズを変更するためのUIも含まれていません。ただし、開発者は`````update_option()`````関数を使用して、この新しいサイズの幅を他のデフォルト画像サイズと同様に変更できます。  
  8.  <a name="customizing-responsive-image-markup"></a>
  10. ## レスポンシブ画像マークアップのカスタマイズ
  12. デフォルトの`````srcset`````および`````sizes`````属性を変更するには、それぞれ`````wp_calculate_image_srcset`````および`````wp_calculate_image_sizes`````フィルターを使用する必要があります。  
  14. 投稿コンテンツに埋め込まれていない画像（例：投稿のサムネイル、ギャラリーなど）の`````srcset`````または`````sizes`````属性をオーバーライドするには、他の画像属性が変更されるのと同様に`````wp_get_attachment_image_attributes`````フィルターを使用できます。  
  16. さらに、`````wp_get_attachment_image_srcset()`````をテンプレート内で直接使用して独自のカスタムマークアップパターンを作成できます。以下は、カスタム`````sizes`````属性を持つ`````<img>`````要素を構築するためにこの関数を使用する方法の例です：  
  19. ``````bash
  20. <?php
  21. $img_src = wp_get_attachment_image_url( $attachment_id, 'medium' );
  22. $img_srcset = wp_get_attachment_image_srcset( $attachment_id, 'medium' );
  23. ?>
  24. <img src="<?php echo esc_url( $img_src ); ?>"
  25.    srcset="<?php echo esc_attr( $img_srcset ); ?>"
  26.    sizes="(max-width: 50em) 87vw, 680px" alt="Foo Bar">
  27. `

開発者の詳細が必要ですか？

この GitHub リポジトリでレスポンシブ画像マークアップのカスタマイズについて詳しく学ぶ。

出典