サイトの画像、まだJPEGやPNGのまま使っていませんか？
「WebPって聞いたことはあるけど、変換する必要があるのかよく分からない」と感じているなら、ちょっと確認してほしいことがあります。
知らないまま放置していると、ページの表示が遅いまま。
せっかく作ったコンテンツが、読み込み速度のせいで離脱されてしまうことも少なくないです。
この記事では、WebPに変換することで実際に何が変わるのか、デメリットはないのか、初めての方でも分かるように順を追って説明します。
WebPって何？JPEGやPNGとどこが違うのか
JPEGやPNG、GIF。
画像フォーマットの選択肢はいくつかありますが、WebPはその中でも比較的新しい形式です。
名前は聞いたことがあっても、どう違うのかまで把握している方は案外少ないですよね。
Googleが作った次世代フォーマット、その特徴
WebPは、Googleが2010年に公開した画像フォーマットです。
もともとウェブ表示のために作られたもので、「画質を保ちながらファイルを小さくする」ことを最優先に設計されています。
JPEG、PNG、GIFがそれぞれ持っている機能を、WebPはひとつのフォーマットに統合している。
具体的には、写真向けの不可逆圧縮（JPEGの得意なこと）、透過処理（PNGの得意なこと）、アニメーション（GIFの得意なこと）がすべて使えます。
ひとつで何でもできる、というのがWebPの大きな特徴です。
JPEGとPNG、それぞれと比べたときの違い
JPEGと比べると、同じ画質でファイルサイズが25〜34%ほど小さくなります。
PNGと比べると、26%ほど軽量化できるというデータがGoogleから出ています。
数字だけ見ると、かなり差があります。
JPEGは写真向きで、色の微妙な変化をきれいに表現できる反面、透過処理には対応していません。
PNGは透過に対応していて、ロゴやイラストに向いていますが、写真に使うとファイルが大きくなりがちです。
WebPはこの両方の弱点をカバーしつつ、ファイルを小さくできる。
それが「次世代フォーマット」と呼ばれる理由です。
WebPに変換するとサイトはどう変わるのか
実際に変換すると、数字でどのくらい変わるのかが気になるところですよね。
具体的なデータを見ておくと、変換する価値があるかどうかの判断がしやすくなります。
ファイルサイズがどれくらい小さくなるのか
JPEGから変換した場合、同じ画質で25〜34%前後小さくなります。
たとえば500KBのJPEG画像をWebPに変換すると、330〜375KB程度になる計算です。
画像が多いページなら、ページ全体のサイズが大きく減ります。
商品画像が20枚あるECサイトなら、同じ20枚でも合計サイズが数MBは変わってくる、ということも起こります。
ページの表示速度に与える影響
ファイルサイズが小さくなると、ページの読み込みが速くなります。
Googleが発表しているデータでは、ページの読み込みが1秒遅れるごとにコンバージョン率が7%下がるという調査結果があります。
表示速度はSEO（検索順位）にも影響します。
Googleのコアウェブバイタルという評価指標に「LCP（最大コンテンツの描画速度）」という項目があり、画像が重いとここが下がります。
重い画像のままでいると、ユーザー体験もSEOも同時に損をしている状態になりやすいです。
WebPを使うときに知っておきたいこと
メリットが多いWebPですが、気になるのは「本当に使っても大丈夫？」という点ではないでしょうか。
注意点もきちんと把握した上で使うと、変換後に困ることがなくなります。
今も使えないツール・環境はあるのか
主要なブラウザ（Chrome、Firefox、Safari、Edge）では、現在WebPに対応しています。
Safariも2020年のバージョン14以降から対応しており、スマートフォンのSafariでも問題なく表示されます。
一方で、古いバージョンのブラウザやIEを使っているユーザーには表示されないことがあります。
ただ、IEのシェアは現在1%を切っており、実務上はほぼ無視できる状況です。
気をつけたいのは、画像編集ソフト側の対応です。
古いバージョンのPhotoshopやIllustratorはWebPを読み込めないことがあるので、再編集が必要な画像をWebPで保存するときは注意が必要です。
変換するときに気をつけること
変換する前に、元のファイル（JPEGやPNG）を必ず保存しておきましょう。
WebPをさらに別の形式に変換すると、圧縮が繰り返されて画質が下がることがあります。
マスターデータはJPEGやPNGで保管しておいて、ウェブで使う用にWebPに変換する、という使い分けが一般的です。
また、変換後に画像を見て確認する習慣をつけると安心です。
設定によっては想定より画質が落ちていることもあるので、変換後のファイルをブラウザで開いて目視チェックするのがおすすめです。
ブラウザだけで手軽にWebP変換する方法
変換方法は複数ありますが、ソフトをインストールしなくてもブラウザだけで完結する方法があります。
手軽さと安全性を両立したいなら、オンラインツールが便利です。
ツールを使った変換の基本的な手順
リサイズさんを使うと、ブラウザ上でJPEGやPNGをWebPに変換できます。
操作の流れはシンプルです。
まず変換したい画像をツールにドラッグ&ドロップします。
次に出力フォーマットを「WebP」に切り替えます。
あとはダウンロードボタンを押すだけで、変換済みの画像が手元に届きます。
リサイズさんは処理がすべてブラウザ内で完結するため、画像がサーバーに送信されることはありません。
大事な写真や機密性の高い画像でも安心して変換できます。
変換後に確認しておくといいこと
変換後にファイルサイズが実際に小さくなっているか確認しておきましょう。
ファイルを右クリック→「プロパティ」や「情報を見る」でKBの数字を見ると、元のファイルとの差がすぐ分かります。
また、画像をブラウザで開いて、見た目に大きな違いがないかも目視でチェックしておくと安心です。
変換後に「なんか画像が荒い」と感じた場合は、品質設定を上げて再変換してみてください。
WebPへの切り替えで、サイト表示をもっと快適に
WebPへの変換は、画像の見た目を変えずにサイトを軽くするシンプルな方法です。
JPEGやPNGより25〜34%ほど小さくなり、ページの読み込みが速くなる。
その結果、離脱率の改善やSEOにもプラスの影響が出やすくなります。
難しいことは特になく、ブラウザから手軽に始められます。
まだJPEGやPNGのままで運用しているなら、リサイズさんで試しに数枚変換してみてください。
ファイルサイズの変化を実際に確かめると、「もっと早くやっておけばよかった」と感じる方も少なくないですよ。