WebP変換のやり方とJPG・PNGとの相互変換を無料ツールで解説

WebP変換は画像をWebP形式に変換したり、WebPからJPG・PNGへ戻したりする作業です。Webサイトの画像を軽くしたい場面と、保存した画像が.webpで開けない場面の両方で必要になります。ここではブラウザで動作する無料ツールを使った変換の手順と、品質の目安や透過が消える条件を取り上げます。

JPG・PNGをWebPに変換するやり方

WebPへの変換とは、JPG・PNGの画像をWebP形式で保存し直して容量を小さくする作業です。 sakuttoAIのWebP変換ツールでは、ツールを開く・画像を追加する・品質を選ぶ・変換して保存するの4ステップで終わります。画像はブラウザの中だけで処理されるので、サーバーに送信されることはありません。ソフトのインストールは不要ですが、変換するにはサイトへのログインが必要です。

ステップ1: 無料のWebP変換サイトを開く

最初にsakuttoAIのWebP変換ツールをブラウザで開きます。 パソコンでもスマホでも同じ画面で使うことができます。画面上部の変換モードが「→ WebPに変換」になっていれば準備は完了です。

ステップ2: JPG・PNG画像を追加

追加できる画像はJPG(JPEG)・PNG・GIF・BMPの4形式です。画像を画面のドロップ領域へドラッグ&ドロップするか、ファイル選択のボタンから選びます。複数の画像をまとめて追加することもできます。

ステップ3: 品質を選んでJPG・PNGより軽くする

品質は変換後の画質と容量の釣り合いを定める値で、スライダーかプリセットで設定します。プリセットは「低圧縮(高品質)」「標準(おすすめ)」「高圧縮(小さいサイズ)」の3つです。Webサイトに掲載する写真なら「標準(おすすめ)」を選べば十分です。数値で指定したい場合も「標準(おすすめ)」と同じ75%前後から試すとよいでしょう。

ステップ4: JPG・PNGを一括変換してZIPで保存

「変換開始」を押すと追加した画像がまとめてWebPに変換されます。 変換が終わった画像は1枚ずつ保存できますし、ZIPファイルにまとめてダウンロードすることもできます。ネットショップの商品画像のように枚数が多い場合は、1回の操作で全部を変換できるので便利です。

WebPからJPG・PNGへ戻すやり方

WebPからの逆変換とは、.webpで保存された画像をJPGやPNGに変換して、他のアプリで開けるようにする作業です。 ブラウザで保存した画像が.webpになっていて、画像編集ソフトや投稿先のサービスで開けない場面があります。

同じツールで変換モードを「WebP → 他形式に変換」に切り替え、出力形式にJPGかPNGを選んで「変換開始」を押すと戻せます。このモードで追加できるのは.webpのファイルだけです。

戻し先のJPGとPNGの違いは?

透過のあるロゴやイラストはPNGに、写真はJPGに戻すのが基本です。 JPGは写真を小さく保存するための非可逆形式で、PNGは画質を落とさずに保存できる可逆形式です。戻し先ごとの違いは、下の表のとおりとなります。

比較する内容 JPG PNG
圧縮の方式 非可逆(保存時に情報を削る) 可逆(画質が落ちない)
透過 対応していない 対応している
適している画像 写真 ロゴ・スクリーンショット・透過画像

JPGは透過に対応していないため、透明だった部分は白い背景で塗られます。透明な部分を残したい画像はPNGを選ぶと確実です。

"PNG は元画像をより正確に再現したい場合や、透明度が必要な場合には JPEG より適しています。" / "アルファ透過も完全に対応します。" — MDN 画像ファイルの種類と形式ガイドより
公式情報を見る →

WebPとは?JPG・PNGより軽い画像形式

WebPとはGoogleが開発したWeb向けの画像形式です。 拡張子は.webpです。主要なブラウザはそのまま表示できます。写真向けの非可逆圧縮と画質を落とさない可逆圧縮のどちらも、1つの形式で選ぶことができます。

可逆圧縮は元のデータを完全に戻せる方式で、非可逆圧縮は見た目に影響しにくい情報を削って容量を減らす方式です。WebPの対応ブラウザやデメリットは「WebPとは?メリット・デメリットと圧縮率や対応ブラウザを解説」もあわせてご覧ください。

非可逆はJPGより25〜34%、可逆はPNGより26%小さい

Googleは非可逆圧縮のWebP画像が、同じ画質のJPGより25〜34%小さいと発表しています。 ここでいう同じ画質とは、SSIM(2枚の画像がどれだけ似ているかを測る指標)の値が同じ水準という意味です。

可逆圧縮のWebPはPNGより26%小さくなります。サイトの画像をまとめてWebPに置き換えれば、同水準の画質のまま読み込むデータ量が少なくなります。

"WebP lossless images are 26% smaller in size compared to PNGs." / "WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index." — Google for Developers「An image format for the Web」より
公式情報を見る →

PNGの透過とGIFのアニメーションにも1形式で対応している

