Cloudinaryのダイナミックフォーマット選択機能を使ってWebP形式の画像を配信してみた

Cloudinaryでオリジナル画像からWebP画像に変換して配信をしてみました。またCloudinaryのダイナミックフォーマット選択機能を使ってブラウザに最適な画像形式で配信し、Chromeの場合はWebP形式で配信されることを確認しました。

#Cloudinary

清水俊也

2018.07.06

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

清水です。画像、動画といったデジタルメディア管理、変換サービスのCloudinaryを試しています。

今回はこのCloudinaryでWebP画像の配信を行ってみました。さらにCloudinaryにはダイナミックフォーマット選択機能という、、閲覧しているブラウザによって最適な画像フォーマットを自動で判別、配信する機能があります。この機能を使うと例えばChromeでの閲覧の際には自動でWebP画像での配信となります。この点についても確認してみました。

Cloudinaryについては以下のエントリについてもご参照ください。

WebPとは

まずはWebPについてざっと確認します。Googleが開発している静止画フォーマットで、Webサイトで使用した際のトラフィック量軽減と表示速度短縮を目的としてます。例えば同一画像、同等画質のJPEGやPNG画像と比べると25-30%ほどファイルサイズを小さくすることが可能とのことです。

WebP - Wikipedia

仕様公開は2010年9月30日、で割と歴史があるフォーマットかと思います。2013年4月のDevelopers'IOのエントリでもWebサイト高速化テクニックの一つとして紹介されています。（「5，WebP」の項目）

身につけておきたいWebサイト高速化テクニック #3｜画像形式の基礎知識

ただこちらのエントリにも記載がある通り、現在でも対応しているブラウザ等環境が限られています。例えばGoogle ChromeやAndroid環境ではでは現在も引き続き対応しており、またiOS環境ではlibwebpというライブラリを使うことで表示可能となるようですが、引き続きIEやEdge、Firefox、Safariなどのブラウザではサポートされていません。

対応ブラウザが限られている状況は変わっていないのですが、それでもサイトの高速化、通信量の低減などメリットは多いフォーマットです。そのため、対応できるブラウザにはWebPを使い、未対応のブラウザには代替として別形式（JPEGやPNG）を表示する、という方法で利用が増えているようです。

CloudinaryでWebP形式に変換した画像を配信する

では実際にCloudinaryでWebP形式に変換した画像を配信してみます。今回オリジナル画像はデジカメで取った写真を利用しました。まずはCloudinaryのManagement Consoleからファイルをアップロード、Media Libraryで確認します。

画像解像度は4608x3456、ファイルサイズはこの画面からだとわからないのですが、Chromeのヘッダ情報などからContent-Length: 4146636、またContent-Type: image/jpegであることがわかります。

続いてWebPへの変換ですが、Media LibraryのEdit画面、Format & shapeの項目のFormatをデフォルトのKeep formatからWebPに変換します。変更後、[Refresh Preview]で更新するとWebP形式が確認できます。

ぱっと見、オリジナルのJPEG画像と違いはなさそうですが、こちらもChromeのヘッダ情報などを確認してみましょう。右下のURL画面から画像をChromeで直接開いてみます。なおURLについては、オリジナルとWebP画像で以下のように拡張子の違いがありますね。つまりCloudinaryからWebP画像に変換して配信するには、拡張子部分を.webpにすればよいことになります。

http://res.cloudinary.com/[Cloudinary cloud name]/image/upload/[ランダムな英数字]/[フォルダ名]/[画像ファイル名].jpg
http://res.cloudinary.com/[Cloudinary cloud name]/image/upload/[ランダムな英数字]/[フォルダ名]/[画像ファイル名].webp

ヘッダ情報からは下記のように、Content-Length: 1222858、またContent-Type: image/webpであることがわかります。

Cloudinaryで対応ブラウザにだけWebP形式に変換した画像を配信する

拡張子を変更するだけで、簡単にCloudinaryからWebP画像を配信することができました。続いて、WebP画像に対応しているブラウザのみWebP画像を配信し、その他は変換前の形式（今回ならばJPEG）の画像を配信する、ということを考えます。例えばpicture要素を使ってHTMLタグにWebP画像、変換前の画像を明記し、これを実現する方法があります。以下のページで紹介されている方法ですね。

-今話題の記事を読んで気になった- 「WebP画像形式」とは??

しかしCloudinaryを使うとより簡潔に、対応しているブラウザにはWebP形式、非対応のブラウザには他形式といった出し分けが可能です。Cloudinaryには閲覧しているブラウザによって最適な画像フォーマットを自動で判別、配信することができる機能があり、この機能を使うとChromeなどWebP形式に対応しているブラウザにはWebP画像での配信となります。

この機能（ブラウザに応じた最適な画像配信機能）の使用方法ですが、Media LibraryのEdit画面からFormat & shapeの項目のFormatをAutoに変更します。

配信用のURLは以下の形式となり、uploadの後ろ、[ランダムな英数字]の前にパラメータとしてf_autoが付いていますね。

http://res.cloudinary.com/[Cloudinary cloud name]/image/upload/f_auto/[ランダムな英数字]/[フォルダ名]/[画像ファイル名].jpg

この画像のヘッダ情報をChromeで確認してみましょう。先ほどの拡張子を.webpと変更したものと同じようにContent-Length: 1222858、またContent-Type: image/webpであることがわかります。

では、WebP形式に対応していないブラウザではどうなるでしょうか？ Firefoxでは下記のように Content-Length: 1895485、またContent-Type: image/jpegというヘッダ情報が得られました。画像形式としてはWebPではなくJPEG形式で配信されていることがわかりますね。

続いてWindows 8.1上のInternet Explorer11で確認してみます。Internet ExplorerではJPEG-XR形式で配信するとCloudinaryの紹介ページに記載があります。Content-Disposition: inline; filename="PC011025.wdp"、Content-Type: image/vnd.ms-photoという情報から確かにJPEG-XR形式であることがわかりますね。その他Contentent-Length: 1255804ということも確認できました。

なお注意点として、このブラウザに応じた最適な画像変換を行うダイナミックフォーマット選択機能f_autoですが、Akamai CDN(Cloudinary組み込みのもの）限定機能という記載がありました。

CloudinaryはプランなどによってはAmazon CloudFront含めた多様なCDNが利用できるとのことですが、その構成でこのf_autoがきちんと使えるのかは、確認したほうが良いかもしれません。

まとめ

メディア管理、変換、配信ツールであるCloudinaryにて、オリジナル画像からWebP画像に変換して配信をしてみました。またCloudinaryのダイナミックフォーマット選択機能を使ってブラウザに最適な画像形式で配信し、Google Chromeの場合はWebP画像で配信されることを確認しました。引き続きCloudinaryの多様な機能を試していきたいと思います。