はじめに
Webサイト(Webアプリ)のパフォーマンス改善のためにWebサイトで利用している画像ファイルをWebP(ウェッピー)に変更するといった記事がZennでも増えてきました。
WebPは、Googleが開発した画像フォーマットで、画像の圧縮率が高く、Webサイトの表示速度の高速化に有利に働きます。
古いブラウザ、いわゆるレガシーブラウザでは、WebPに対応していなかったりはしますが、「IE11」はサポート終了から約2年が経過していますし、「macOS 10.15 Catalina」の「Safari15」対応も行うといった要件でもなければ、使用されているシェアから言ってもWebPに対応していないブラウザは無視してもよいのではないかと思います。
なので、自分もWebPを利用していこうと考えていたのですが、ふとあることに気づきました。
「そういえば、Zennの記事の画像をWebPにしてないな…」
というわけで、自分が管理しているアプリでWebPを利用してみる前に、Zennの記事でWebPを試してみることにしました。
WebPファイルを用意する
試すといってもWebPファイルを用意しないと試せませんので、まずはWebPファイルを用意します。
各画像フォーマットのWebPへの変換方法など、Zennに投稿されている記事にもいくつかありましが、自分は昔からアプリで使う画像の作成にPhotoShopとGIMPを愛用しているため、このふたつでWebPファイルを作成してみることにしました。
PhotoShopでWebPファイルを作成する
まずはAdobe PhotoShop 2024でWebPファイルを作成してみます。
PhotoShopは画像編集アプリの中で世界的に最も有名なアプリといっても差し支えないでしょう。
無料ではありませんが、画像編集で必要な機能は網羅されており、WebPファイルの読み込み、保存も可能です。
PhotoShopでのWebPファイル作成は簡単で、既存の画像ファイル、またはPhotoShopデータ(PSDファイル)を開き、ファイルのメニューから「コピーを保存」(または「別名で保存」)を選択し、開いたダイアログの「ファイルの種類」を「WebP」とするだけでWebPファイルが作成できます。
保存時の設定はデフォルトのまま、「劣化」ありで「画質」を100としています。
WebPファイルが作成できました！
「幅：553px 高さ：553px」の画像で、ファイルサイズは64.9KB(66,462バイト)になりました。
今回使用した画像をPNGで保存した場合、ファイルサイズは152KB(156,643バイト)でしたので、PNGファイルと比べると、「画質」が100でも4割ぐらいのファイルサイズになるようです。
※PNGとWebPのファイルサイズの比較結果は画像によって異なり、色数の少ない画像ではWebPの方がわずかに大きくなる場合もあります。
GIMPでWebPファイルを作成する
PhotoShopは無料で使えないため、次は無料で使えるGIMP 2.10でWebPファイルを作成してみます。
GIMPは無料でありながら、機能はPhotoShopに匹敵し、PhotoShopと同様にWebPファイルの読み込み、保存が可能です。
GIMPでのWebPファイル作成も簡単で、既存の画像ファイル、またはGIMPデータ(XCFファイル)、PhotoShopデータ(PSDファイル)を開き、ファイルのメニューから「名前を付けてエクスポート」を選択し、開いたダイアログの「名前」に表示されたファイル名の拡張子を「.webp」に変更するだけでWebPファイルが作成できます。
保存時の設定はPhotoShopのデフォルトの設定に合わせて「Lossless」なし(劣化あり)、「Image qualiy」を100、「Alpha qualiy」を100としています。
GIMPでも問題なくWebPファイルが作成できました！
こちらのファイルサイズは61.8 KB (63,298 バイト)で、PhotoShopで作成したときの64.9KB(66,462バイト)よりも少し小さくなりました。
今回はPhotoShopデータ(PSDファイル)をGIMPで読み込んだので、GIMPで読み込めなかったデータ分が落ちた可能性がありますが、パッと見た感じでは品質に違いを感じなかったので、GIMPでWebPファイルを作成しても問題なさそうです。
記事の画像をWebPにする
WebPファイルも作成できましたので、さっそく記事にWebPファイルの画像を載せていきましょう。
Zennの記事を投稿したことのある方であれば、ご存じかと思いますが、「画像を貼る」で画像ファイルをアップロードできます。
このとき、画像をアップロードするときのダイアログを確認してみましょう。
カスタムファイル(*.png;*.jfif;*.pip;*.jpg;*.pjpeg;*.jpeg;*.gif;*.webp)と表示されています。
※表示される拡張子の一覧はブラウザによって異なる場合があります。
この画像ファイルの拡張子の一覧は以下のようにinputタグのaccept属性を設定すると表示されるようになります。
<input type="file" accept="image/png, image/jpeg, image/gif, image/webp">
「拡張子はもっと表示されていたのに少なくないか？」と思うかもしれませんが、jpeg系統のファイルフォーマットは多く、「image/jpeg」とするとjfifなどのjpegと同様のアルゴリズムでエンコードされているファイルフォーマットの拡張子も表示されます。
拡張子の一覧に「.webp」があってもアップロード可能とは限りませんが、あえて「image/webp」と設定されているあたり、いけそうな感じがします。
では、実際に画像ファイルをアップロードしてみましょう。
アップロードした画像
今回作成したWebPファイルの画像をZennの記事で表示できました！
念のため、別のファイルフォーマットではなく、ちゃんとWebPファイルとしてアップロードされているか記事のプレビューに表示された画像を保存してみます。
アップロードされている画像がWebPファイルであることが確認できました。
プロフィール画像もWebPにできる？
さて、Zennの記事の画像をWebPにしたら、プロフィール画像もWebPにしたいところです。
Zennの記事と同様にプロフィール画像でもWebPファイルを使用してみました。
(おっ、うまくいったかな…)
表示された画像を先ほどと同様に保存してみます。
表示されているのはjpegファイルのようです。
つまり、jpegに変換されるのでプロフィール画像でWebPを利用する意味は現状、特にないと言えそうです。
まとめ
以上がZennの記事の画像をWebPファイルにしてみた際の手順や結果になります。
なお、今回の記事の画像は一部だけでなく、全てWebPファイルとしています。
Webサイトの読み込み速度を速くするためにWebPを採用する予定でしたら、まず自分の投稿するZennの記事の中でWebPを活用してみましょう！
参考文献
この記事は以下の情報を参考にして執筆しました。
Discussion