WebPとは？JPEG・PNGとの違いと使い分け｜サイトの表示速度を上げる画像形式の選び方

2026-09-04

藤井

こんにちは！Webデザインが得意なマーケターの藤井です！

制作会社から「サイトの画像はWebPにしましょう」と提案された。あるいは、納品されたデータを開こうとしたら見慣れない「.webp」という拡張子だった。そんな場面に出くわしたことはありませんか。

WebP（ウェッピー）は、Webサイトの表示を軽くするためにGoogleが作った画像形式です。ここ数年で一気に広まり、今ではWeb制作の現場で当たり前に飛び交うようになりました。

ただ、事業者側からすると
「新しい形式に変える必要が本当にあるのか」
「変えると何が良くなるのか」
が見えにくいと思います。画像形式は見た目の話に思えて、実際は表示速度と離脱率、つまり問い合わせ数に直結する判断です。

この記事では、WebPとは何かという基本から、JPEG・PNGとの使い分け、変換のやり方、そして自社サイトでどこまでやるべきかの線引きまでを、実際の運用場面に沿って解説します。

※この記事の情報は2026年8月時点のものです。

WebPとは？Googleが作った「軽い」画像形式

WebPは、Googleが開発したWeb表示用の画像形式です。読み方は「ウェッピー」。ファイルの拡張子は「.webp」になります。

いちばんの特徴は、画質をあまり落とさずにファイルサイズを小さくできることです。Googleの公式ドキュメントでは、次の数値が示されています。

可逆圧縮（画質を落とさない圧縮）：PNGと比べて26%小さい
非可逆圧縮（多少画質を削る圧縮）：同等の品質でJPEGと比べて25〜34%小さい

さらにWebPは、透過（背景を透明にすること）とアニメーションの両方に対応しています。

これまでは
「写真ならJPEG」
「透過が必要ならPNG」
「動かしたいならGIF」
と、目的ごとに形式を使い分ける必要がありました。WebPは、その3つの得意分野を1つにまとめた形式だと考えると分かりやすいと思います。

JPEG・PNGとの違いと使い分け

3つの形式を比べると、次のようになります。

比べるポイント	JPEG	PNG	WebP
得意なもの	写真	ロゴ・図・イラスト	写真・図の両方
透過	できない	できる	できる
アニメーション	できない	できない	できる
ファイルサイズ	普通	大きめ	小さい
対応の広さ	ほぼすべての環境	ほぼすべての環境	主要ブラウザは対応。古いソフトでは開けないことがある

表を見ると、WebPがすべての面で優れているように見えます。ただ、実務では「軽いから全部WebPにする」という判断にはなりません。

POINT

使い分けの基準は、その画像を誰がどこで使うのかです。

自社サイトやLPに載せる画像 … WebPが第一候補。表示速度に直接効きます
取引先や制作会社に渡す元素材 … JPEGまたはPNG。相手の環境で開けないと、その時点でやりとりが止まります
印刷に回る可能性がある画像 … JPEGまたはPNG。印刷の工程ではWebPは使いません

デザインは見た目を整える作業ではなく、目的を達成するための手段です。画像形式も同じで、「新しいから」「軽いから」ではなく、その画像が果たす役割から逆算して選ぶのが正しい順番だと私は考えています。

なぜ画像形式が問い合わせ数に関わるのか

「画像形式を変えたくらいで成果が変わるのか」と思われるかもしれません。ここは、事業者の方にこそ知っておいてほしいところです。

Webページの中で最も容量を食っているのは、たいてい写真やメインビジュアルです。テキストは軽く、画像は重い。つまりページが重い原因のほとんどは画像で、画像を軽くすることが表示速度の改善で最も効きやすい打ち手になります。

表示速度が問題になるのは、訪問者が待ってくれないからです。Googleはページの表示速度を測る指標としてCore Web Vitalsを公開しており、そのうちメインの画像やテキストが表示されるまでの時間を示すLCPは、2.5秒以内が「良好」とされています。ファーストビューに重い画像が置かれていると、この基準を超えやすくなります。

ここで起きているのは、単に「遅い」ということではありません。広告費や制作費をかけて連れてきた訪問者が、内容を読む前に離脱しているという状態です。せっかく用意した実績紹介も料金表も、表示される前に離脱されれば存在していないのと同じになります。

