さらなる標準対応が求められるWebPをおさらいしよう

Webサイトのパフォーマンス向上という課題は、UI/UXデザイナーやフロントエンドエンジニアをはじめとしたWeb技術者永遠のテーマです。パフォーマンス向上にはさまざまな取り組みがありますが、その中でも今回取り上げるのは、次世代画像フォーマットであるWebPです。

先日に公開されたiOS 14/iPadOS 14およびmacOS 11では、ついにWebPが標準対応されました。これは大きな進歩です。今回のアップデートで、ついに代表的なすべてのモダンブラウザでWebPが標準的に利用できるようになりました。言い換えれば、新しいiPhone・Macの登場によって、さらなるWebPの標準対応が求められるようになったと言えます。

今回は、WebPに概要について解説し、あらためて導入方法についてご紹介したいと思います。

WebP（読み、weppy、ウェッピー）は、Googleが2010年ごろから開発している、Webサイトの通信量軽減と表示速度の向上を目的として提供されている画像および映像の規格です。

透過PNGのようなアルファチャンネルも利用できるため、1つのフォーマット（.webp）でJPEG、PNG、GIFの代替となりえます。

かつてはJPEGを圧縮することでサイトパフォーマンス向上のを図っていましたが、JPEGは圧縮してしまうと画像が荒くなってしまいます。一方WebPでは、画質を保ったままオリジナルJPEGの3/4程度まで圧縮できるとされています。このおかげで、画像の品質とパフォーマンスを向上を両立しながら、コンテンツが提供できるようになるのです。

次の図は、WebPと同じファイルサイズにJPEGを圧縮した場合、どれくらい見た目の差が出るか示したものです。

この図では、261KBのオリジナル画像を、WebPで生成した39KBの画像、WebPと近いファイルサイズになるまでオリジナル画像をPhotoshopで圧縮したものを比較しています。WebPと圧縮JPEGの比較に注目してください。

JPEGでは手前の茶色い下敷きにカラーノイズが入っているほか、ノートパソコンの筐体にもブロックノイズの発生が認められ、明らかにディティールが損なわれてしまっていることが分かります。一方のWebPでは、かなり圧縮されているにもかかわらず、JPEG圧縮画像と比較してノイズが少なくコントラストもオリジナル画像と遜色ありません。ただし、ノートパソコンのキーボードに見られる数ピクセル程度のカラーは、いずれの圧縮でも色が変わってしまいました。

画質の良いほうが嬉しいですよね。

次世代通信規格である5Gが導入され、より大容量のファイルを高速ダウンロードすることができる時代に、そもそもなぜWebサイトのパフォーマンスを向上を考えなければならないのでしょうか。

ひとつは、Amazon Web Services（AWS）やMicrosoft Azureをはじめとしたクラウドコンピューティングサービスが、使った分だけ支払う従量制課金を適用しているものが多くなっているからです。ファイルサイズが大きくなればトラフィック量も増加するため、課金対象になります。

ふたつめは、近年ではほとんどのモニターが高解像度化しています。高解像度モニターで画像をきれいに表示するためには、表示サイズの4倍以上の面積の画像を用意する必要があります。

これらの理由から、優れたコンテンツを提供するためには、必然的にトラフィック量が増大し、サーバー等の運用コストが膨らんでしまいます。微々たることかと思うかもしれませんが、1日に何万何十万とアクセスされるサイトであれば、かなりの痛手です。

そこで、WebPのメリットが活かされます。WebPは画質を可能な限り維持したまま圧縮してくれるので、通信量を削減し表示速度の向上をもたらしてくれるのです。それに、高解像度ディスプレイではオリジナル画像が1/4の大きさになるので、圧縮したことによる画質劣化はほとんど知覚できません。

もし写真やグラフィックがサイトの中心的なデザインになるのであれば、あるいはECサイトや製品サイトのように大量の画像が一挙に並ぶようなサイトであれば、WebPを導入するメリットが大きいでしょう。

一方で小規模なサイトは、導入や運用コスト、保守管理の面で検討する必要があると考えます。サイトパフォーマンスは向上して然るべきですが、それに多大なコストを割いてしまっては、ビジネス的に成功とは言えないのでしょうか。

WebPはWeb上で扱われるフォーマットとされていますが、一部のOSでメディアフォーマットとして正しく認識されます。OSごとに調査してみた結果を次の表にまとめました。

＊ビュワーとは、各OSでメディアを開くデフォルトアプリケーションです。

Windowsはブラウザレベルでの対応にとどまる

