WordPressに学ぶHTML 5.1srcsetの使い方

HTML 5.1で実装されたレスポンシブイメージの機能の一つは、imgタグのsrcset属性・sizes属性を用いて環境に応じて最適な画像をブラウザが判断して表示する機能です。例えば次のような出し分けが期待できます。

• デスクトップブラウザで画面サイズ800px以下の時は横幅800pxの画像
• スマートフォンブラウザで画面サイズ600px以下の時は横幅1200pxの画像

Wordpressのバージョン4.4からは、このレスポンシブイメージのコードが自動生成されるようになりました。Wordpressのコードを通して、srcset属性・sizes属性の使い方を学びましょう。

Wordpressで生成されるレスポンシブイメージのコード

Wordpress 4.4以降で記事内に画像を挿入した場合、次のようなHTMLコードが生成されます。

Wordpressにおけるsrcset

<img class="aligncenter size-full wp-image-12922"
     src="path/image.jpg"
     width="1920"
     height="1080"
     srcset="path/image.jpg 1920w, 
     　　　　　　　　　　　　　　　　path/image-400x225.jpg 400w, 
     　　　　 　　　　　　　　　　path/image-512x288.jpg 512w, 
     　　　　　　　　　　　　　　 path/image-768x432.jpg 768w, 
     　　　　　　　　　　　　　　 path/image-1280x720.jpg 1280w"
     sizes="(max-width: 1920px) 100vw, 
　　　　　　　　　　　　　　　　　　　　　　　　　1920px"
/>

srcsetとsizesを指定することで、「画像の情報」と「表示したい画像のサイズ」をブラウザに伝えます。ブラウザは、この2つの情報を元にユーザーの閲覧環境（画面幅、デバイスピクセル比）に最適な画像を表示します。

^鹿野あああ

srcset

srcsetは、表示したい画像ファイルのパス横幅をブラウザに伝えます。Wordpressでは次のようなコードが生成されます。

srcset="path/image.jpg 1920w, 
        path/image-400x225.jpg 400w, 
        path/image-512x288.jpg 512w, 

これは、次の意味を示しています。「ファイルの横幅」は「画像をwebページ上で表示する際の横幅」では無いことに注意してください。

• image.pngの横幅は1920px
• image-400x225.pngの横幅は400px
• image-512x288.pngの横幅は512px
• (以下、略)

sizes

sizesは画像をwebページ上で表示する際の横幅をブラウザに伝えます。

WordPressでのsizes

sizes="(max-width: 1920px) 100vw, 
　　　　　　　　　　　　　　1920px"

これは次のことを示しています。

• 画面幅が1920px以下ならばビューポートに対して100%の横幅で画像を表示してほしい
• デフォルトでは、1920pxの横幅で画像を表示してほしい

レスポンシブイメージを使おう

以上がWordpressで自動生成されるレスポンシブイメージ用のコードです。画像をアップロードするだけで、複数サイズの画像ファイル生成とレスポンシブイメージ用のHTMLコードの書き出しを行うので便利です。レスポンシブイメージは人気のブログソフトウェアWordPressで採用されたこともあり、将来的に使用事例が増えていくと予想しています。今のうちにレスポンシブイメージを学んでおきましょう。

srcset、sizesのより詳しい解説や、レスポンシブイメージのもう一つの「アートボード機能」については、記事「レスポンシブイメージで画像の表示を最適化 〜CSSもJSもいらないHTML 5.1の新機能 - ICS MEDIA」を参照ください。