JPG・PNG → WebP 一括変換ツール

JPGやPNG画像をWebPへ変換し、容量を抑えながら使いやすい画像にしたいときに使えるツールです。サイト表示の軽量化や、公開前の画像最適化をブラウザ上で手早く進めたい場面に向いています。

ファイルをアップロードせず、ブラウザ上でそのまま変換できるため、試しながら画質や出力サイズを調整しやすいのが特徴です。

⚙️ 変換設定
画質（圧縮率）の調整

数値を下げると容量は軽くなりますが、画質が粗くなります。実務の推奨値は「80」です。

80%

※チェックを入れるとMV用などの巨大画像も変換可能になりますが、PCのメモリ（RAM）を大量に消費するため、ブラウザがフリーズ・クラッシュする可能性があります。自己責任でご利用ください。

同時変換数（並列数）

枚数が多い場合は「2〜3」を推奨。高スペックPCなら増やしても構いません。

3枚同時
📁
ここに画像をドラッグ＆ドロップ
またはクリックしてファイルを選択（JPG, PNG / 1枚10MBまで）

👑 コーダー必読：WebP（ウェッピー）導入のポイント

1. JPEGとPNGの「いいとこ取り」
WebPは、JPEGのように写真も綺麗に圧縮でき、PNGのように「背景の透過（透明化）」も保持できる最強のフォーマットです。このツールに背景透過のPNGを入れると、透過を保ったまま劇的に軽いWebPが生成されます。
2. Safari対応はもう気にする必要なし！
数年前まで「古いiPhone（Safari）でWebPが表示されないから、<picture>タグで出し分ける」という面倒な作業が必要でしたが、iOS 14以降（2020年〜）は標準対応しています。現在は「<img src="image.webp">」と直接書いてしまうのが主流です。

📐 このツールの仕様と注意点

  • 透過（アルファチャンネル）は保持されます： 背景透過のPNGをドロップすると、透明部分を保ったままWebPに変換されます。アイコンやロゴの軽量化に特に効果的です。
  • GIF・SVG・AVIFには非対応： このツールはJPG・PNGのみ対応しています。GIFはアニメーション情報をWebPに変換する処理が別途必要なため、SVGはベクター形式のため対象外です。
  • 画質80での削減率の目安： 写真・グラデーション系（JPG元画像）は40〜70%の軽量化が見込めます。背景透過PNG（アイコン・ロゴ等）は30〜50%程度の削減になることが多いです。変換後の「📉 削減」バッジで実際の数値を確認してください。
  • 一括処理の目安は50枚・合計100MB以内： このツールはブラウザのメモリ上で変換処理を行います。コーポレートサイトの /assets/img/ 程度（30〜50枚）であれば問題ありませんが、それ以上の場合は数回に分けてドロップすることを推奨します。WordPressのメディアライブラリ画像など100枚超の一括処理には、後述のWP側の自動変換機能をご検討ください。

⚙️ WordPressでのWebP導入方法

① メディアライブラリ経由で自動生成（WordPress 6.1以降）

WordPress 6.1（2022年〜）から、functions.php に1行追加するだけで、JPG・PNGをアップロードした際に自動でWebP版も生成・保存されるようになりました。 

// functions.php に追加するだけでOK
add_theme_support( 'webp-upload' );

② .htaccess でWebPを自動配信する（既存サイトへの導入に）

このツールで変換したWebPファイルを元の画像と同じフォルダに置いておくと、WebP対応ブラウザには自動でWebPを配信できます。既存のHTMLやURLを変更する必要がないため、制作済みサイトへの後付け導入に向いています。 

<IfModule mod_rewrite.c>
  RewriteEngine On
  # ブラウザがWebPに対応しており、同名の .webp ファイルが存在する場合に自動配信
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} \.(jpe?g|png)$
  RewriteCond %{REQUEST_FILENAME}\.webp -f
  RewriteRule ^ %{REQUEST_URI}.webp [T=image/webp,E=accept:1,L]
</IfModule>
<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>
この設定を使うには：
元の画像（例: photo.jpg）と同じディレクトリに、同名＋.webp拡張子のファイル（例: photo.jpg.webp）を配置する必要があります。このツールでの変換後、ファイル名を 元のファイル名.webp にリネームしてからアップロードしてください。
また、Apache環境（さくらインターネット・エックスサーバー等）向けの設定です。Nginx環境では nginx.conf への記述が必要になります。

WebP以外の形式に変換したい場合は、WebP → JPG・PNG変換、AVIF → JPG・PNG変換も利用できます。