Windows 10は、2017年ごろのCreators UpdateでWebP対応がされました。しかし、OSレベルでは現在でも完全対応されておらず、エクスプローラー上ではサムネイルが表示されるものの、デフォルトでブラウザによって開くように設定されています。ふだん写真などを開くフォトでは開くことはできません。

WindowsがOSレベルでは対応していないため、個人的に画像をダウンロードした際にファイルが見れなくなってしまう問題があります。これについては現状はChrome拡張機能に頼らざるを得ず、根本的な解決策はありません。

macOSはバージョン11 Big Surから、iOS/iPadOSはバージョン14から標準対応

iOS 14/iPadOS 14とmacOS 11では、OSレベルで対応されており、プレビューまたは写真に保存・表示、さらに編集することが可能です。編集すればJPEGとして扱われるため、他者に共有することも可能です。なお無編集の場合は、共有先のアプリによってはWebPとして送信されるため、受信側で表示されなくなることあるため、注意が必要です。

macOS 10.14までは、初期設定でプレビューAppが割り当てられているものの表示はできず、Chromeなどのブラウザを介して表示する必要があります。

macOS 11はいつから過半数シェアになるか

macOS 11は2020年11月にリリースされたばかりのOSであるため、まだ使っている人は多くありません。そのため「Apple製品はまだWebP導入したとは言えない」と思う方もいらっしゃると思います。そこで、日本のmacOSシェアを調べて、新バージョンが旧バージョンのシェアを追い越すタイミングを調査してみました。次のサイトで日本国内におけるmacOSのシェアがご覧いただけます。

Desktop macOS Version Market Share Japan | StatCounter Global Stats

調査によると、新旧バージョンのOSシェアが逆転するのは、リリースから3か月後の1月ごろ。また、過半数となるシェア50%を超すのは5月ごろでした。したがって、今からWebP対応してもじゅうぶん有効であることがわかります。

次に、代表的なデザイン系アプリケーションの対応状況を確認してみました。

PhotoshopやIllustrator、XDといったAdobeのアプリケーションは、2020年12月1日時点で読み込み・書き出しともに対応していません。ただしPhotoshopは、WebP開発元であるGoogleが、WebPShopという拡張機能を用意していますので、こちらをインストールすることで、読み込み・編集・書き出しできます。

前述のように、デザイン系アプリケーションの対応はまだ発展途上という状況です。そのためしばらくは、今までどおりJPEGやPNGで書き出し、そのあと別のツールを用いてWebPを作成することになるでしょう。ここでは、状況別の使い分けをかんたんに紹介します。

• 数点であればWebサービスがオススメです：Syncer WEBP変換ツール
• 大量のファイルはコマンドで一括変換しましょう：Google Official WebP Tools
• Gulp/Webppackで利用するならこちら：ImageMagick

サーバーによってはMIMEタイプが標準対応していないことがあり、テストや本番化時のトラブルとなる場合があります。ASP.NET環境であればweb.configにMIMEタイプを追加することで、これを解決できます。

WebPはpicture要素を使うのがもっとも一般的です。fallbackのimg要素を組み込んでおくことで、WebPに対応していない古いブラウザでも画像が正常に表示できるようになります。

<picture>
<!-- WebP -->
<source srcset="awesome-photo.webp" type="image/webp">
<!-- Fallback -->
<img src="awesome-photo.jpg" alt="altanate text" width="300" height="200">
</picture>

なお、Internet Expolorer 11はpicture要素の仕組みに対応していないため、ポリフィルを利用する必要があります。

<script src="https://polyfill.io/v3/polyfill.min.js?features=HTMLPictureElement">

Pugではmixin化などして記述を楽にしましょう。以下のmixinは、いつもどおりJPEGやPNGなどの拡張子を指定すると、拡張子をwebpに変換するプログラムとしています。

//- 定義
mixin webp(src, alt = '', width, height)
//- jpg/jpeg/png/gifの各拡張子をwebpに変換
- var webpSrc = src.replace(/(.+\.)jpg|jpeg|png|gif/g, '$1.webp')
picture(class!=attributes.class)
source(srcset=webpSrc, type='image/webp')
img(src=src, alt=alt, width=width, height=height)

//- 使用
+webp('awesome-photo.jpg', 'altanate text', 300, 200)

Apple製品がWebP対応した今日、通信量軽減と表示速度の向上を目指すための手段として、WebPは今後も注目されていくでしょう。今のうちにWebPに関する知識をおさえ、よりよいユーザー体験が提供できるようなWebサイトを目指していきましょう。