image

画像圧縮・変換

用途を選ぶだけでPNG・JPEG・WebPの形式・品質・解像度を比較し、容量と見た目のバランスを探します。

ローカル処理
ファイルについてこのツールで選択したファイルや入力内容は、Browser Kittyのバックエンドへアップロードせずブラウザ内で処理します。
操作デモ 実際の操作の流れを短い動画で確認できます。

このツールについて

画像圧縮・変換は、PNG・JPEG・WebPを単純に変換するだけでなく、用途から設定を選び、形式・品質・解像度の候補を比較しながら出力を決める画像最適化ワークベンチです。Smart Optimizeでは複数候補を端末内で試し、簡易的な見た目の条件を満たす中から小さい結果を選びます。

容量制限がある場合は目標KBを指定でき、品質調整だけでは届かないときは解像度も段階的に下げて探索します。Before / Afterと差分強調で見た目を確認でき、Base64、HTML、CSS、Markdown、picture要素、Web素材ZIPの生成まで1つの画面で行えます。

こんなときに便利

  • WebサイトやREADME向けに、見た目を確認しながら画像を軽くしたい
  • 「500KB以下」などの容量制限へ、品質と解像度を調整して近づけたい
  • 複数画像をまとめて最適化し、WebPやpicture要素などWeb制作向け素材として書き出したい

できること

このツールで利用できる主な機能です。

使い方

  1. PNG・JPEG・WebP画像を追加します。PCではCtrl+Vでコピー画像やスクリーンショットも追加できます。
  2. Webサイト / 写真 / スクリーンショット / 容量制限など、目的に合うプリセットを選びます。
  3. Smart Optimizeを実行するか、必要なら目標容量・出力形式・リサイズ・品質を指定します。
  4. Before / Afterと差分強調、元容量・出力容量・削減率を確認します。
  5. 画像単体、複数画像のZIP、またはBase64・HTML・CSS・Markdown・picture・Web素材ZIPとして書き出します。

対応範囲

  • 入力・出力: PNG / JPEG / WebP。PCではCtrl+V貼り付け、ファイル選択は複数画像に対応。
  • 最適化: 用途別プリセット、Smart Optimize、出力形式・品質・リサイズの詳細設定。
  • 目標容量: JPEG / WebPは品質と解像度、PNGは解像度を調整して指定KB以下を探索。
  • 書き出し: 単体画像、フォルダ構造を維持したZIP、Base64、HTML、CSS、Markdown、picture要素、Web素材ZIP。

制限・注意点

  • PNGはロスレス出力です。目標容量モードでは品質ではなく解像度を下げて容量を調整します。
  • Smart Optimizeの見た目スコアは候補選択を助ける簡易指標で、専門的な画質評価を保証するものではありません。
  • Canvasで再エンコードするためEXIFなどのメタデータは除去され、アニメーション画像のアニメーションも維持されません。
  • ブラウザごとに画像エンコーダーが異なり、非常に大きい画像や大量処理では端末メモリを多く使用する場合があります。

よくある質問

画像はサーバーへアップロードされますか?

いいえ。画像の読み込み、Smart Optimize、比較、書き出しはブラウザ内で行い、選択した画像をBrowser Kittyへ送信しません。

Smart Optimizeは何を自動で決めますか?

JPEG / WebP / PNGと複数の品質候補を端末内で比較し、簡易的な見た目の条件を満たす候補の中から小さい出力を選びます。必要なら詳細設定で形式や品質を固定できます。

指定した容量以下にできますか?

目標容量モードでKBを指定できます。JPEG / WebPは品質を下げ、必要なら解像度も下げて探索します。PNGはロスレスのため解像度を下げて調整します。画像によっては指定容量を保証できない場合があります。

変換後の方が大きくなった場合はどうなりますか?

初期設定では変換後が元画像より大きい場合に元画像を維持します。形式変換そのものを優先したい場合は、この動作を無効にできます。

オフライン版・ソースコード

GitHub直下の image-compressor-converter.html は完全内包の単一HTMLです。保存して直接開けば、画像を外部へ送らずオフラインでも圧縮・変換できます。

GitHubでソースを見る