レスポンシブイメージの考察 #3 ～WebP等の別画像の提供～

分室利用者のY.Nです。

前回の記事に引き続き、レスポンシブイメージの考察として、WebP等の別画像の提供方法について、書いてみたいと思います。

別画像を提供する意味と、各種画像フォーマット

主流な画像形式というと、JPEGかPNGになるかと思いますが、仕様が規格された時期は、前者が1992年、後者が1996年との事で、あまり圧縮率が高くありません。

現在は、より高圧縮な画像フォーマットが開発されており、ブラウザが対応していれば、その画像を優先的に読み込む事で、読込時間の短縮や、通信量を節約したりできます。

近代的な画像フォーマットとして、JPEG XR, BPG, FLIF, WebP等、色々ありますが、Googleが開発元のWebPが主流の為、これを用いて記事を進めたいと思います。

余談ですが、次世代の画像フォーマットとしては、HEIFとAVIF等があります。前者は最近の各種OSで対応が進んでいるところで、後者はロイヤリティーフリーの為、Web上での普及が期待されています。

画像をWebP形式に変換するアプリやWebサービスは色々ありますが、簡単かつ有用なものを挙げると、Googleが公開しているSquooshというWebサービスがありますので、こちらの利用を推奨します。

簡単な利用手順は、以下の通りです。

別画像の読み込み等をする場合、pictureタグを使い、その中に、sourceタグ、imgタグを使う事になります。

別画像を読み込みするだけの最もシンプルな記述例は、以下のような書き方になります。

See the Pen KYXBga by sp-sephiroth (@sp-sephiroth) on CodePen.

上記の記述では、ブラウザが対応していればsourceタグのWebP画像を読み込み、IE11等のpictureタグやsourceタグに非対応なブラウザの場合はimgタグのPNG画像を読み込む事になります。

第1回目の記事のように、2倍等の画像を用意しつつ、別画像の読み込みにも対応させる記述例としては、以下のようになります。

See the Pen BEwPQo by sp-sephiroth (@sp-sephiroth) on CodePen.

下の画像は、上記の記述で画像を載せた場合になりますので、レスポンシブデザインモードで画面幅を変えたり、DPRを2や3に変えたり等、検証用としてご利用ください。

第2回目の記事のように、各種サイズの画像を用意しつつ、別画像の読み込みにも対応させる記述例としては、以下のようになります。

See the Pen vMeayw by sp-sephiroth (@sp-sephiroth) on CodePen.

次回はアートディレクションを予定しています。

投稿者Y.Nによる、前回と次回の投稿