![26. [LT]WebP is smaller than PNG](https://image.listen.style/img/KRjxUZa2zFy0SMzw-sBrqI-Wx49PbRoH9jMjEXFE1r0/resize:fill:1200:1200/aHR0cHM6Ly9pbWFnZS5saXN0ZW4uc3R5bGUvcC8wMWpyeHAxcjVxcmR3bXdqMWo2MjBqYTAzaC9pbWFnZXMvenhzenJSNGpnV0c5NXV0SGFHR0RzbkVsdXJINDZneFVDU0pVWGdwdi5wbmc.avif)
WebPとPNGの特徴・画質比較
こんにちは。LTやります。LTのテーマは、WebPはかなり小さくなるみたいです。WebPというのは、画像ファイルの形式です。WebPと書いて、多分WebPと読むのが一般的みたいですが、僕は結構WebPと呼ぶことが多いです。
世の中には、すごくたくさんの種類の画像形式があると思うんですけれども、僕の知っている歴史で言うと、BMP、ビットマップファイルというのがあり、それがすごく圧縮されて小さくなったJPEG、JPGファイルというのがあり、その後に比較的小さくなる、ビットマップよりは小さくなるけれども、あまり劣化しなくできたりとか、あと、
透明にして背景を消すみたいなことができるようになったPNGファイルですね。それを経てですね、今WebPがかなりメジャーになってきているのかなというふうに思います。これはすごく画像も小さくなるし、透過色も入れられるしというところですね。
PNGとWebPでどれくらいサイズが変わるのか、もちろん画質は劣化する、全く劣化しないわけではないと思いますけれども、劣化すると言ってもどれくらいなのか、めちゃめちゃもうパッと見てわかるぐらいすごい劣化なのか、パッと見わからないぐらいなのかというのを確認したいなと思いました。
もちろん閲覧環境によるところは大きいと思うので、4Kディスプレイとかそういうのを持っている人が大きく大きな画面で見比べるのと、iPhoneみたいなスマホで見比べるのでは全然変わってくるとも思いますけれども。
ブラウザ製の画像変換ツール
最近趣味の一つになってきていると言ってもいいぐらいにやっているのが、Vibe CodingというAIに結構いろいろ書いてもらうみたいな、そういうのをやってますけれども、今回ブラウザだけで完結するローカルPNG WebP変換ツールというのを作ったので、これで変換してみたいと思います。
LISTENのイベント画像を軽量化
そもそもなぜこれをやろうかと思ったかという話なんですけれども、LISTENのイベント機能があると思うんですけれども、イベント機能の画像がサービスのほうで変換あまりされてなさそうかなという印象がありまして、自分が上げた画像ファイルがそのまま配られているのかなというふうに見受けられたんですけれども、これのサイズが大きいとLISTENのトップ画面とか見るときにどんどん重くなっていくので、
それをもっと自分のやつを小さくすることで軽くできるんじゃないかなと思ったというのが本当なんです。以前は各ポッドキャストのカバーアートみたいなのも同じような状況だったように思うんですけれども、今は多分変換されて軽量になったりとか、デバイスに応じているのかどうかわかんないですけれども、すごく軽量になっているような印象があります。
イベントの画像についてはまだ見たいようなのかなという印象があったのでやってみたというところです。試しにやってみるのが第6回テックLTポッドキャストカレンダーの画像になります。今見ると2453キロバイト、まあ2.5メガっていう感じですかね。これをツールにドラッグ&ドロップします。概要欄にリンク貼っておきます。
そうすると、元画像と高画質、標準、軽量の3パターンで作った画像がダウンロードできるようになります。
ウェッピーの設定として画質を設定できるみたいなんですけれども、軽量にすると155キロバイトにまで小さくなるみたいです。元画像が100とすると6%まで小さくなるので、10分の1以下、20分の1ぐらいのサイズに落とせることがわかります。
ダウンロードしてみると確かに155キロバイトでした。ちなみに今回の第7回は45キロバイトまでになっています。サイズも調整したかなと思います。
画像軽量化による表示改善
というわけで、極力軽くすることでリスニーユーザーの皆さんにも貢献できるんじゃないかなと思いました。
まあとはいえ、LISTENのサービスの方で変換するみたいなことが対応されれば、多分一瞬で片付く問題のような気がしつつ、今日現在の部分では改善できそうということでやってみたという話でした。
ということで、LTを終わります。ご清聴ありがとうございました。