自社サイトの現状は、Googleの「PageSpeed Insights」にURLを入れれば無料で確認できます。改善提案の中に画像に関する項目が並んでいるなら、画像形式の見直しは検討する価値があります。

もっとも、軽くすれば成果が出るというほど単純でもありません。画像は「速さ」と同時に「何を写して何を伝えるか」で成果が決まります。載せる画像そのものの設計については売れる商品画像デザインの秘訣にまとめていますので、あわせて読んでみてください。

f design officeブログ

ECサイト担当者の方必見！売れる商品画像デザインの秘訣 ECサイトで売上を左右する「商品画像」の作り方を徹底解説！物販セラーとして5年の実務経験と、EC特化のWebデザインノウハウを持つプロが、各モールの画像規定から、シズル…

WebPのデメリットと注意点

便利なWebPですが、運用の場面で気をつけたい点が3つあります。

1. 古い環境や一部のソフトでは開けない

主要なブラウザはWebPに対応していますが、少し前のバージョンのソフトや、画像を扱う一部のアプリケーションでは開けないことがあります。取引先や社内の別部署にそのまま送ると「開けません」と返ってくることがあるため、相手の環境が分からないまま送るのは避けたほうが安全です。

2. Canvaでは「WebPで書き出す」ことができない

意外と知られていないのですが、CanvaはWebPのアップロード（読み込み）には対応している一方、WebP形式でのダウンロードには対応していません。Canva公式ヘルプに記載されているダウンロード形式は、JPG・PNG・SVG・PDF・PPTX・DOCX・CSV・XLSX・GIF・MP4です。

なおアップロードについても、対応しているのは静止画のWebPのみで、ファイルサイズは50MB未満という条件があります。社内でCanvaを使ってバナーを作っている場合は、この点を前提に運用を組む必要があります。

3. 変換を繰り返すと画質が落ちる

非可逆圧縮のWebPは、JPEGと同じように圧縮のたびに情報が削られます。「JPEG→WebP→JPEG」と何度も変換をかけると、そのぶん画質は劣化します。元データ（PSDなど）は必ず手元に残しておいてください。制作会社に依頼している場合は、元データを納品してもらえるかを契約前に確認しておくと、後々の作り直しを避けられます。

この「事前に確認しておくべきこと」は、画像形式に限った話ではありません。制作の進め方や費用の考え方はWebデザインを依頼する前に知っておくべきことで整理しています。

f design officeブログ

Webデザインを依頼する前に知っておくべきこと｜費用・期間・注意点まとめ Webデザイン依頼の不安を解消！①フリーランス・制作会社の費用相場 ②制作期間の目安 ③依頼前の準備物 ④失敗しないための注意点をプロが解説。LPは1〜4週間、HPは1〜3ヶ月が…

WebPの変換方法

WebPの扱い方は、今どちらの立場かで変わります。

受け取ったWebPを開きたい・JPEGにしたいとき

Windows … 標準の「フォト」で開けます
Mac … 標準の「プレビュー」で開けます。ここから他の形式に書き出すこともできます
Photoshop … バージョン23.2（2022年2月リリース）以降は、プラグインを入れなくてもWebPを開く・保存することができます
オンラインの変換ツール … Canvaが無料のコンバーターを提供しています。ただし取引先から預かった画像を外部サービスにアップロードするときは、利用規約と守秘義務の確認を忘れないでください

自社サイト用にWebPで書き出したいとき

Photoshop … 「ファイル」→「コピーを保存」からWebPを選べます
Canva … WebPでは書き出せないため、PNGかJPGで書き出してから変換ツールにかけます
WordPress … バージョン5.8（2021年7月）以降、標準でWebPをアップロードできます。ただしサーバー側が対応している必要があります

自社サイトがWordPressの場合、既存の画像をまとめてWebPに変換するプラグインもあります。ただし後述のとおり、私は自社で全部やることをおすすめしていません。

事業者がつまずきやすい3つの場面

実際のご相談で起きやすい場面と、その対処をまとめます。

場面1: 届いた素材がWebPで、使いたいソフトに配置できない

