品質を損なわずに画像を圧縮する方法

大きな画像ファイルはウェブサイトを遅くし、メール受信箱を詰まらせ、ストレージを食い尽くします。圧縮はそれを高速化する最も簡単な方法の 1 つで、ソフトウェアをインストールせず、サーバーに何もアップロードせず、通常は目に見える品質低下なしで実行できます。適切な圧縮設定で、通常の表示距離では同じに見えながら、写真のサイズを 80% 削減できます。

画像圧縮の簡単な歴史

圧縮はデジタルの概念としてはウェブよりも古いものです。初期のビットマップフォーマット(1986 年の TIFF、それ以前の PCX)におけるランレングス符号化は、繰り返される色を回数と値に変換することで、スクリーンキャプチャや単純なグラフィックを劇的に縮小しました。1992 年の JPEG 標準は、人間の視覚システムが容易に知覚できない情報を破棄する離散コサイン変換(DCT)を使うことで、可逆ではない圧縮を主流にしました。この発想は 30 年後の今もほとんどの写真圧縮を支えています。

PNG は 1996 年に DEFLATE ベースの可逆圧縮として登場し、JPEG が苦手なスクリーンショットやロゴに最適でした。WebP(Google、2010 年)はより賢い非可逆モードを追加し JPEG を 25〜35% 上回り、可逆モードは PNG を 20〜30% 上回りました。AVIF(2019 年)はさらに大きく改善し、同じ品質で WebP の半分のサイズになることがよくあります。JPEG XL(2021 年)は最新の挑戦者で、可逆、非可逆、アニメーション、さらには既存の JPEG の追加損失なしの再圧縮まで、これらすべてを単一のフォーマットで置き換えることを目指しています。ブラウザの採用が制限要因で、アルゴリズム自体は JPEG をはるかに超える効率です。

画像ファイルサイズが重要な理由

ウェブページのすべての画像は、訪問者のブラウザがダウンロードしなければなりません。携帯電話カメラからの非圧縮の写真 1 枚は 5〜10 MB になります。複数の画像を掛け合わせると、ページの読み込みが高速接続では目に見えて遅く、低速接続では数分かかるようになります。画像を小さくすると以下の利点があります:

• ページ読み込みの高速化: 訪問者がコンテンツをより早く見られます。Google の Core Web Vitals(LCP、最大コンテンツフルペイント)はヒーロー画像に支配されることが多く、そのサイズを半減させると LCP 時間も多くの場合半減します。
• 帯域幅の使用量削減: データプランが制限されているモバイルユーザーや、大量のトラフィックを処理する自分のホスティング費用にとって重要です。
• 共有が容易: メール添付がサイズ制限内に収まり(Gmail は 25 MB が上限)、チャットアプリが写真を裏で勝手にトランスコードするのを止めます。
• ストレージスペースの増加: 携帯電話、クラウドドライブ、サーバーがより多くのファイルを保持できます。5,000 枚の旅行写真が 5 GB ではなく 1 GB になります。
• SEO 向上: ページ速度の信号は Google 検索ランキングに影響するため、すばやく読み込まれる画像の多いページは、同じ内容でも遅いものより上位にランクされます。

画像圧縮の仕組み

圧縮には 2 種類あり、それぞれにトレードオフがあります。

非可逆圧縮(JPEG、WebP、AVIF)は、目が気づきにくい画像データを取り除きます。中程度の品質レベル(約 60〜80%)では、結果は元のものとほぼ同じに見えますが、50〜80% 小さくなります。アルゴリズムは 3 つのステップで動作します: RGB を YCbCr に変換(明るさを色から分離)、色チャンネルをダウンサンプリング(目は明るさよりも色の細部にはるかに鈍感)、DCT を適用して高周波の詳細を破棄。各ステップは知覚品質には影響せず、膨大なデータを節約します。

可逆圧縮(PNG、音声の FLAC)は、何も取り除かずにデータを再編成して空間を節約します。画像はピクセル単位で元と同一ですが、ファイルサイズの節約は小さく、写真では通常 10〜30%、スクリーンショットやロゴでは 30〜60% です。

混合モードのフォーマット(WebP、AVIF、JPEG XL)では、ファイルごとに非可逆か可逆かを選択できます。ほとんどの現代の写真パイプラインは、配信用に非可逆、アーカイブ用に可逆マスターを保持します。

オンラインで画像を圧縮する方法

1. 画像をアップロード: 1 つまたは複数の画像(JPEG、PNG、WebP、AVIF、HEIC、GIF、BMP、各最大 50 MB)をツールにドラッグ&ドロップするか、クリックしてファイルを選択します。すべてローカルで処理され、アップロードされません。
2. 品質設定の調整: 品質スライダーで圧縮レベルを制御します。値が低いほど、より多くの圧縮で小さなファイルを意味します。最大幅の設定、出力フォーマットの変更、目標ファイルサイズの指定も可能です。
3. 結果のプレビュー: ほとんどのツールは、新しいファイルサイズと共に前後のサムネイルを表示します。あなたの用途に対するトレードオフが適切になるまで品質を調整します。
4. 結果のダウンロード: 個別の圧縮画像をダウンロードするか、「すべてダウンロード」をクリックしてバッチを ZIP でダウンロードします。

裏では、ファイルは FileReader で読み込まれ、ブラウザの画像パイプラインでデコードされ、オフスクリーンキャンバスに描画され、canvas.toBlob で目標品質に再エンコードされます。WebP、AVIF、MozJPEG エンコーダの WebAssembly バージョンが、ページを離れることなくネイティブに近い圧縮性能を提供します。

実際に機能する品質設定

普遍的な「正しい」品質はありません。以下の表は出発点です。画像が実際にどう見えるかに基づいて調整してください。

