もうゴールデンウィークも中盤ですが、いかがお過ごしでしょうか。あと3日でゴールデンウィークも終わってお仕事ですよ。仕事していると1週間長く感じるのに、休みはあっという間に過ぎ去りますよね。時間って不思議なものだ。
先日「GitHub Pagesで自己紹介サイト「たきつぼ」を制作・公開しました」という記事を投稿しました。自己紹介サイトを作成したのですが、先日Google先生に審査をしてもらったら怒られてしまったので、怒られないようにしようというお話です。
Google先生「次世代フォーマットで画像を配信せよ」
Googleが提供するサービスに「PageSpeed Insights」というものがあります。ページの速度を計測・分析してくれるサービスなのですが、たきつぼを分析してもらった結果、「次世代フォーマットで画像を配信せよ」とお叱り（アドバイス）を受けました。
現在主流の画像フォーマットは、JPG、PNG、GIFの3種類だと思うのですが、Google先生曰く「これらのフォーマットは古くて読み込みが遅いから、WebPを使いなさい」とのこと。ちなみにWebPはGoogleが開発した次世代画像フォーマットです。
WebPって何なの？
ではGoogle先生が開発し、Google先生が「次世代画像フォーマット」と自画自賛するほどのWebPとは何なのか。あ、WebPは「ウェッピー」と読むそうです。画像フォーマットって、どれもぱっと見じゃ読めないですよね。なんでこんな変な名前を付けるんだか。
WebPは簡単に言うと、JPGやPNG同じくらいの画質で、ファイルサイズを小さくできる。かつアニメーションもできる。かつ透過にも対応している。という流石Google先生が自画自賛するだけあって、超優秀な画像フォーマットなんです。
JPGはファイルサイズは比較的小さいものの、透過に対応しておらず、非可逆圧縮のため保存を繰り返すとどんどん劣化していきます。また、アニメーションをさせることはできません。PNGファイルは透過に対応しており、可逆圧縮のため保存を繰り返しても劣化せず、apngを使用することでアニメーションにも対応していますが、ファイルサイズはJPGよりも大きい。GIFは透過・アニメーションに対応し、ファイルサイズも小さいのですが、256色までしか再現されず、風景などの写真をGIFで保存するととんでもないことになります。
言葉だけではわかりにくいと思うので、簡単に表を作りました。
| 画像フォーマット | WebP | JPG | PNG | GIF |
|---|---|---|---|---|
| 圧縮方法 | 可逆圧縮 / 非可逆圧縮 | 非可逆圧縮 | 可逆圧縮 | 可逆圧縮 |
| ファイルサイズ | 小 | 中 | 大 | 小 |
| 透過 | 可 | 不可 | 可 | 可 |
| アニメーション | 可 | 不可 | 可 | 可 |
| 色数 | 1677万7216色 | 1677万7216色 | 256色 / 1677万7216色 | 256色 |
ファイルサイズは当然画像によって異なるので、あくまでも目安としてお考え下さい。ただWebPに関してはGoogleが下記のように公表しています。
WebP のロスレス画像については、PNG と比較して 26% 縮小されています。WebP のロッシー画像は、同等の SSIM 品質インデックスで、同等の JPEG 画像より 25 ～ 34% 小さくなります。
可逆圧縮 WebP では、透明度（アルファ チャンネルとも呼ばれます）が発生します。ただし、費用はわずか 22% の追加になります。ロッシー RGB 圧縮が許容される場合は、ロッシー WebP も透明度をサポートします。通常、PNG と比較してファイルサイズは 3 倍小さくなります。
アニメーション WebP 画像では、可逆、可逆、透明性がすべてサポートされており、GIF や APNG よりもサイズを小さくできます。
Googleの言うことを鵜呑みにするならば、大抵の場合はWebPが一番ファイルサイズが小さくなるでしょう。
これまで、アニメーションをさせるならGIF、透過画像はPNG、風景などの写真はJPGと、使途ごとにフォーマットを変えなければならなかったのが、WebPの登場によって、WebPに一本化することができるようになりました。これは便利。
WebPのメリット・デメリット
WebPのメリット
WebPのメリットは上記のように、これまでJPEG,PNG,GIFと用途ごとに書き出すフォーマットを変えていました。しかしWebPはそれぞれの良いとこ取りをしているので、WebPで書き出せば大抵の場合は問題がありません。
また、ファイルサイズが小さくなるということはサイトの読み込み速度が速くなるため、SEOやユーザビリティの観点からもメリットと言えます。読み込みが遅いサイトはイライラしますし、離脱率が上がる原因にもなりますからね。
他にも、例えばはてなフォトライフは月300MB、たきつぼを公開しているGitHub Pagesでは1GB、アメブロは1TBなど、上限が決まっているサービスを利用する際は、WebPを使用することで保存可能な画像の枚数が増えるといったメリットもあります。容量無制限のサービスだったらあまり関係ないですが。
WebPのデメリット
しかし、WebPにはデメリットもあります。
1番は対応しているサービスがまだ少ないという点ですね。はてなブロガーはおそらく画像をはてなフォトライフにアップロードしていると思います。実ははてなフォトライフはWebPに対応していません。なので、はてなブログでWebPを使いたい場合ははてなフォトライフ以外のサービスを利用する場合があります。アメブロも同じでWebPの画像をアップロードすることはできませんでした。
また、Windowsに標準搭載されているペイントは、WebPを開くことはできますが、WebP形式のまま保存することができません。ペイント3Dに至ってはWebPを開くことすらできません。また、JPEGなどをクリックするとフォトが開くのですが、WebPはフォトソフトでは閲覧できません。
SafariがWebPに（渋々）対応したことによって、大抵のブラウザではWebPが表示されますが、サービスやソフトなどはまだ対応しきれていないんですね。Photoshopなどの有料ソフトは対応しているのですが、無料のものはまだ対応していないものが多い印象です。
WebPは実際きれいなの？
ここまでWebPのことを長々と書いてきましたが、では実際WebPは綺麗で、ファイルサイズも小さいのか、実際に確認していただければと思います。ただ、はてなブログはWebPに対応していないので、WebPをJPGに再度変換しています。あくまでも参考程度にご覧ください。
130KB (JPG) → 92.3KB (92.3KB)
まずは、背景がごちゃごちゃした画像です。ぱっと見、違いは分からないですね。しかしファイルサイズは23%ほど削減しています。概ねGoogleの発表通りの圧縮率ですね。
26.5KB (JPG) → 11.2KB (WebP)
つづいて繊細な表現が必要な画像です。彼岸花は花が複雑に絡み合い、細い線のようなおしべ・めしべがあり、繊細な表現が必要です。しかし、これはぱっと見で分かるほど劣化していますね。劣化と言ってもガビガビではなく、全体的にぼやけている印象です。
後述しますがJPGからWebPへの変換はSquooshという、これまたGoogle先生が提供しているツールを使用しているのですが、qualityを100、Effortを0にしても全体的にぼやけていました。Lossless（非可逆圧縮）だとぼやけることは無かったのですが、それだとむしろJPGよりもファイルサイズが大きくなります。
他の彼岸花の画像もぼやけているので、もしかしたら繊細な表現が苦手なのかもしれません。上記のように非可逆にするとJPGよりファイルサイズは大きくなるので、もし気になるようだったらJPGの方が良いかもです。特に写真家の方とかは。
気にならない方であればファイルサイズは50％以上削減できるので、WebPで良いと言えるでしょう。僕は写真を生業としている人ではないので気にせずWebPに差し替えました。
35.9KB (JPG) → 11.8KB (WebP)
つづいてテキストが入った画像です。テキストもくっきりと表現されていますね。ほかの部分もぱっと見では違いが分かりません。それでファイルサイズが約33%削減できるので、テキストの入った画像に関してもWebP一択ではないでしょうか。
まとめると、ごちゃごちゃした画像や、テキストの入った画像はWebP、繊細な表現が求められる画像は、きれいに表示したければJPG、気にならなければWebPという感じでしょうか。
圧縮率は後述するSquooshで自由に調整できるので、あくまでも参考程度に。
WebPに変換する方法
WebPのデメリットの際に記述しましたが、Windowsに標準搭載されているペイントやペイント3DではWebPに書き出しをすることができません。ここではJPGやPNGなどからWebPに変換する方法をご紹介します。
Squoosh - Googleが提供する画像圧縮サービス
出典：https://squoosh.app/
SquooshはGoogleが提供する画像圧縮サービスです。画像圧縮はローカル上で行われ、サーバーには送信されないためセキュリティ・プライバシー面でも安心です。そして、圧縮率が選べるので、なるべくきれいにしたかったら低圧縮率、多少荒くなってもいいのでファイルサイズを小さくしたいという方は高圧縮率と選べます。
ただ1枚ずつしか圧縮できないため、膨大な量を圧縮したいという方には向いていないと思います。まとめてできるようにアップデートが来たらもうこれ一択です。
画像をWebPに変換 - サルワカ道具箱
出典：https://saruwakakun.com/tools/
つづいて、Webのお勉強をしていれば必ず出会うことになるであろう、かの有名なサルワカさんが提供するツールです。ファイルを追加するだけで、自動で変換をしてくれます。こちらはSquooshとは違い複数枚をまとめて変換できます。また、Squoosh同様に画像はサーバーに送信されないので、セキュリティ・プライバシー面でも安心です。
ただ、圧縮率を調整できないので、もし調整したいという方はSquooshの方がいいと思います。
Photopea - 無料版Photoshop？超高機能のオンライン画像編集アプリ
出典：https://www.photopea.com/
最後にご紹介するのがPhotopea。無料版Photoshopと言っても過言ではないほど超高機能のオンライン画像編集アプリ。オンラインの画像編集アプリなので、ソフトをPCにインストールする必要がありません。そして、ここで紹介しているということはWebPにも対応しています。圧縮率も調整できるので、もし変換や圧縮だけでなく画像の編集もしたいという方であれば、Photopeaを使うと良いと思います。あと、PCの性能にもよると思いますが、Photoshopよりも動作が軽いのでPhotoshopの重さにイライラしている方にもおすすめです。
JPGからWebPに変えたらファイルサイズを約7割削減できました
画像左側がWebP、右側がJPGのフォルダなのですが、WebP側は998KB、JPG側は3.11MBとあります。WebPに変換したことによってデータのサイズが約7割削減されました。これはすごい。
もちろん圧縮率であったり、大元の画像によってどれほど削減できるかは変わってきますが、あまり劣化がなくぱっと見で違いが分からないのであればWebP一択ですね。
というわけで、WebPのご紹介記事でした。
ちなみに、JPGからWebPに差し替えた後にPageSpeed Insightsで再度Google先生に分析してもらったところ、PCではパフォーマンスのスコアが3上昇、SPではなぜか1下がりました。いや何で？笑
ただファイルサイズが小さくなっていることは確実ですし、「次世代画像フォーマットを使え」というお叱りもなくなったので、一応効果はあるようです。
サイトの表示速度が遅くてお悩みの方は検討してみてはいかがでしょうか。
