画像圧縮

このツールは、写真やスクリーンショットをどこにも送らずに軽くします。ファイルを選び、出力形式を選んで画質スライダーを動かすと、サイズの変化がリアルタイムで見えます。

実際にはどうやって圧縮している?

内部ではjSquashという、Googleのブラウザ内画像圧縮ツールSquooshと同じコーデックをベースにしたWebAssemblyエンコーダー群を使っています。そのため、JPEGとWebPの圧縮は低速なcanvasベースの手法に頼らず、タブの中でネイティブに近い速度で実行されます。エンコード自体はWeb Worker上で行われるため、大きな画像がバックグラウンドで再エンコードされている最中でも、画質スライダーの操作がもたつくことはありません。最大幅・高さを指定することもでき、元の縦横比を保ったまま縮小しますが、元のサイズより大きく拡大されることはありません。

画像はどこかにアップロードされる?

いいえ。すべてクライアント側で処理されるため、画像がサーバーに触れることはなく、大きなファイルのアップロード待ちも発生しません。再エンコードの過程でEXIFメタデータも自動的に取り除かれ、カメラやスマートフォンが埋め込んだGPS座標なども一緒に消えます。写真を公開の場に投稿する前に、位置情報を持ち出したくない場合は覚えておくと安心です。元ファイルのメタデータは再エンコード後にはそもそも残っていません。

どんな場面で役立つ?

よくあるのは、バグ報告や問い合わせ用にスクリーンショットをファイルサイズ制限内に収めたいとき、CMSにアップロードする前に商品写真をまとめて軽くしたいとき、古いPNGをWebPに変換してページを軽くしたいときです。WebPとJPEGはどちらも非可逆形式なので画質スライダーが効きますが、PNGの圧縮は可逆なので、PNGを軽くしたいときは画質を落とすよりリサイズが主な手段になります。

コンテンツに合った形式を選ぶことも、スライダーの調整と同じくらい大切です。グラデーションや細かいディテールの多い写真は、一般にPNGよりJPEGやWebPの方が圧縮効率が良く、逆にテキストのスクリーンショットや単純な図のようなフラットなグラフィックは、画質設定に頼らなくてもPNGの方が小さく収まることが多いです。サイズの表示はスライダーを動かすたびにリアルタイムで更新されるので、これ以上サイズが縮まなくなり画質だけが目に見えて劣化し始めるポイントを見極めて、その手前で止めるとよいでしょう。最大幅・高さを制限するのも有効で、高画質の小さい画像は、低画質のフルサイズ画像よりファイルサイズでも見た目でも優れていることがよくあります。圧縮前にブラウザが元画像をどう読み込んでいるかについては、MDNのcreateImageBitmapのガイドを参照してください。