画像圧縮ツール

リファレンス

画像圧縮の仕組み

このツールはブラウザの組み込みCanvas APIを使用して、低い品質設定で画像を再エンコードします。画像はHTML Canvas要素に描画され、選択したフォーマットと品質レベルでcanvas.toBlob()を使用してエクスポートされます。これは非可逆圧縮です — JPEGの離散コサイン変換（DCT）やWebPの予測符号化などのアルゴリズムを使用して冗長な視覚データが破棄されます。結果は、知覚上の品質低下が最小限でありながら大幅に小さいファイルになります。

JPEG vs WebP vs PNG — どのフォーマットを選ぶか

JPEG: 写真や複雑な色のグラデーションを持つ画像に最適。1〜100%の品質調整をサポート。透明度非対応。最も広く互換性のあるフォーマット — どこでも動作します。WebP: Googleが開発。同等の視覚品質でJPEGより25〜35%小さいファイルサイズを実現。透明度（アルファチャンネル）とアニメーションをサポート。2020年以降すべての主要ブラウザでサポート。Web用途に推奨されるフォーマット。PNG: 可逆圧縮 — どの設定でも品質の劣化なし。スクリーンショット、シャープなエッジのグラフィック、テキストオーバーレイ、ロゴ、透明度が必要な画像に最適。フォーマットが本質的に可逆のため、品質スライダーはPNG出力に影響しません。

Web向けに画像を最適化すべき理由

HTTP Archiveによると、画像は平均的なウェブサイトのページ総重量の約50%を占めます。最適化されていない画像はLargest Contentful Paint（LCP）が遅くなる最大の原因です — これはGoogleの検索ランキングに直接影響するCore Web Vitalです。ヒーロー画像を2 MBから200 KBに圧縮することで、モバイル接続でのロード時間を数秒短縮できます。Googleは良好なモバイルパフォーマンスのためにページ総重量を1.6 MB以下に保つことを推奨しており — 適切な画像圧縮はこの目標達成のための最大の改善策であることが多いです。

画像圧縮のユースケース

Webパフォーマンス — Core Web Vitalsの基準値を満たしLighthouseスコアを向上するために画像サイズを削減。メール添付 — 一般的な25 MBの添付ファイル制限（Gmail、Outlook）以下に画像を圧縮。ソーシャルメディア — アップロードサイズ制限に合わせて画像を最適化: Twitter（5 MB）、Instagram（30 MB）、LinkedIn（10 MB）。ECサイト — 視覚的な品質低下なしに商品画像を圧縮してページ速度とコンバージョン率を向上。ドキュメント — READMEファイル、Wiki、Confluenceページのスクリーンショットを縮小してリポジトリとページを軽量に保持。

適切な品質設定の選び方

JPEGの場合、品質75〜85%がファイルサイズと視覚的忠実度の最適なバランスを提供します — 対照実験では、ほとんどのユーザーは85%以上の品質を区別できないことが示されています。60%以下では、特にグラデーションや肌色で圧縮アーティファクト（ブロック状の領域、色のバンディング）が目立ちます。WebPは品質80でJPEGの品質90に匹敵しつつ30%小さくなります。PNGの場合、品質スライダーは効果がありません — PNGは常に可逆です。ピクセルパーフェクトな再現（テキスト入りスクリーンショット、ロゴ、アイコン）やアルファ透明度が必要な場合のみPNGを使用してください。

プライバシー

すべての画像処理はCanvas APIを使用して100%ブラウザ内で実行されます。画像はサーバーにアップロードされません — ファイルがデバイスから外部に送られることはありません。