調査・研究レポートReport

みなさんはHTMLで画像を表示させるときに img 要素を利用していると思いますが、picture 要素、srcset属性、sizes属性をご存知ですか？

実は表示する画面が対応している解像度によって画像を変更したり、画面幅によって画像を出し分けることができます。今日はこれら画像サイズ最適化の基本とWordPressへの適応方法について見ていきましょう。

HTMLマークアップにおける画像の最適化

まずはデザインデータが届いたタイミングで画像をスライスしていく作業を行うと思いますが、現在のAdobe Illustrator や Photoshop、Experience Design ならアセットからの書き出しの機能を使えば簡単に1倍、2倍、3倍といった画像を書き出すことが可能です。Adobe Xd を例にとると画像を選択した状態からアセットの書き出しを行うことが可能です。

サイズ別のファイル名の付け方

アセットの書き出しで画像を書き出すと拡張子の手前に @2x や @3x といった文字がくっついている画像が作られることが確認できると思いますが、基本的にはこのファイル名の付け方を踏襲した命名を行います。例えば sample.jpg というファイル名の画像があった場合には、 sample@2x.jpg や sample@3x.jpg といった名前で画像を作成します。

2019年3月現在における最適な画像拡張子

綺麗さを取るならSVG、ただし背景として指定する場合にはIEが対応していない場合が多いので問題が起きやすく使用を控えたほうが無難です。ファイルサイズが大きくなることを強要できて透過情報が必要かつ画像サイズをそろえたい場合にはPNG、その他基本的にはファイルサイズをできるだけ少なくして高速化を図るという目的でJPEGを選択という流れが拡張子を選択するときに考えるべき内容になります。

画面の対応解像度によって最適な画像を表示する方法

画面の解像度によって画像を出し分けるためには img 要素などに対して srcset 属性を利用することで実現します。

srcset 属性の書式は以下の形式です。srcset 属性に対して、 画像ファイル名と解像度のセットをカンマ区切りで複数指定することが可能です。

上記の指定によって対応解像度の違いによって画像を出し分けることが可能となります。

これまで指定したことがない場合には単純に追加するだけでOKです。これを行うだけでレティーナディスプレイでもないのに2倍の重たい画像を表示する必要がなくなり、画像の読み込み速度が改善することによってページの表示速度の高速化に一定の効果があります。

画面幅によって最適な画像を表示する方法

画面幅によって最適な画像を表示する方法に関しては2つの方法があります。

sizes属性を指定する方法

sizes 属性を指定することによって画面幅によって画像を出し分けることが可能となります。以下例では150px、300px、1024px、2048px の画面幅に対応して画像を出し分けることが可能です。ちなみに、sizes属性を指定する場合にはsrcset属性も同時に指定する必要があることに注意が必要です。また、IE には実装がないので、モダンブラウザ以外のレガシーな環境への対応には注意が必要です。

参考：HTML 5.1のsrcset・sizes属性とpicture要素の使い方 – レスポンシブイメージで画像表示を最適化

https://ics.media/entry/13324

picture要素を利用する方法

picture 要素を利用することによって画面幅による画像の出し分けが可能です。picture要素の子要素としてsource要素を作成し、そのmedia属性にメディアクエリを指定することによって画面幅による制御を実装することができます。上から順番に処理が行われ最初に一致したメディア属性に対応したsource要素で指定されている画像が表示される仕組みです。最後までmedia属性に一致しない環境で表示される場合や IE などのpicture 要素に対応していないブラウザで表示される場合には最終的には img 要素が表示されることになります。

参考：picture要素とsrcset属性の基礎知識と使い分けと注意点をまとめる

https://a.uotomizu.com/articles/picture-element-and-srcset-attributes/

WordPressの画像サイズを最適化する

さて、ここまでは静的なHTMLを書く上での実装についてみてきましたが、ここからはWordPressをどうやって上記に対応させるかという視点で見ていくことにします。いいプラグインないかなぁ…と思って調べてみたらありました。最終更新が少し古いので保守がちゃんとされていないような感じもしますが一応ちゃんと機能は実装されていそうな雰囲気はあるので以下のプラグインを使ってみることにしましょう。

WordPressプラグイン「Responsify WP」を使ってみる

Responsify WP デモサイト
http://responsifywp.com/

WordPress公式リポジトリ
https://wordpress.org/plugins/responsify-wp/

使い方

上記で挙げたデモサイトにも書かれていますが、めちゃめちゃ簡単です。プラグインをインストールして有効化して設定するだけでOK。「srceset 属性 × sizes属性」にも「picture要素」にも両方に対応しています。

WordPressで更に画像を最適化するためのプラグイン

とりあえずまずは以下のプラグインもサクッと導入してしまいましょう。導入前の状態と比べると、必ずあなたの力になってくれるはずです。

Smush Image Compression and Optimization

導入することによって画像を圧縮してファイルサイズを縮小してくれるプラグインで、無料の範囲でも利用できるのが特徴です。

Smush – Lazy Load Images, Optimize & Compress Images

Imsanity

サイズの大きな画像をアップロードするタイミングで設定したサイズまで全自動で縮小してくれるプラグインです。スマホで撮影した写真をそのままアップロードする場合やストックフォトサイトからダウンロードした大きなサイズの画像をそのままWordPressにアップロードする際などに威力を発揮します。縮小前のオリジナルのサイズが保持されない点だけ注意してください。

Imsanity

まとめ

個人的にはレティーナ対応するために2倍の画像にしてくれと言われるたびに読み込み遅くするくらいなら1倍でいいんじゃないんかなぁと感じながら対応していたのですが、見た目の品質もコンテンツSEOとして大切な品質基準になっているので外すことができないということでレティーナディスプレイをはじめとする2倍や3倍など大きな画像への対応は必須となっています。

ただ、これら巨大な画像をスマホで表示させるとなると読み込み速度に大きな悪影響があるため離脱率を改善するという目線から言えばかなりのマイナスポイントであると言えるでしょう。大切なことは、どちらを選ぶかということでもなく、適切に環境によって画像を出し分けるための設定を適切に行うことが重要だと言えるのではないでしょうか。

私のウェブの制作スキルの関してはまだまだ修行の途中なので今後も継続的に今どきのウェブ制作について学びを深めていこうと思います。プロのコーダー／マークアップエンジニアとして仕事をしていく上では知らなかったでは済まされない領域ではありますが、正直世の中的にこのレベルまで全部できちゃう専門家の方はまだまだ多くないでしょう。

初心者向けのスクールにおいても、これらのレベルを初心者向けのカリキュラムに入れてしまうと難易度が高くなりすぎて挫折する可能性が高くなるので私が初心者向けにコースを作るとしたらこれらの内容は含めないでしょう。なので、初心者からもう一段上の技術を身に着けるためには日々研鑽を続けていく以外に道はありません。

技術のレベルアップによってマークアップの専門家として周囲をけん引していけるような技術習得を皆さんも目指してください。私もまだまだ頑張ります。

WordPressのスキルアップに欠かせない最適な書籍のご紹介

WordPressのスキルを一歩上に高める最初のステップとしてオススメの書籍を1冊だけご紹介しますのでよかったら手に取ってみてください。

サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル

https://amzn.to/2ToKAJs