WebPとは？JPEG・PNGとの違いや開き方、変換方法を解説

「JPEGやPNGをWebPに変えれば、サイトの画像は軽くなる」。変換ツールに画像を入れると、元のファイルより何割小さくなったかがその場で表示されるため、形式を変えることが画像の軽量化そのものだと受け取られやすいのでしょう。実際、同じ見た目の画像ならWebPのほうが小さく保存できます。

しかし、これまで多くの企業のオウンドメディアで記事の制作と入稿を手がけてきた弊社の立場から言えるのは、画像を軽くする効果が大きいのは、形式の変更よりも表示サイズに合わせた書き出しだということです。WebPへの変換は、表示サイズをそろえた後に重ねる工程です。

本記事では、WebPの特徴とJPEG・PNGとの違いから、保存した画像が.webpになったときの開き方、サイトで使うときの変換方法まで、記事の画像を日々入稿している制作会社の視点で順を追ってお伝えします。

WebPとは

WebP（ウェッピー）とは、Googleが2010年に発表した、Webページで使うための画像ファイル形式です。拡張子は「.webp」で、Googleの最初の発表では「weppy」と読むと案内されていました。

WebPが作られた目的は、Webページに載せる画像を、見た目を保ったまま小さなファイルで配ることです。WebPの特徴は、これまで用途ごとに使い分けていたJPEG・PNG・GIFの役割を、1つの形式で担える点にあります。

• 写真を小さく保存する非可逆圧縮（データの一部を捨てて容量を減らす方式）はJPEGの役割
• 元のデータを失わない可逆圧縮と、背景の透過はPNGの役割
• 複数の画像を順に切り替えるアニメーションはGIFの役割

ChromeやSafari、Firefox、Edgeといった主要なブラウザが対応しているため、いま閲覧者の多くはWebPの画像をそのまま見られます。

WebPとJPEG・PNG・GIFの違い

WebPとJPEG・PNG・GIFの違いは、1つの形式で扱える画像の種類と、同じ見た目で保存したときのファイルの小ささです。4つの形式を並べると次のとおりです。

JPEGは文字の輪郭の周りにノイズが出やすく、GIFは1枚に使える色が256色までです。PNGは劣化しない代わりに、写真を保存するとファイルが大きくなります。

容量の差について、GoogleはWebPの開発者向けページで次の数字を公開しています。

• 可逆圧縮のWebPは、PNGより26％小さい
• 非可逆圧縮のWebPは、画質の指標（SSIM）が同じJPEGより25〜34％小さい

※ 出典：Google for Developers「An image format for the Web」

一方で、WebPに向かない場面もあります。印刷会社へ渡すデータや、相手がどのソフトで開くか分からない添付ファイルは、JPEGかPNGで渡すほうが確実です。

保存した画像がWebPになる理由と開き方

Webサイトから保存した画像が.webpになるのは、閲覧したサイトが画像をWebPで配信しているからです。多くのサイトやCMS、画像配信サービスは、ブラウザがWebPに対応しているかを通信の中で確かめ、対応していればWebPの画像を返します。

元の画像がJPEGで作られていても、ブラウザに届いた時点でWebPになっていれば、保存されるファイルもWebPです。保存したWebPは、次の方法で開いたり、JPEGやPNGに戻したりできます。

記事の制作現場では、次のような相談を受けることがあります。

Web担当者

取引先のサイトから保存した画像が.webpになっていて、画像編集ソフトで開けませんでした。拡張子を.jpgに書き換えれば使えますか。

Writers-hub
編集部

拡張子を書き換えても、ファイルの中身はWebPのままです。WebPを読めないソフトでは開けないので、プレビューやペイントでJPEGかPNGに書き出してください。他社のサイトの画像は、形式に関係なく、記事に使ってよいかを先に先方へ確かめる必要があります。

WebPをサイトで使うメリットとデメリット

自社サイトの画像をWebPにすると、画像の容量が小さくなってページの表示が速くなる一方で、古い環境で表示されない、編集ソフトを選ぶといった制約が出ます。

検索への影響は、WebPという形式そのものより、画像が軽くなった分だけページの表示が速くなる点に出ます。Google検索は、画像の形式としてBMP・GIF・JPEG・PNG・WebP・SVG・AVIFに対応しているため、WebPに変えたことで画像検索に載らなくなることはありません。