WebPは背景を透明にする透過にも、アニメーションGIFのような動きのある画像にも対応しています。 Googleの説明では可逆圧縮のWebPに透過を持たせても、データ量の増加は22%にとどまります。PNGの透過画像をWebPに変換しても、透明な部分が消える心配はありません。

ただしsakuttoAIのWebP変換ツールでアニメーションGIFを変換すると、最初の1コマだけが静止画のWebPになります。動きを残したいGIFはWebPにせずGIFのまま使ってください。

"Lossless WebP supports transparency (also known as alpha channel) at a cost of just 22% additional bytes" / "Animated WebP images offer reduced file sizes compared to GIFs and APNGs while supporting lossy, lossless, and transparency." — Google for Developers「An image format for the Web」より
公式情報を見る →

JPG・PNGからの変換は品質75%前後が目安

品質とは画質と容量の釣り合いを定める値で、数字を下げるほどファイルは軽くなり画像は粗くなります。 Webサイトに掲載する写真やブログの画像は75%前後を目安にすると、見た目と容量のバランスが取りやすくなります。用途ごとの品質の目安は次のとおりです。

用途 品質の目安 理由
商品写真・作品の画像 75%より高め(低圧縮・90%) 細部の粗さが目につきやすい
ブログ・Webサイトの写真 75%前後(標準) 見た目と容量のバランスがよい
サムネイルやチャットで送信する画像 75%より低め(高圧縮・50%) 小さく表示されるので粗さが目立ちにくい

sakuttoAIのツールでは「標準(おすすめ)」のプリセットはこの目安と同じ75%です。品質を大きく下げると色の境目にブロック状のノイズが出やすくなります。

変換後の画像を元の画像と並べて見て、気になる粗さがあれば品質を上げて変換し直してください。WebPからPNGに戻す場合は、可逆形式で保存されるので品質による劣化はありません。

JPG・PNGとの互換性と画質で気をつけたい3つの注意点

WebP変換の注意点は次の3つです。 1つ目は提出先との互換性の話で、残りの2つは画質に関わります。

  • WebP非対応のサービスにはJPG・PNGを使う
  • 圧縮前のJPG・PNGを元画像として残す
  • JPGとWebPのあいだで往復変換をしない

WebP非対応のサービスにはJPG・PNGを使う

WebPに対応していない提出先には、JPGかPNGに変換してから提出するのが確実です。 WebPは主要なブラウザで表示できますが、アップロードできる形式をJPGとPNGに限っているサービスもあれば、WebPを開けない古い画像編集ソフトもあります。取引先へ画像を送信するときや応募フォームに添付するときは、JPGかPNGにしておくと相手側で開けない事態を避けられます。

圧縮前のJPG・PNGは元画像として残す

非可逆圧縮でWebPにした画像は、削った情報を後から取り戻せません。変換したあとに元のJPG・PNGを削除すると、画質の良い元画像が自分のPC上に残らなくなります。Webサイトに掲載する画像だけをWebPにして、編集や印刷に使う元画像は別のフォルダに残しておきましょう。

JPGとWebPの往復は画質が落ち、PNG保存なら落ちない

JPGと非可逆のWebPのあいだで往復変換すると画質は少しずつ落ちていきます。 JPGと非可逆のWebPはどちらも保存のたびに情報を削る形式です。JPGからWebPにしてまたJPGに戻すと、情報を削る処理が2回重なります。

PNGは可逆形式なので何度保存し直しても画質は変わりません。編集の途中で何度も保存する画像はPNGで持っておき、最後に1回だけWebPやJPGへ書き出すと劣化は1回分にとどまります。JPGとPNGの圧縮の違いは「PNGとJPEGの違いは圧縮と透過、写真とスクショで選び分ける基準」もあわせてご覧ください。

"非可逆圧縮です。離散コサイン変換に基づいています。" — MDN 画像ファイルの種類と形式ガイドより
公式情報を見る →

無料ツールで両方向の変換が可能

WebP変換は無料のブラウザツールで、JPG・PNGとWebPのどちらの向きにも行えます。 JPG・PNGからWebPへは4ステップで変換でき、品質を75%前後にすると見た目と容量のバランスを取りやすくなります。

開けないWebPを戻すときは写真ならJPG、透過のある画像ならPNGを選ぶのが基本です。変換前のJPG・PNGを元画像として残しておけば、あとから画質の高い画像が必要になっても取り出せます。

FAQ

WebPからJPGに変換すると透過はどうなりますか?
JPGは透過に対応していないため、透明な部分は白い背景に置き換わります。透過を残したい場合は出力形式にPNGを選びます。PNGは透過に対応した形式です。
WebPはJPGやPNGよりどれくらい軽いですか?
Googleが公表した値では、非可逆のWebPは同じ画質のJPEGより25〜34%小さくなります。可逆のWebPはPNGより26%小さくなります。
WebPはアニメーションに対応していますか?
対応しています。GoogleはアニメーションのWebPがGIFより小さくなるとしています。sakuttoAIのWebP変換ツールで、アニメーションGIFを変換した場合は、最初の1コマだけが静止画のWebPになります。