サイト表示を高速化させたいにゃあ。画像サイズをもっと軽くできれば…
画像を軽量化したいならWebP形式にしてみたらどうかにゃ？
うぇっぴー！？それは何かにゃ？可愛い響きだにゃ
WebPとは？メリットとデメリット
WebP(ウェッピー)とは、Googleが開発した画像フォーマット形式のことです。仕様が発表されたのは2010年と結構前ですが、対応ブラウザが少なくなかなか浸透しませんでした。近年、主要なブラウザであるChrome、Firefox、Safari、Microsoft Edgeが対応したので、WebPの利用も広がってきています。
WebPの特徴とメリット
WebPの最大のメリットは圧縮しても画質の劣化が少ないことです。画像の軽量化ができ、ページの表示速度が速くなります。Webサイトの高速化はSEOにおいて重要な課題の一つです。表示に時間がかかるとそれだけユーザーの離脱に繋がってしまいます。SEOの観点から、サイトの画像をWebP化することには大きなメリットがあると言えるでしょう。
WebPはJPEGのような非可逆圧縮にもPNGのような可逆圧縮にも対応しています。圧縮率はJPEGやPNGよりも25~30%程度高いと言われています。また、透過やアニメーションにも対応しているので、JPEG/PNG/GIFという主流の画像フォーマットの特徴を全て有していることになります。この3つをWebPに置き換えることができるわけです。フォーマットに悩む必要がなくなりますね。
- JPEGやPNGより高圧縮率なのに画質が良い
- ページの表示速度が改善できる
- 画像フォーマットを使い分けなくて良い
- 可逆圧縮も非可逆圧縮もできる
- 背景透過に対応
- GIFのようなアニメーションに対応
WebPのデメリット
IEやiOS13以前のSafariなど、古いブラウザはWebPに対応していません。現在は主流なブラウザは対応しているためそれほど大きなデメリットではありませんが、古いブラウザへの対策が必要な場合はWebP非対応ブラウザ用に代わりの画像を表示させる出し分けが必要になってきます。
また、WebPには画像変換の手間がかかることがあります。とはいえPhotoshopはWebPに対応してますし、今後は対応ソフトは増えるはずなので、このデメリットもなくなっていくと思われます。ただ、Photoshopを利用していないブロガーさんや個人サイトの運営者の方も多いでしょうし、画像変換の手間がかかるとなるとそれが一番のデメリットにはなると思います。
- 古いブラウザはWebPに対応していない
- 非対応ブラウザへの対策をするなら画像の出し分けが必要
- 画像変換の手間がかかる場合がある
おすすめの画像変換サービス
WebPを使いたいけどPhotoshopは持ってないという方には、Squooshという画像圧縮・変換サービスがおすすめです。SquooshはGoogleが開発したツールで、WebP以外にも様々な画像フォーマットに変換でき、リサイズや圧縮も可能です。
Squooshの使い方と注意点
SquooshでWebP化すると、画像が劣化することがあります。実際、なないろがSquooshでPNGをWebPに変換した時に劣化しました。高圧縮率でも劣化を最小限に抑えるとは一体…？？？となりました。圧縮方式を変えることで解決しましたので、その設定をお伝えします。
Squooshにアクセスしたら、変換したい画像をページにドロップするか、画面中央のマークをクリックして画像を開いてください。圧縮前後を確認できるようになっていて、中央より左側がオリジナル画像、右側が圧縮後の画像です。「Compress」のところで「WebP」を選択します(WebP v2というのもありますが、こちらは不安定です)。「Lossless」にチェックを入れてください。Effortは最大の9にしておきます。圧縮後のデータサイズと品質に問題がなければ右下をクリックしてダウンロードしてください。
チェックをいれたロスレスというのは可逆圧縮のことで、PNGと同じ圧縮方式です。劣化が少ないので、WebPにするとやけに劣化するな？という方はロスレスにチェックを入れてみてください。
ただ、上記の画像をしっかり見てる方はお気づきだと思いますが、この可愛い猫ちゃんの写真は軽くなるどころか40%もデータサイズが増加しています。ロスレスのチェックを外すと52%減るので、この場合はロスレスにしない方がいいでしょう。
個人的にはこの猫ちゃんの写真はロスレスにチェックを入れなくても画質低下は気にならなかったので良いのですが、ロスレスにしないと文字がガビガビになってしまう画像とかあったので、ご自身で元画像と比較しながらロスレスにするかしないかはご判断ください。
また、WebP化するとJPEGやPNGより重くなる場合には普通にJPEGやPNGを使った方が良いです。重くなるなら本末転倒ですからね。
便利なSquooshですが不便な点もあって、それは1枚ずつしか圧縮できないことです。大量の画像をWebPにしたいという時にはちょっと不向きですね。1枚ずつ品質を確認しながらするのに向いています。
まとめ
SEO的にはメリットしかないWebP。ただ、WebPにするとJPEGやPNGよりサイズが大きくなってしまう場合や画質が劣化してしまう場合もあり、単純に全部WebPにしちゃえばOKというわけでもないのが現状です。メリットや作業量を鑑みながら、上手く導入するのが良いかなと思います。
