#3 「次世代画像フォーマットとは？」
みなさんは、従来の画像ファイル形式より軽量で画質などが改善された「次世代画像フォーマット」と呼ばれる画像フォーマットをご存知でしょうか。
今回は、JPEG 2000、JPEG XR、WebP、AVIFなどの次世代画像フォーマットの特徴や、WebP・AVIFの使い方について話しました。
※ オフラインのため、音声ファイルを再生できません。ネットワーク状況をご確認の上、再度アクセスしてください。
- 橋本
- こんにちは！
- 古川
- こんにちは！
- 橋本
- ミツエーテックラジオは株式会社ミツエーリンクスのスタッフがWebデザイン、WebフロントエンドなどのWeb技術に関するニュースやツールなどをシェアしたりするためのPodcastです。 本日の司会は設計チームの橋本がつとめさせていただきます。今回のポッドキャストでは次世代の画像フォーマットについて同じく設計チームの古川さんとお話ししていきます。 古川さん本日はよろしくお願いします！
- 古川
- よろしくお願いします！
- 古川
- さて、普段橋本君も業務で画像を利用してると思うんですけど、画像をページに実装する時で特に何か気をつけてる事っていうのあります？
- 橋本
- やっぱり容量とかですかね。サイズとかってパフォーマンスに影響するので圧縮するようにその辺は心がけてます。
- 古川
- なるほど。仮に画像を圧縮した場合なんですけど、画質の劣化が起きてしまうと写真が綺麗に見せられなかったりするので圧縮って言ってもやっぱり限度がありますよね。
- 橋本
- そうですね…なんか品質を保ったままだと、その画像によっては結局そんなに圧縮できなかったりとかってありますね。
- 古川
- もちろんそのためだけではないんですけど、Webパフォーマンスが重要視されているっていう事もあって、世の中では軽量で高画質な画像フォーマットの開発っていうのが進められています。
- 橋本
- 画像フォーマットって今までだとJPEGとかPNGとかが定番だったと思うんですけど、ここ最近新しい画像フォーマットいろいろ増えてきてますよね。
- 古川
- そうですよね。橋本君はLighthouseのレポートで、次世代フォーマットの画像配信っていうメッセージを見たことがあります？
- 橋本
- ありますあります。JPEG 2000とかWebPなどのその画像フォーマットの使用がページの表示速度の向上につながるみたいな感じで推奨されるやつですよね。
- 古川
- それです。従来の画像ファイル形式より軽量で画質に対応している色相などが改善された画像フォーマットのことを次世代画像フォーマットっていう風に呼びます。 Lighthouseのレポートに載っているのがJPEG 2000、JPEG XR、WebPですね。
- 橋本
- なるほど。そのJPEG 2000とかのその3つ、それぞれの特徴を簡単に教えてもらってもいいですか？
- 古川
- はい。まずJPEG 2000なんですけどJPEG進化版のような位置づけでJoint Photographic Experts Groupによって作成されました。従来のJPEGとは違って可逆圧縮ができるようになってます。現在はSafariのみでのサポートとなってます。
- 橋本
- JPEGって今まで不可逆圧縮しかできなかったので、なんかすごい機能が進化しましたね。
- 古川
- つづいてJPEG XRなんですけど、JPEGに代わる規格としてMicrosoftが開発した画像フォーマットです。JPEGとの違いは半透明の表現もできて、こちらも可逆圧縮に対応してます。現在対応しているブラウザは IE 11のみとなってます。
- 橋本
- JPEG 2000のほうはサファリのみだし、XRの方はIE 11のみっていうのはちょっと今のWeb業界だと需要はあんまり無さそうですね笑
- 古川
- そうですよね、ちょっと厳しいと思いますね。最後にWebPなんですけど。
- 橋本
- 期待のWebPですね！
- 古川
- そうです、そのWebPなんですけど、WebPはGoogleが開発しているオープンソースの静止画フォーマットです。JPEGとかPNGと比較して約30%ほど圧縮できると言われてます。 大体のモダンブラウザで現状サポートされているんですけど（参考: Can I use）、モダンブラウザの中でも長い間Safariがサポートされてなかったんですが最近リリースされたiOS 14でようやくiOS Safariがサポートされました。 残るMac OS のSafariなんですけど、今後リリース予定のMac OS 11 Big Surに搭載のSafari 14からサポートみたいです。
- 橋本
- まだ完全に全部のブラウザでサポートされてるって訳ではないんですね。
- 古川
- そうですね。ただ、JPEG 2000やJPEG XRと比較して、サポート対象っていうのが圧倒的に広いので現時点での導入も十分検討できると思います。
- 橋本
- なるほど。
- 古川
- 実はミツエーリンクスのコーポレートサイトのメインビジュアルにも採用をしてたりします。
- 橋本
- そうだったんですね、知らなかったです。それってなんか理由はあったりしますか？
- 古川
- やっぱり、メインビジュアルなので軽量したかったていうのが一番の理由です。 具体的にはPC幅で利用してる画像についてなんですけど、フォールバックで使用しているJPEGが約189KBくらいに対してWebPは画質を劣化させないで55KBくらいまで軽量できました。
- 橋本
- ってことは大体三分の一以下ですよね！すごく軽くなりましたね！
- 古川
- そうなんですよ、純粋におお！ってなりました。
- 橋本
- ところで最近巷でAVIFってワードを聞くようになったんですけど、これも次世代画像フォーマットのものなんですかね？
- 古川
- さすが橋本君よく知ってますね！AVIFっていうのは、AV1 Image File Formatの略称なんですけど、画像は圧縮形式の1つですね。GoogleやMozilla、Netflixなどが加入するAlliance for Open MediaによってAV1というオープンソースの次世代動画コーデックが作られてるんですけど、 そのAV1のエンコード技術を転用した静止画画像フォーマットがAVIFと呼ばれてるものです。
- 橋本
- なぜ今それが話題になってるんですかね？
- 古川
- 8月26日にリリースされたChrome 85でサポートされたからですかね。 +まあ現状サポートしているブラウザはChromeのみなんですけど（参考: Can I use）Firefoxなどでも次々と実装進めているみたいです。Firefoxはフラグを設定すれば、もうブラウザ上で試せます。
- 橋本
- あっそうなんですね！
- 古川
- そうなんですよ。WebPはSafariが対応するのに10年ほどかかったんですけど、今回Alliance for Open Mediaにアップルも参画しているので、早く対応されるかもっていう風に言われている点もやっぱ注目を集めるポイントってなってますね。
- 橋本
- 確かに、Appleだけじゃなくてこの策定を進めてるチームの中にそのGoogleだったりとか、Netflixとかが入ってるって話だったんですけど、そういう多くのユーザーを抱えてる会社が集まってるってのはそれだけでも皆さんからの注目を集めますね。
- 古川
- そうですね。
- 橋本
- ずばりお伺いするんですけどこのAVIFって何が一番良かったりするんでしょうか？
- 古川
- 誤解を恐れずひとことで言うと、軽いのにとっても綺麗！ですね。JPEGと比較するとWebPは30%ほど軽量化されるって言われてるんですが、AVIFだと50%ほど軽量化されると言われてます。 可逆圧縮と不可逆圧縮の両方ともに対応していて、さらに明るさだったり、色深度、色域とかが大幅改善されたHDRをサポートしているのも注目ポイントだと思います。
- 橋本
- でもJPEGでその軽量化したフォーマットって感じなんですけど、それをさらに半分のサイズで綺麗に実装できるところがすごいいいところですね。
- 古川
- すごいですよね。
- 橋本
- そういった新しい画像フォーマットっていうのはもう実案件とかで使える感じですか？
- 古川
- picture要素を利用すれば導入は可能だと思います。ただし、そのブラウザサポートについてまちまちなので必ずそのフォールバック用の画像を用意する必要があります。 用いるときはsource要素にtype属性を付与してフォールバック用に画像を併記するといいと思います。 やっぱりそのフォールバックが必要なので次世代型フォーマットの画像と普及している形式の画像と最低2枚必要になってくるじゃないですか。 導入するんだったら、その運用コストとの兼ね合いで導入する範囲だったり導入するのかしないのかっていうのを決めたいですよね。自動化とかがその辺できるといいと思うんですけど。
- 橋本
- 確かにそうですね。そのWebPとかAVIFとかは試せるなら試してみたいですよね。
- 古川
- 実はWebPもAVIFもGoogleが提供しているSquooshっていうサイトで手軽に試すことができます。
- 橋本
- あ、そうなんですね！
- 古川
- そうなんですよ。このサイトはPWAなので、デスクトップアプリとしても利用が可能になってます。他にはCLIツールだと、いろいろあるんですけど、WebPは公式が提供しているlibwebpっていうのが有名ですかね。 あとはAVIFのコンバーターはこちらも公式が出しているライブラリーでlibavifっていうのがあります。
- 橋本
- そうやって公式がいろいろとライブラリ提供してくれてるっていうのはありがたいですね！
- 古川
- そうですよね！
- 橋本
- やっぱり自分はさきほど軽量さに衝撃を受けたあのAVIFを試してみたいんですけど、他に実装で注意すべき点とかってあったりしますかね？
- 古川
- AVIFっていうのはビデオ形式の一部なのでビデオにない機能っていうのが、利用できないようになってるんですよ。 例えばそのうちの1つがプログレッシブレンダリングなんですけど、プログレッシブレンダリングっていうのは画像表示の方法の1つで、画像全体をまずは低い解像度で表示してこれを徐々にだんだんきれいに表示していく方法なんですけど、 普段ウェブサイト閲覧してる時に読み込みが遅い画像だとそのグレーの画像から表示されて、画像が綺麗に表示されるっていう風に見えたりするじゃないですか。
- 橋本
- そうですね。
- 古川
- あれがプログレッシブレンダリングですね。そのAVIFはプログレッシブレンダリングに対応してないので、見た目として画像が読み込まれるまで表示されるかされないか、のどちらかの見え方になります。なのでその点に注意して使ってみると良いと思います。
- 橋本
- ありがとうございます！ではその辺を注意しながら使用してみようと思います！
- 橋本
- はい。というわけで、今回のミツエーテックラジオでは画像フォーマットについてお話ししていきましたがいかがだったでしょうか？パフォーマンス向上にもつながりますので次世代画像フォーマットを積極的に採用していきたいですね！
- 古川
- ですね。引き続き注目していきたいと思います。
- 橋本
- 最後にミツエーリンクスではスマートなコミュニケーションをデザインしたいUIデザイナー、UI開発者を募集しています。採用サイトではオンライン説明会やオンライン面接なども行っていますので是非チェックしてみてください。
- 古川
- またこのポッドキャストはApple Podcast、Google Podcast、Spotifyでも配信してますので、お好みのプラットフォームでフォローすると最新のエピソードをすぐに視聴できます！ぜひご活用ください。
- 橋本
- では今日はこの辺で！ありがとうございました！
- 古川
- ありがとうございました！