画像圧縮・リサイズツール

ブラウザ内で画像のファイルサイズを縮小 — 最大サイズと画質を設定すると、変換前後のサイズが即座に表示されます。アップロードは一切ありません。

1,188回閲覧

圧縮は実際どうやってファイルを小さくするのか

画像を小さくする方法には根本的に異なる2つのアプローチがあり、この違いを混同することが圧縮に関する驚きの多くを説明します。可逆圧縮は、PNGがdeflateアルゴリズムで採用している方式で、ピクセルを一切捨てることなくデータをより効率的に並べ替えて詰め直します — 展開すれば元の画像とビット単位で完全に一致するものが戻ってきます。非可逆圧縮は、JPEGが採用している方式で、代わりに人間の目が最も気づきにくい情報を捨てます:画像を8×8のブロックに分割し、各ブロックにDCT(離散コサイン変換)を適用して粗いディテールと細かいディテールを分離し、画質スライダーを下げるほど高周波の細かいディテールをより強く量子化(丸め処理)します。この丸め処理は不可逆であるため、同じJPEGを低画質で繰り返し再保存すると、そのたびに画質がわずかずつ劣化していきます。

JPEGの画質スライダーを下げすぎると、DCT処理で使われる8×8のブロック境界が「ブロックノイズ」として見えるようになります — 特に空のような滑らかなグラデーションで、モザイク状のブロック感が目立ちます。もう1つの非可逆手法であるクロマサブサンプリング(一般に4:2:0と表記)は、輝度の解像度を保ったまま色の解像度を捨てます。人間の目は色(色度)の変化よりも明るさ(輝度)の変化にはるかに敏感だからです — これだけで、画質スライダーの効果とは別に、色データを通常ほぼ半分にまで減らせるうえ、目に見える劣化はほとんどありません。

具体例:4000×3000の携帯電話写真を幅1600pxにリサイズすると、画質にまったく手を加えていない段階で、元のピクセル数の約16%にまで減ります — ファイルサイズを左右する要素としては、画質よりもサイズ(寸法)の方が大きいのです。ここにJPEG画質75〜85%(ほとんどの人にとって100%と見た目でほぼ区別がつかない水準)を組み合わせると、典型的な6MBの写真は300KB未満に収まり、Webページやフォーム、メール添付に十分な軽さになります。

このツールの処理はすべてブラウザ内のcanvas上で行われます — 写真がどこかにアップロードされることはありません。縦横比を保持し、元のサイズを超えて拡大することはなく、ファイルごとに変換前後のサイズを表示するので、保存する前にトレードオフを判断できます。

知っておきたいこと

  • 画質スライダーが影響するのは非可逆形式(JPEG/WebP)のみです — PNGのスクリーンショットは画質だけではほとんど小さくなりません。PNGのdeflate処理は設計上可逆だからです。この場合、サイズの上限設定がほぼすべての仕事をします。
  • 圧縮によって失われたピクセルデータは元に戻りません — 常にオリジナルファイルを保管し、用途ごとに圧縮したコピーを書き出してください。すでに圧縮済みのファイルを繰り返し再圧縮するのは避けましょう。
  • クロマサブサンプリング(4:2:0)と画質の量子化は互いに独立したパラメータです — エンコーダーは高画質でも強いサブサンプリングを適用したり、低画質でもサブサンプリングを行わなかったりできます。これが、同じ「画質の数値」でもエンコーダーが違うと見た目が異なる理由です。
  • 同等の見た目の画質であれば、WebPはより新しい予測・変換技術を使っているため、通常JPEGより優れた結果になります。ただし互換性を最優先するなら、JPEGが依然として最も安全な選択肢です。

よくある質問

非可逆圧縮と可逆圧縮の本当の違いは何ですか?

可逆圧縮(PNG)は情報を一切捨てずにデータを詰め直します — 展開すると元とまったく同じものが戻ります。非可逆圧縮(JPEG)は、DCT変換と量子化処理を使って、目にはほとんど気づかれない高周波のディテールを永久的に捨てます。そのため、一度圧縮すると一部の情報は二度と戻りません。

JPEGの画質を下げるとブロック状のノイズが出るのはなぜですか?

JPEGはDCT変換によって画像を8×8ピクセルのブロック単位で圧縮します。画質設定を下げるほど各ブロック内の丸め処理が粗くなり、やがてブロックの境界自体が見えるようになります。これが、空のような滑らかな領域で最も目立つモザイク状の「ブロックノイズ」です。

クロマサブサンプリングとは何ですか、なぜ効果があるのですか?

明るさの情報に比べて色の情報を少なく保存する手法です — 一般的には4:2:0と表記され、色は4分の1の解像度でサンプリングされます。人間の視覚は色よりも明るさにはるかに敏感なため、この方法は効果的です。劣化はほとんど目に見えないまま、ファイルサイズは大きく縮小します。

ウェブサイト用にはどんな設定を使うべきですか?

コンテンツ画像:長辺1600〜2000px、JPG/WebPで画質75〜82%。サムネイル:400〜800px。全画面のヒーロー画像:最大2560pxまで、大きなキャンバスを補うため画質は70に近づけます。

PNGがほとんど小さくならないのはなぜですか?

画質スライダーは非可逆形式にのみ影響します。PNGは可逆のdeflate圧縮を使うため、PNGファイルのサイズ削減はほぼすべてサイズの上限設定によるものです。透明度が不要であれば、WebPやJPEGに変換するとはるかに大きく削減できます。

コメント

まだコメントはありません — 最初のコメントを書いてみましょう!

関連ツール