分室利用者のY.Nです。
前回の記事に引き続き、レスポンシブイメージの考察として、アートディレクションの提供方法について、書いてみたいと思います。
余談ですが、この記事はGutenbergというWordPress Ver.5.0からの新しいブロックエディターで書いています。使ってみたい方は、記事の編集画面で、”ブロックエディターに切り替え”というリンクをクリックして下さい。この記事の編集画面を見ると、書き方の参考になるかもしれません。
アートディレクションとは
アートディレクションというのは、簡単に言うと、画像の出し分けの事です。例えば、デスクトップ向けでは横長の画像を、モバイル向けでは縦長の画像を提供する、といった具合です。
HTMLコードの記述例
最低限のアートディレクションのみ
最もシンプルな記述例は、以下のような書き方になります。
See the Pen NWPPXVv by sp-sephiroth (@sp-sephiroth) on CodePen.
上記の書き方ですと、ウィンドウ幅が768px以下の時には縦長の画像が表示され、ウィンドウ幅が769px以上またはアートディレクション非対応の時には横長の画像が表示されます。
以下は表示サンプルになります。
アートディレクション + Retina対応
アートディレクションとRetina対応を同時にシンプルに書くと、以下のような書き方になります。
See the Pen rNaapEq by sp-sephiroth (@sp-sephiroth) on CodePen.
1個目のsourceタグでは、ウィンドウ幅が769px以上の時に、Retina非対応とRetina対応の横長画像をブラウザが自動判断して読み込む、という記述になります。
2個目のsourceタグでは、ウィンドウ幅が768px以下の時に、Retina非対応とRetina対応の縦長画像をブラウザが自動判断して読み込む、という具合です。最後のimgタグはフォールバックになります。
以下は表示サンプルになります。
srcsetに画像の倍率ではなく、wの単位を用いても記述が出来ますが、長々しくなるので省略します。
アートディレクション + Retina対応 + WebP対応
アートディレクション, Retina対応, WebP対応を同時にシンプルに書くと、以下のような書き方になります。
See the Pen rNaapXQ by sp-sephiroth (@sp-sephiroth) on CodePen.
1個目のsourceタグでは、ウィンドウ幅が769px以上の時に、Retina非対応とRetina対応の横長WebP画像をブラウザが自動判断して読み込み、2個目のsourceタグでは、そのJPEG画像を読み込む、という具合です。
3個目のsourceタグでは、ウィンドウ幅が768px以下の時に、Retina非対応とRetina対応の縦長WebP画像をブラウザが自動判断して読み込み、4個目のsourceタグでは、そのJPEG画像を読み込む、という具合です。 最後のimgタグはフォールバックになります。
以下は表示サンプルになります。
終わりに
今回は、アートディレクションについて書いてみました。
次回はレスポンシブイメージの最終回として、連載の第1回から今回までのテクニックを全て組み合わせた場合、どのような記述になるかを検証したいと思います。
