画像WebP変換ツール
上の領域に画像を置くとすぐWebPに変換されます。品質スライダーを動かすと再変換され、下のカードでファイルごとの容量と削減量を確認してから個別または一括ZIPで保存します。
選択できる形式は広めにしています。実際の変換はブラウザが読み込める形式から処理し、HEICやTIFFなど読めない形式はカードごとに表示します。
最大20MB · 画像拡張子を広く許可 · WebP出力すぐ使える形で。
- すぐ見える画面入力場所と結果の場所をはっきり分けます。
- 結果を先に大事な数字を先に出し、過程は必要な分だけ見せます。
- 求めるものを減らす登録や余計な入力なしで使えるようにします。
品質と結果カード、そして元データの保管を先に決める
WebP変換は、ブラウザがすでに読み込んだ画像をWebP形式で保存し直す作業です。このページは選んだファイルをサーバーへ送らず、File APIとcanvasのtoBlobだけを使います。ブログのサムネイル、通販の商品写真、CMSへの登録画像のように、容量は下げつつ画面上の品質は保ちたいファイルに向いています。
流れは短いです。画像を入れると変換がすぐ始まり、品質を変えると同じファイルが新しい値で再変換されます。判断は下のカードで行います。カードごとに出力容量、元画像に対する削減量、状態、個別のダウンロードボタンが並びます。
このツールがすること・しないこと
これは単なる圧縮ツールではなく、出力形式をWebPに書き換えるツールです。JPGはWebP写真に、PNGやBMPはアルファを保ったWebP画像として保存を試みます。
一方で元画像の編集やサイズ変更は行いません。解像度も下げたい場合はリサイズ、形式は変えずに容量だけ減らしたい場合は圧縮のツールが適しています。
変換が自動で始まる理由
ファイルが届いた時点で必要な値はすべて決まっています。出力形式はWebP固定で品質には既定値があるため、もう一度ボタンを押させる理由がありません。
品質を変えるとスライダーから手を離した時点で再変換されます。ドラッグ中は数値だけが変わるので、大きな画像を複数枚入れても途中の値ごとに再エンコードされません。
品質60・75・80・90%の選び方
品質はこのツールで利用者が決める唯一の変数です。次を出発点にして、カードの削減量とプレビューで確認してください。
- 60%台 — 記事一覧のサムネイルや一時的な共有画像など、細部が重要でないファイル
- 75〜80% — ブログ本文の写真や商品の補助画像など、一般的なウェブ写真
- 90%付近 — 商品の代表写真、ポートフォリオ、文字やロゴが入る画像
- 低品質で先に崩れる部分 — 文字の線、肌のグラデーション、空のような広い平坦面
結果カードの読み方
カードの左に元画像のサムネイル、中央にファイル名と元の容量・解像度、右に状態とダウンロードボタンがあります。下段には出力容量と削減率が同じ高さで並びます。
広い画面ではカードが2枚ずつ並ぶため比較が速くなります。削減が大きくプレビューも問題ないカードはそのまま保存し、増加と出たカードは品質を下げて見直すか元画像を残してください。
複数ファイルと一括ZIPの流れ
20枚前後の商品サムネイルや記事画像をまとめて入れると、キューがファイルごとの進行を分けて表示します。1枚失敗しても成功したカードの保存は止まりません。
すべて必要なら一括ZIPボタンで一度に受け取ります。ZIPを作る前に失敗カードと容量が増えたカードを外しておくと整理が楽になります。
アップロードのないローカル変換
選んだ画像は現在のブラウザが読み込んで変換します。変換のためにサーバーへ送らないので、アップロード型の変換ツールとは扱うリスクが異なります。
ただしブラウザ内で処理するということは、その限界も引き継ぐという意味です。非常に大きな画像や長いキューは端末のメモリと処理速度に左右されます。
HEIC・HEIF・TIFFが失敗する理由
ファイル選択はHEIC、HEIF、TIFFまで広く受け付けます。ファイルを探し直す手間を減らすための設定であって、その形式が必ず変換できるという意味ではありません。
実際の変換はブラウザが画像をデコードして初めて始まります。読めない場合はそのカードにエラーが残り、他のファイルは処理が続きます。同じファイルでもSafari、Chrome、Edgeで結果が変わることがあります。
GIF・APNG・SVGの動きに注意
canvas経由の保存は通常、ブラウザが描いた1コマを保存し直します。GIFやAPNGの全アニメーション、SVGのスクリプト表現がそのまま残るとは考えないでください。
動くバナーやステッカーを維持する必要があるなら、保存したファイルを再生してから最終版として扱ってください。静止した代表画像だけが必要なときはコマ抽出のように使えます。
実例: 商品画像4枚
商品詳細ページ用にJPG写真3枚とPNGロゴ1枚を入れたとします。まず既定の80%で出た結果をカードで読みます。
写真3枚が30〜60%減り、見た目の差が小さければ保存候補です。ロゴPNGがぼやけた、またはほとんど減らなかった場合は90%で比べ直し、それでも利点がなければ元のPNGを残します。
保存前の確認リスト
次の4点を確認すれば、やり直しのほとんどを防げます。
- 失敗したカードがキューに残っていないか
- カードの出力容量が本当に元より小さいか
- 文字、顔、製品の輪郭、透明部分がプレビューで崩れていないか
- 元画像をすぐ削除せず別に残しているか
WebPが向く場所と向かない場所
配布用と保管用を分けて考えると判断しやすくなります。
- 向く — ブログ本文の画像、商品サムネイル、CMSへのメディア登録、チャット共有用の画像
- 向く — 同じ画面品質でファイルを小さくし、読み込みとアップロードを軽くしたいとき
- 向かない — 撮影した元データ、レイヤーのある作業ファイル、後で色調整する素材
- 向かない — 再度の非可逆圧縮を避けたい印刷入稿用データ
ブラウザ側の技術的な前提
中心にあるのはローカルファイルを読むFile APIと、キャンバスをWebP Blobとして書き出すtoBlobの流れです。このページは開始時に1×1のキャンバスで実際にWebPエンコードを試し、ブラウザがWebPを返さない場合は変換を行いません。
対応形式、アルファの扱い、大きな画像の処理速度はブラウザの実装に左右されます。
よくある質問
このWebP変換ツールは何をしますか。
JPG、PNG、AVIFなど現在のブラウザが読める画像をWebPファイルとして保存し直します。サーバーに送らず、使っているブラウザの中で変換を終えます。
変換ボタンを押す必要がありますか。
いいえ。画像を追加すると選んだ品質ですぐ変換が始まります。品質を変えると同じファイルが新しい値で再変換されます。
品質は何%が良いですか。
小さなサムネイルは60%台、一般的なウェブ写真は75〜80%、商品の代表写真のようにディテールが重要な画像は90%付近から比較してください。数値だけでなくカードに出る削減量とプレビューを見て決めるほうが安全です。
画像はサーバーにアップロードされますか。
いいえ。選んだ画像は現在のブラウザが読み込んでWebPに変換します。このツールは変換のために画像をサーバーへ送りません。
HEIC、HEIF、TIFFも変換できますか。
選択はできますが常に成功するとは限りません。ブラウザがその形式をデコードできるときだけ変換が進み、読めなかったファイルはカードごとのエラーとして残ります。
GIFやAPNG、SVGのアニメーションは保たれますか。
保証されません。canvas経由の変換ではブラウザが描いた静止フレームだけを保存する場合があります。動きが重要なら保存したファイルを再生して確認してください。
変換したら容量が増えました。
強く圧縮済みのJPGや非常に小さいPNGは再保存しても利点がなく、大きくなることがあります。カードに増加と出たら品質を下げて比べ直すか、元のファイルをそのまま使ってください。
複数の画像をまとめて保存できますか。
はい。変換後は各カードのダウンロードボタンで個別に保存し、成功した結果すべては一括ZIPボタンでまとめて保存できます。
背景が透明なPNGも使えますか。
使えます。WebPはアルファチャンネルに対応しているため透明部分は保持されます。ただし品質を大きく下げると輪郭が粗くなるので、ロゴやアイコンは高めの品質で比較してください。