まずはWindowsの「フォト」やMacの「プレビュー」で開き、JPEGやPNGに変換してから作業に進みます。制作会社に「PNGで再送してください」と伝えるのも間違いではありませんが、自分で変換できればその往復の時間を省けます。

場面2: 「サイトが重い」と指摘された

原因が画像にあるケースは非常に多いです。まずPageSpeed Insightsで現状を確認し、既存のJPEG・PNGをWebPに置き換えるところから検討します。ページ全体を作り直す前に、画像だけで解決する場合も少なくありません。

場面3: 制作会社から「WebPで支給してください」と言われた

Photoshopをお使いなら「コピーを保存」で対応できます。Canvaで制作している場合は、PNGで書き出してから変換する手順になります。判断に迷ったら、元データも一緒に渡しておくと相手側で最適な形式に調整してもらえます。

私ならこう判断します

ここまで読んで「結局、自社でどこまでやればいいのか」が気になっている方も多いと思います。私が普段お伝えしている線引きは、次のとおりです。

これから新しく載せる画像は、最初からWebPで用意する。手間はほぼ変わらないので、やらない理由がありません
既存画像の一括変換は、まずトップページとLPのファーストビューだけに絞る。ここが最も表示速度に効き、最も見られている場所だからです
ページ数の多いサイトの全置換は、自社ではやらない判断もあります。プラグインでの一括変換は失敗時の影響範囲が広く、バックアップと復旧の体制がないまま触るのは割に合いません

逆に、WebP化を優先しなくてよい場合もあります。もともと画像点数が少ないサイトや、そもそも訪問者数が伸びていないサイトです。この場合、表示速度より先に「誰に何を伝えるか」の設計を直したほうが成果は動きます。

どこから手をつけるかの考え方は売上につながるデザインの法則7選で解説しています。

f design officeブログ

Web集客で成果が出ない人へ｜売上につながるデザインの法則7選 Web集客に取り組んでも成果が出ないのは、デザインが「飾り」になっているからかもしれません。訪問者が数秒で判断する場面で伝わるレイアウト・配色・フォントの考え方を…

画像形式は、あくまで打ち手のひとつです。表示速度の改善だけで問い合わせが増えるわけではありませんが、改善の効果を打ち消してしまう要因は先に潰しておく。そういう位置づけで考えるのが現実的だと思います。

まとめ

WebPについて、押さえておきたいのは次の3点です。

WebPはGoogleが作ったWeb用の画像形式で、PNGより26%、JPEGより25〜34%小さくできる
使い分けの基準は「誰がどこで使う画像か」。サイト掲載ならWebP、支給用や印刷ならJPEG・PNG
変換はPhotoshopやOS標準のソフトでできる。ただしCanvaはWebPでの書き出しに非対応

新しい形式が出てくるたびに身構える必要はありません。目的から逆算して選べるようになれば、どんな形式が登場しても迷わなくなります。

f design officeでは、WebデザインとWebマーケティングを一気通貫で行い、クリック率やCVR（成約率）の改善まで伴走しています。実際の改善事例はこちらの記事で公開しています。

デザイン×マーケティング成功事例5選を見る

自社サイトの画像や表示速度で気になる点があれば、現状を見たうえでどこから手をつけるべきかをお伝えします。下の窓口から気軽にご相談ください。

WebデザインとWebマーケティングを一気通貫で見直したい方、三重のWeb集客にお困りの方は、f design officeへお気軽にご相談ください。

参考にした情報源

Google「ウェブ用の画像形式 | WebP」 https://developers.google.com/speed/webp?hl=ja
web.dev「Largest Contentful Paint (LCP)」 https://web.dev/articles/lcp
Adobe「You can now easily work with the WebP file format in Photoshop」 https://helpx.adobe.com/photoshop/kb/support-webp-image-format.html
Make WordPress Core「WordPress 5.8 adds WebP support」 https://make.wordpress.org/core/2021/06/07/wordpress-5-8-adds-webp-support/
Canva ヘルプセンター「サポートされているダウンロードファイルの種類」 https://www.canva.com/ja_jp/help/download-file-types
Canva ヘルプセンター「アップロードのファイル形式と要件」 https://www.canva.com/help/upload-formats-requirements/