清水俊也(79)17この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。画像、動画といったデジタルメディア管理、変換サービスのCloudinaryを試しています。今回はこのCloudinaryでWebP画像の配信を行ってみました。Cloudinaryにはダイナミックフォーマット選択機能という、、閲覧しているブラウザによって最適な画像フォーマットを自動で判別、配信する機能があります。この機能を使うと例えばChromeでの閲覧の際には自動でWebP画像での配信となります。この点についても確認してみました。Cloudinaryについては以下のエントリについてもご参照ください。Developers.IOWebPとはまずはWebPについてざっと確認します。Googleが開発している静止画フォーマットで、Webサイトで使用した際のトラフィック量軽減と表示速度短縮を目的としてます。JPEGやPNG画像と比べると25-30%ほどファイルサイズを小さくすることが可能とのことです。Wikipedia仕様公開は2010年9月30日、で割と歴史があるフォーマットかと思います。2013年4月のDevelopers'IOのエントリでもWebサイト高速化テクニックの一つとして紹介されています。#3|画像形式の基礎知識ただこちらのエントリにも記載がある通り、現在でも対応しているブラウザ等環境が限られています。ChromeやAndroid環境ではでは現在も引き続き対応しており、またiOS環境ではlibwebpというライブラリを使うことで表示可能となるようですが、引き続きIEやEdge、Firefox、Safariなどのブラウザではサポートされていません。対応ブラウザが限られている状況は変わっていないのですが、それでもサイトの高速化、通信量の低減などメリットは多いフォーマットです。そのため、対応できるブラウザにはWebPを使い、未対応のブラウザには代替として別形式(JPEGやPNG)を表示する、という方法で利用が増えているようです。CloudinaryでWebP形式に変換した画像を配信するでは実際にCloudinaryでWebP形式に変換した画像を配信してみます。今回オリジナル画像はデジカメで取った写真を利用しました。Libraryで確認します。image/jpegであることがわかります。formatからWebPに変換します。Preview]で更新するとWebP形式が確認できます。見、オリジナルのJPEG画像と違いはなさそうですが、こちらもChromeのヘッダ情報などを確認してみましょう。右下のURL画面から画像をChromeで直接開いてみます。URLについては、オリジナルとWebP画像で以下のように拡張子の違いがありますね。CloudinaryからWebP画像に変換して配信するには、拡張子部分を.webpにすればよいことになります。image/webpであることがわかります。Cloudinaryで対応ブラウザにだけWebP形式に変換した画像を配信する拡張子を変更するだけで、簡単にCloudinaryからWebP画像を配信することができました。続いて、WebP画像に対応しているブラウザのみWebP画像を配信し、その他は変換前の形式(今回ならばJPEG)の画像を配信する、ということを考えます。picture要素を使ってHTMLタグにWebP画像、変換前の画像を明記し、これを実現する方法があります。以下のページで紹介されている方法ですね。「WebP画像形式」とは??しかしCloudinaryを使うとより簡潔に、対応しているブラウザにはWebP形式、非対応のブラウザには他形式といった出し分けが可能です。Cloudinaryには閲覧しているブラウザによって最適な画像フォーマットを自動で判別、配信することができる機能があり、この機能を使うとChromeなどWebP形式に対応しているブラウザにはWebP画像での配信となります。shapeの項目のFormatをAutoに変更します。配信用のURLは以下の形式となり、uploadの後ろ、[ランダムな英数字]の前にパラメータとしてf_autoが付いていますね。name]/image/upload/f_auto/[ランダムな英数字]/[フォルダ名]/[画像ファイル名].jpgこの画像のヘッダ情報をChromeで確認してみましょう。image/webpであることがわかります。image/jpegというヘッダ情報が得られました。画像形式としてはWebPではなくJPEG形式で配信されていることがわかりますね。Explorer11で確認してみます。ExplorerではJPEG-XR形式で配信するとCloudinaryの紹介ページに記載があります。image/vnd.ms-photoという情報から確かにJPEG-XR形式であることがわかりますね。1255804ということも確認できました。CDN(Cloudinary組み込みのもの)限定機能という記載がありました。CloudFront含めた多様なCDNが利用できるとのことですが、その構成でこのf_autoがきちんと使えるのかは、確認したほうが良いかもしれません。まとめメディア管理、変換、配信ツールであるCloudinaryにて、オリジナル画像からWebP画像に変換して配信をしてみました。Chromeの場合はWebP画像で配信されることを確認しました。引き続きCloudinaryの多様な機能を試していきたいと思います。796,356クラスメソッドAWSチーム清水です。トレードマークは帽子と黒ぶちメガネ。リモート】クラスメソッドの会社説明会を開催しますクラスメソッドでは、AWS・AI・ビッグデータ・モバイルなどの技術職や営業のメンバーとして一緒にお仕事をする仲間を大募集しています。#cmdevio新型コロナウイルスの感染拡大を受け、本イベントを延期させていただくことになりました(開催時期未定)。お申し込みいただいた皆様には大変申し訳ございませんが、何卒ご理解いただけますようよろしくお願いいたします。AWSについてライトに色んな情報交換をしましょう。濱田孝治371re:Invnetの動画検索でもめちゃくちゃ便利ですが、その他ブログやホワイトペーパーやGitHubも横断検索できるので、是非一度使ってみてください。CAFEの他、NTTデータとセブンイレブンの取り組みや、サインポスト、Zippinなどの各社と流通・小売業との連携を業界マップに作成してみました。PolicyのConditionにaws:CalledViaというキーが追加されました。いったキーなのかご説明します。夏目祐樹410こんにちは、CX事業本部の夏目です。MacのタッチバーのタッチIDが非常に便利なのですが、Terminalでsudoを叩かないと行けないときに使えたらなぁと思ったので、情報を共有します。濱田孝治371re:Invnetの動画検索でもめちゃくちゃ便利ですが、その他ブログやホワイトペーパーやGitHubも横断検索できるので、是非一度使ってみてください。臼田佳祐296ワークフロー自動化OSSのn8nをAWS環境で建てて検証してみました。非常に期待できるサービスです。Fargateの勉強をしています。使ってみたい方は参考にしてください。洋介256SnowflakeがAWSの東京リージョン上で稼働するようになりました。データを日本に置けます。クラスメソッド株式会社が運営するAWS・iOS・HTML5に関する技術情報サイトです。