WebP形式の画像を使ってみた

WordPress 5.8からWebP形式の画像が正式にサポートされました。
PNG形式やJPEG形式の画像と同様にメディアライブラリにアップロードすることができます。

当ブログでも今後はWebP形式の画像を使っていこうと考えていますが、そもそもWebP形式の画像はどうやって作るのかが分からなかったのでいろいろと調べてみました。

WebPとは

A new image format for the Web
WebP is a modern image format that provides superior lossless and lossy compression for images on the web.
Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.

https://developers.google.com/speed/webpより引用

簡単に言えば「クオリティを保ちつつ、サイズを抑えた画像フォーマット」ということになるかと思います。
サイズが小さければ通信にかかる時間も抑えられるわけですから表示の高速化に繋がります。

ちなみに、WebPはGoogleが開発しています。

作成方法

WebP形式の書き出しをサポートした各種画像編集ソフトで作成することができます。
Photoshopであればプラグインがありますし、Googleからは変換ツールが提供されています。
また、ImageMagick(convertコマンド)を使って変換することも可能です。(バージョンによってはダメな場合もあります)

変換ツール

Googleが提供している変換ツールは下記のページからダウンロードすることができます。

Google for Developers

Downloading and Installing WebP | Google for Developers

Linux用、macOS用、Windows用の各実行ファイルが提供されていますが、ライブラリなどのバージョンによっては動かないこともあります。
その場合はソースコードを各環境においてコンパイルして実行ファイルを生成してください。
ソースコードは上記ページの「Source code of WebP library and utilities.」にあるリンクからダウンロードすることができます。

フロントエンド作成

クライアントそれぞれに変換ツールをインストールしてもいいのですが、それだとバージョンアップの際に若干手間がかかりそう。
そこで、変換ツールをサーバーにインストールして、それを使うフロントエンド、いわゆるwebツールを作成しました。
WebP形式に変換したい画像ファイルをアップロードして、サーバー側で変換ツールを使って変換、変換後のWebP形式の画像をブラウザに表示して必要に応じてダウンロードするというものです。