画像軽量化ツール

▼

ブラウザ対応

Chrome・Firefox・Edge・Safari 14+・iOS 14+ はすべて対応。IE は非対応だが2022年にサポート終了済みのため実運用上は問題なし。<picture> タグでフォールバックを書けば旧ブラウザも安全。

<picture> タグ方式（推奨）

最も安全な方法。WebP非対応ブラウザは<img>にフォールバック。

<picture>
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="">
</picture>

シンプル置換方式

HTMLのsrcをそのまま.webpに変更する方法。旧ブラウザでは表示されないが、IE対応不要な案件では問題なし。コードがシンプルになる。

CSS background-image

url('image.jpg')をurl('image.webp')に置換。CSS単体でのフォールバックは @supports を使う方法があるが、WebP対応ブラウザ前提なら置換だけで十分。

透過（アルファチャンネル）

WebPは透過に対応しているため、PNG→WebP変換でも透過は維持される。PNGをWebPに変換するのは問題なし。

SVG・アイコンフォント

SVGはベクターデータのため変換不要。変換しても軽量化されない。本ツールもSVGはスキップします。アイコンフォント（Font Awesome等）も対象外。

OGP / SNSシェア画像

FacebookはWebP対応済みだが、Twitter（X）はog:imageにWebPを使うと正常に表示されないケースあり。OGP画像はJPEGのまま残すことを推奨。

サーバー設定（Nginx）

WebPファイルには Content-Type: image/webp が自動で返される（通常は不要）。ただし古いサーバーでは MIMEタイプが未設定の場合があるため、types { image/webp webp; } を追加する。

ページURLを入力すると、HTML・CSS・画像をすべて取得してWebP変換＋ソース書き換えを行い、ZIPで返します。

書き換えモード

WebP品質 80

ここに画像をドラッグ&ドロップ