※ 出典：Google 検索セントラル「画像に関するSEOのベスト プラクティス」

表示できない環境が問題になるのは、Internet Explorerや、Safari 13以前のまま更新していない端末から見られるサイトです。古いブラウザで見る閲覧者が多いサイトでは、HTMLのpicture要素でWebPとJPEGの両方を用意し、ブラウザが表示できるほうを選ばせます。

編集ソフトの制約は、Photoshopならバージョン23.2以降で解消されています。WebPを追加の設定なしで開き、編集して保存できます。

画質の劣化を避けるには、元のJPEGやPNG、デザインのデータを残しておき、WebPは公開用に書き出すファイルとして扱います。WebPを開いて手直しし、もう一度非可逆で保存すると、保存のたびに画質が落ちていくためです。

WebPに変える前に見直す画像の表示サイズ

サイトの画像を軽くする効果が大きいのは、WebPへの変換よりも、画像の縦横のピクセル数を表示される大きさに合わせることです。画像の容量は、形式が同じならおおむねピクセルの数に比例して増えます。

たとえば、横2,400ピクセル・縦1,600ピクセルの写真を、記事の中で横800ピクセルの枠に表示するとします。横800ピクセルに縮めて書き出すと、ピクセルの数は約9分の1になります。WebPへの変換で減る容量は、Googleの数字でJPEGより25〜34％です。

形式を変える前に、画像を表示される大きさに縮めるほうが、減らせる容量はずっと大きくなります。

縮める幅の目安は、表示される幅の2倍程度までです。スマートフォンなどの高精細な画面では、表示幅と同じピクセル数ではぼやけて見えることがあるためです。

記事の入稿で見落とされがちなのが、スマートフォンで撮った写真をそのままアップロードするケースです。スマートフォンのカメラで撮った写真は横4,000ピクセル前後になることが多く、CMSが縮めないサイトでは、WebPにしても表示に要らない分のピクセルがそのまま残ります。

画像をWebPに変換する方法

画像をWebPに変換する方法は、1枚ずつ手で変換する方法と、CMSや配信サービスに自動で変換させる方法に分かれます。使える方法は、変換する枚数と、サイトの仕組みで選びます。

数枚だけ変換するなら、Googleのチームが公開しているブラウザ上の変換サイト「Squoosh」が手軽です。画像はパソコンの中で処理され、変換前と変換後の画質を左右に並べて比べられます。

WordPressは、バージョン5.8からWebPの画像をアップロードして使えるようになりました。すでに公開しているJPEGやPNGの画像をまとめてWebPで配信したい場合は、変換機能を持つプラグインを使うのが一般的です。

記事を継続して公開するサイトでは、アップロードしたJPEGやPNGを配信のときに自動でWebPへ変換する仕組みを使うと、入稿のたびに変換する作業がなくなります。Next.jsのImageコンポーネントや画像配信サービス（画像CDN）の多くは、ブラウザが対応していればWebPを、対応していなければ元の形式を返すため、古いブラウザへの対応も同時に済みます。

WebPに関するよくある質問

WebPについて、記事の制作現場で受ける質問に答えます。

まとめ｜WebPは表示サイズをそろえてから使う

WebPは、Googleが開発した画像形式で、JPEG・PNG・GIFの役割を1つで担えます。主要なブラウザが対応しており、同じ見た目の画像をJPEGやPNGより小さく保存できます。保存した画像が.webpになっても、Windowsはペイント、Macはプレビューで、JPEGやPNGに書き出せます。

サイトで使うときは、形式を変えるより先に、画像を表示される大きさに縮めることで容量が大きく減ります。そのうえでWebPに変換し、元の画像は編集用に残してください。記事を継続して公開するサイトなら、CMSや配信サービスの自動変換に任せると、入稿のたびに変換する作業が要らなくなります。

私たち合同会社Writers-hubは、企業のオウンドメディアの記事制作から入稿、公開後の検索流入の改善までを支援しています。記事の本数が増えて、画像の書き出しや入稿の作業まで手が回らなくなっている方は、いまの制作と入稿の流れをお聞かせください。