画像圧縮ツール

画像の重さはどこから来るのか

画像ファイルは、ピクセルの格子をコンパクトに書き記したものです。そのサイズは2つの数で決まります。ピクセルがいくつあるかと、形式が1ピクセルあたり何バイト使うかです。

1つ目の数は忘れられがちです。スマートフォンの写真はおよそ4000×3000ピクセル、合計1200万ピクセルです。ウェブページの段の幅は800 CSSピクセルを超えることはまれで、高精細な画面でも実ピクセルで1600です。そこに元の写真をそのまま送ると、ブラウザーは1200万ピクセルをダウンロードして、そのうち1000万を捨てることになります。画像の幅を半分にするとピクセル数は4分の1になり、ファイルサイズもほぼ同じだけ減ります。このツールに最大幅と最大高さがあるのはそのためです。どちらかを設定すると、各画像は縦横比を保ったまま収まるように縮小されます。すでに小さい画像はそのままのサイズです。

2つ目の数は、形式と画質の設定によって決まります。非可逆形式はすべてのピクセルを保存しません。目には同じに見える記述を保存し、画質の数値は、どれだけの違いを許容するかを表します。

どの形式を選ぶか

ウェブページでは、新しい形式を配信しつつ、古いブラウザー向けの代替を残せます。

<picture>
  <source srcset="team.avif" type="image/avif">
  <source srcset="team.webp" type="image/webp">
  <img src="team.jpg" alt="The team in the workshop" width="1600" height="1067">
</picture>

このページがファイルに対して行うこと

どのファイルも同じ手順を通ります。一度に1ファイルずつ処理するので、メモリ使用量は増え続けません。

1. 先頭のバイトを読んで、形式とピクセルサイズを調べます。40 MBまたは約50メガピクセルを超えるファイルは、タブが固まる前に受け付けを断ります。
2. ブラウザーが画像をデコードし、カメラが記録した回転を適用するので、縦向きの写真は縦のままです。
3. 画像を目標のサイズでキャンバスに描きます。
4. キャンバスをエンコードします。JPEG、WebP、PNGはブラウザー内蔵のエンコーダーを使います。AVIFはWebAssemblyにコンパイルしたlibavifを使います。これは3.5 MBのファイルで、初めてAVIFを選んだときにこのサイトから取得します。バックグラウンドのスレッドで動くので、ページは反応し続けます。

新しいファイルはピクセルだけから作られるので、ほかには何も付いてきません。EXIFブロックも、GPSの位置も、カメラのシリアル番号も、埋め込みのサムネイルもありません。色はウェブの標準色空間であるsRGBに変換されます。

結果の読み方

各カードには、変換前後のサイズ、削減した割合、変換前後の寸法が表示されます。比較表示は画質の判断のためにあります。顔、空、文字の行の上で仕切りをドラッグしてください。圧縮の影響が最初に出るのはそこです。100%表示で何も違いがわからなければ、画質を10下げてもう一度見てください。

新しいファイルのほうが大きくなることもあります。たいていは、PNGに変換した写真、すでに強く圧縮された元画像、100近くに設定した画質のどれかです。カードにそう表示され、代わりに元の画像を保存できます。

2つの結果はブラウザーによって変わります。SafariはキャンバスからWebPを書き出せずPNGを返しますが、ツールはそれを検出してお知らせします。iPhoneのHEIC写真を開けるのはSafari 17以降だけです。それ以外では、先にJPEGで書き出してください。