WordPress 4.4のレスポンシブ画像はsrcsetとsizesを自動で出力する
公開日： 執筆：佐藤
WordPress 4.4は、WordPressが生成する画像markupへsrcsetとsizesを追加します。browserは用意された画像sizeから、表示条件に合う候補を選べます。
更新しただけで、すべての画像が最適になるわけではありません。実際のHTML、生成済みの画像size、テーマが指定する表示幅を確認し、必要な場合だけsizesを調整してください。
srcsetへ利用できる画像sizeを並べる
WordPress 4.4のresponsive imagesに関する開発資料では、WordPressが生成する画像markupへsrcsetとsizesを含める仕組みが説明されています。
WordPressは、Media Libraryへ画像をuploadすると複数の中間sizeを作ります。srcsetには、同じ画像から生成された利用可能な候補と幅が並びます。browserはその候補から一つを選び、ほかの候補をdownloadしません。
実際の出力は、次のような形になります。URLと幅は説明用の仮例です。
<img
src="photo-640.jpg"
srcset="photo-320.jpg 320w, photo-640.jpg 640w, photo-1024.jpg 1024w"
sizes="(max-width: 640px) 100vw, 640px"
alt="商品写真"
>
srcsetは候補の一覧です。CSSで画像を小さく見せる指定でも、候補が一つしかなければbrowserは選べません。元画像だけでなく、attachment metadataにどの中間sizeが記録されているかを確認します。
sizesへ画像が占める幅を示す
sizesは、画像が画面内でどの程度の幅を占めるかをbrowserへ伝えます。WordPress 4.4の既定値は、画像の幅まではviewport幅の100パーセント、それより広い画面では画像本来の幅として扱う形です。
本文が画面全体を使う一列layoutなら、既定値が合う場合があります。しかし、desktopで本文とsidebarを並べ、画像が本文列の一部だけを使うlayoutでは、100vwが実際の表示幅より大きくなることがあります。
テーマ側で表示幅が分かっているなら、wp_calculate_image_sizes filterを使ってsizesを調整できます。たとえば、広い画面で本文列が画面幅の三分の二になる設計なら、その条件をHTMLへ反映します。ただし、見た目だけから固定値を推測せず、themeのbreakpointと本文幅を先に確認してください。
medium_largeと既存画像を分けて確認する
WordPress 4.4には、幅768px、高さ制限なしのmedium_largeが新しい既定の中間sizeとして加わりました。このsizeは、新しくuploadした画像、または画像sizeを再生成した場合に作られます。
したがって、WordPress本体を更新した日を境に、新旧のattachmentで利用できる候補が異なることがあります。既存画像のためだけに一括再生成する前に、代表記事を一件選び、次を確認します。
| 確認対象 | 見る内容 |
|---|---|
| HTML | srcsetとsizesが出力されるか |
| attachment metadata | 候補になる幅が記録されているか |
| uploads内のfile | metadataに対応する実fileがあるか |
| CSS | 表示幅と縦横比が意図どおりか |
| network | 画面幅を変えたときにどの候補を取得するか |
画像sizeの再生成は、file数と保存容量を増やす作業です。対象件数、backup、空き容量、所要時間を確認し、必要なattachmentへ範囲を絞ります。
WordPressが生成しないimg要素は別に扱う
自動付与を期待できるのは、WordPressが生成してattachmentを判別できる画像markupです。テーマへ直接書いたimg、外部serverの画像、独自fieldからURLだけを出すcodeでは、同じ出力になるとは限りません。
「WordPress 4.4へ更新したから対応済み」と判断せず、投稿本文、featured image、gallery、固定template内の画像を一件ずつ代表として選び、最終HTMLを確認してください。
独自の画像出力を直す場合も、srcsetへURLを手作業で並べる前に、WordPressが持つattachment IDと画像metadataを利用できるかを調べます。file差し替えやsize変更のたびにHTMLを手修正する運用を避けるためです。
制作を委託する場合は、対象template、登録する画像size、sizesの根拠、既存画像の再生成範囲、検査した画面幅を受け取ります。実装を任せても、必要な画質、保存容量、更新時の再生成手順を決める責任はsite側に残ります。
最初の一手は、画像を含む代表記事を一件開き、最終HTMLのsrcsetとsizesを確認することです。その後、attachment metadataと実fileを照合し、themeの表示幅に合わない場合だけsizesを調整してください。
関連記事