最良の結果を得るためのヒント

• 写真は品質 80、スクリーンショットは 90 から始める: ほとんどの視聴者が結果と元を区別できない地点です。より小さなファイルが欲しければ下げる、細部やテキストが多い画像なら上げる。
• 可能なら WebP を使う: WebP サポートは 2024 年で 97% 超のブラウザに達しています。それを欠く少数のために、picture 要素で JPEG フォールバックを出荷します。AVIF はさらに節約できますが、使うエンコーダが十分速いか確認してください。
• 圧縮前にリサイズ: ウェブで 800px で表示する 4000px の写真は、品質に関係なく帯域幅を浪費します。実際に表示する最大サイズ(網膜画面では多くの場合 CSS ピクセル幅の 2 倍)にリサイズしてから圧縮します。
• オリジナルを保持: オリジナルファイルではなくコピーを常に圧縮します。オリジナルからは再圧縮できますが、圧縮で失われたデータは復元できません。
• 公開時はメタデータを削除: EXIF データには GPS 座標、カメラモデル、名前まで含まれる可能性があります。ブラウザベースの圧縮ツールは通常自動的に削除しますが、プライバシーが重要なら確認してください。
• メール用に目標ファイルサイズを設定: Gmail 添付は 25 MB が上限、多くの企業システムは 10 MB が上限です。安全のため画像 1 枚あたり 1〜2 MB を目標にします。
• ウェブ用にプログレッシブ JPEG を選ぶ: プログレッシブ JPEG は上から下へパスで読み込まれ、シャープになる前にぼんやりしたプレビューを表示します。現代のデコーダはこれを流暢に処理し、ベースラインよりわずかに小さく圧縮されることがよくあります。
• 同じ画像を繰り返し再圧縮することを避ける: 各パスで歪みが追加されます。再編集する可能性があるなら、可逆マスターを保持してそこから毎回再エクスポートします。

どのフォーマットをいつ使うか

2024 年の新コンテンツのベストプラクティスは、サポートされる場所には AVIF、普遍的な現代のフォールバックとして WebP、絶対の最終手段として JPEG または PNG を出荷することです。HTML の picture 要素はこれを綺麗に処理します。

よくある落とし穴

• 既に圧縮された画像を再圧縮する: JPEG を品質 80 で再保存しても節約は倍にならず、別のラウンドの歪みが追加されるだけです。オリジナル(または可逆マスター)から 1 回だけ圧縮します。
• コンテンツに不適切なフォーマット: テキスト付きロゴを JPEG 圧縮すると、文字の周りに目立つリンギングが発生します。4000x3000 の写真を PNG 保存すると 30 MB ファイルになります。コンテンツにフォーマットを合わせます。
• 品質スライダーが 90 で過剰に感じる: JPEG 品質スケールは線形ではありません。90 から 80 への移動は 100 から 90 への移動よりはるかに多く節約し、目に見えるコストはほとんどありません。
• 網膜画面を忘れる: 600px CSS スロットに表示される 600px 画像は、電話や現代のラップトップではぼんやり見えます。CSS ピクセルの 2 倍でエクスポートし、ブラウザに縮小させます。
• カラープロファイルの削除: 埋め込み ICC プロファイルを削除すると、広色域ディスプレイで色が顕著にずれることがあります。現代の圧縮ツールはこれを保持しますが、古いものはそうでないかもしれません。
• すべての PNG を同じビット深度で保存: 白黒テキストのスクリーンショットは PNG-8(256 色)で PNG-24 のごく一部のサイズに収まります。グラフィックの大きな節約に pngquant のような量子化器を使います。
• 悪いフォーマットへの再エンコード: WebP を JPEG に戻すと、品質とサイズの両方の利点が失われます。JPEG フォールバックが必要なら、WebP からではなくオリジナルマスターからエンコードします。
• 小さなサイズで視覚的な差分を信頼する: サムネイルでは見えない歪みも、誰かが拡大した 4K ディスプレイでは明らかです。実際の表示サイズでテストしてください。
• アルファチャンネルを忘れる: JPEG は透明度をサポートしません。透明な PNG を JPEG に圧縮すると、背景が白(またはツールが選ぶ色)で埋められます。
• GIF としてのアニメーション: GIF は MP4 やアニメーション WebP よりも大きく品質が低いです。現代の配信ではほぼ常に変換します。

代替ツールとライブラリ

ウェブ圧縮ツールは、1 つまたは数枚の画像の最速の道です。バッチやスクリプト化されたパイプラインには、コマンドラインツールやライブラリが引き継ぎます。

商品写真パイプラインの自動化には、sharp + MozJPEG + AVIF が 2024 年で最高の速度対品質比を提供します。一回限りのアップロードには、ブラウザツールが利便性とプライバシーで勝ります。

プライバシーと圧縮ツール

画像圧縮ツールは完全にブラウザ内で動作します。選択したファイルは FileReader API で読み込まれ、ブラウザの画像パイプラインでデコードされ、オフスクリーンキャンバスに描画され、canvas.toBlob で再エンコードされます。アップロードもログ記録も共有もされません。機密素材、内部ダッシュボードのスクリーンショット、ID スキャン、画像プルーフとしての契約書ドラフトなどには、このローカルのみのフローが、見知らぬ人のサーバーを信頼するか、誰も信頼しないかの違いです。普通の写真でも、サードパーティに見せたくない EXIF メタデータ(GPS 座標、デバイスのシリアル番号、タイムスタンプ)が含まれることがよくあります。キャンバスベースのパイプラインはデフォルトでほとんどの EXIF を取り除き、アップロードがないため、データはどのみちページを離れません。写真を小さくするほど日常的な作業では、プライバシーのデフォルトは: 何もページを離れない、何も保存されない、何も共有されない、であるべきです。