
画像を圧縮する必要があるとします——できればすぐに、アカウントを作らず、自分でコントロールできないサーバーにファイルをアップロードせず、「圧縮完了!」とだけ表示して何も教えてくれないツールで品質を運まかせにせずに。よく知られたツールの多くは、無料プランで5MBの上限があったり、出力結果に透かしを入れたり、実際に何をしたのかをまったく教えてくれなかったりします。
Squooshはこれらすべての問題を解決します。ブラウザのタブで開き、画像をドロップし、設定を調整して、結果をダウンロードするだけです。ログイン不要。リモートサーバーへのアップロードも不要です。圧縮処理はブラウザ内でWebAssemblyモジュールを使って行われ、MozJPEG・libavif・OxiPNG・libwebpといった本番システムで使われているコーデックそのものを使用しています。
このガイドでは、Squooshを効果的に使う方法を解説します。どの状況でどのフォーマットを選ぶか、実際に重要な設定はどれか、そして何もインストールせずにバッチ処理する方法を説明します。
Squooshが実際に行っていること(そしてなぜそれが珍しいのか)
多くのオンラインコンプレッサーは、ファイルをバックエンドサーバーにアップロードし、そこで圧縮を実行して、より小さいファイルを返します。つまり、クライアントの写真・機密モックアップ・まだ公開前のプロダクト画像が、一定期間、他人のサーバーに保存されることになります。その保持ポリシーやセキュリティを信頼することになります。
Squooshは圧縮コーデックをWebAssemblyにコンパイルし、ブラウザのタブ内でローカルに実行します。何もデバイスの外に出ません。これはマーケティング上の主張ではなく、アーキテクチャ上の必然です。アップロード先のサーバーがそもそも存在しないのです。
Google Chrome Labsが開発・メンテナンスしており、Apache 2.0のオープンソースで公開されています。TinyPNGやConvertioといった代替ツールとの比較については、このサイトのSquooshレビューで詳しく比較しています。このガイドは実践的な内容に絞ります——設定、ワークフロー、意思決定です。
どのフォーマットを使うべきか?
最初に決める必要があるのは出力フォーマットです。これは品質スライダーよりも重要です。フォーマットが異なれば、本質的な強みもまったく異なるからです。
| フォーマット | 最適な用途 | ブラウザサポート | JPEGとのサイズ比較 |
|---|---|---|---|
| MozJPEG | 写真、高い色の複雑さ | 全ブラウザ | 基準 |
| OxiPNG | 透明なグラフィック、スクリーンショット | 全ブラウザ | より大きい |
| WebP | 一般的なウェブ画像 | 全モダンブラウザ | 約25%小さい |
| AVIF | ウェブ画像、最高の圧縮率 | Chrome、Firefox、Safari、Edge | 約50%小さい |
| JPEG XL | 将来性重視 | 限定的(実験的) | 約60%小さい |
2026年のほとんどのウェブ画像において、AVIFが正しいデフォルト選択です。同等の視覚品質でWebPより30〜50%小さいファイルを生成でき、ブラウザサポートはすべての主要ブラウザをカバーしています。古いブラウザをサポートする必要がある場合や、モダンフォーマットに対応していないツールへ出力する場合は、WebPが安全なフォールバックです。JPEGはあらゆるプラットフォーム・ビューアーで使えるという普遍的な互換性において引き続き有効です。
PNGはロスレスです。透明性が必要なとき——アイコン、透明な背景付きロゴ、ピクセルパーフェクトなテキスト描画が重要なUIスクリーンショット——にOxiPNGを選びます。写真にはPNGを使わないでください。ファイルが巨大になります。
JPEG XLは技術的には優れていますが、ブラウザサポートが依然として不安定なため、ほとんどの本番用途ではスキップするのが無難です。
実際に違いを生む設定
フォーマットを選んだら、品質スライダーが主なコントロールになります。ただし「品質」の意味はコーデックによって異なり、数値を直接比較することはできません。
ウェブ用写真とヒーロー画像:AVIF品質60〜70から始めてください。積極的に聞こえるかもしれませんが、AVIFは低品質設定をJPEGよりもはるかに優雅に処理します。品質60では、JPEGは通常ブロック状のアーティファクトが見えますが、同じ名目上の設定のAVIFは明らかにきれいです。以下で説明する比較スライダーで確認してください。
Eコマース向け商品写真:WebP品質75〜80、または最大フォーマット互換性が必要な場合はMozJPEG品質75。商品画像はエッジやテクスチャの細部が必要です——品質70以下に下げると、布地・エンボス文字・複雑な形状でぼやけが出ることが多いです。
スクリーンショットとUI画面:圧縮レベル3でOxiPNG。より高いレベルにするとファイルサイズはさらに縮まりますが、処理時間が目に見えて長くなります。ほとんどのスクリーンショットにとって、レベル3が実用的な最適点です。画像に広い単色領域がある場合(UI画面ではよくある)、OxiPNGはAVIFを上回ることがあります——ロスレス圧縮は均一な領域を効率的に処理するためです。
サムネイルとアバター:WebP品質80、実際の表示サイズにリサイズしてください。Squooshにはリサイズパネルがあります——活用しましょう。3024ピクセルのオリジナルを120pxの表示サイズで配信することは、最もよくある画像パフォーマンスのミスの一つです。どれだけ圧縮しても根本的な問題は解決しません。
背景画像とテクスチャ:これらは視線の焦点が低いため、積極的な圧縮に耐えられます。AVIF品質50〜60で通常は問題ありません。テキストの背後に画像がある場合、品質の違いに気づくことはほぼないでしょう。
一般的なルール:AVIF/WebPは品質75から、JPEGは品質80から始めてください。その後、比較スライダーでどこまで下げられるか確認します。
比較スライダーを効果的に使う
比較スライダーこそが、Squooshを結果だけ渡して何も説明しないツールと差別化するものです。左にオリジナル、右に圧縮後の出力があり、下部にリアルタイムのファイルサイズが表示されます。仕切りをドラッグしてどちらの側も確認できます。
コツは:スライダーを中央に合わせ、圧縮で最も劣化しやすい部分に注目することです——シャープなエッジ、細かいテキスト、滑らかなカラーグラデーション、人物の顔。これらが最初にアーティファクトが現れる場所です。これらの部分で意味のある違いが見えない場合は、現在の品質設定が適切です。ぼやけ・ブロック・カラーバンディングが見えたら、品質を上げてください。
特にAVIFでは、エッジだけでなく色の遷移部分を注視してください。AVIFは低品質設定の滑らかなグラデーションで微妙なカラーバンディングを生じることがあります——空の写真や柔らかい色変化のある背景で最も目立ちます。詳細な商品写真ではあまり目立ちません。
OxiPNGの場合、比較スライダーは主にロスレス圧縮が正しく機能したことを確認するためのものです。出力はオリジナルと同一に見えるはずです——そうでない場合は何か予期しないことが起きています(まれですが、素早く確認する価値はあります)。
品質が良好に見えたら、Squooshのインターフェースでファイルサイズの削減量を確認してください。ウェブ画像の合理的な結果は、オリジナルより60〜80%小さくなることです。JPEG写真をAVIFに変換して40%未満の削減しか得られない場合は、品質をさらに下げてみてください——ほぼ確実にまだ節約の余地があります。
リサイズ:人々が飛ばすステップ
品質設定だけが唯一のレバーではありません。実際の表示サイズへのリサイズは、品質調整よりも大きなファイルサイズの節約をもたらすことがよくあります。
Squooshのリサイズパネルでは、目標の幅や高さを設定できます。アルゴリズムオプションについていくつか補足します:Lanczos3はエイリアシングを最小限に抑えた最もシャープな結果を生み、ほとんどの写真に適した選択肢です。Triangleはより速いですが柔らかくなります。Mitchellは両者の中間です。
品質スライダーに触れる前に、元の解像度が本当に必要かどうか自問してください。サイトがブログ投稿の画像を幅800pxで表示するなら、3024ピクセルのオリジナルを配信するのは最大圧縮をかけてもムダなデータです。まずリサイズし、それから圧縮する。組み合わせた節約はほぼ常に、どちらか一方のアプローチより大きくなります。
Squooshはリサイズを圧縮の前に適用します——これが正しい順序です。リサイズパネルで最終的なサイズを設定し、圧縮パネルで品質を調整すると、ダウンロードされたファイルには両方の変更が反映されます。
一度に複数ファイルを処理する
SquooshのウェブUIは一度に一枚の画像を処理します。フォルダ内のファイルを一括圧縮するには、Squoosh CLIが答えです——永続的なインストールは不要です。
Node.jsがインストールされていれば、次のコマンドを実行できます。
npx @squoosh/cli --avif '{"quality":65}' *.jpg
これで現在のディレクトリ内のすべてのJPEGをAVIF品質65で圧縮し、.avif拡張子を付けてオリジナルと並べて出力ファイルを書き込みます。WebPの場合:--webp '{"quality":80}'。MozJPEGの場合:--mozjpeg '{"quality":75}'。圧縮しながらリサイズするには:--resize '{"width":1200}'。
CLIはウェブUIと同じWebAssemblyモジュールを使用するため、出力は同一です。これは、CMSや公開パイプラインにアップロードする前にウェブ用に加工が必要な生写真のフォルダがあるワークフローで特に便利です。永続的なインストールなし、サブスクリプションなし、サーバーなし。
Squooshが適切でない場面
SquooshはラスターイメージのみをサポートしますSVGファイルについては、SVGOMGが同等のツールです——ブラウザ内でローカルに実行され、ファイルサイズ制限もアカウントも不要です。SVGをSquooshで処理しないでください。
非常に大きなファイル——100メガピクセル超のパノラマ、中判カメラからのTIFFファイル——の場合、Squooshはブラウザのメモリを使い果たすことがあります。デスクトップツールの方がこれらをうまく処理できます。
品質コントロールなしで素早くJPEGやPNGを圧縮する必要があり、ファイルのプライバシーを気にしない場合、TinyPNGはその特定の作業でより速いです。TinyPNGは判断を自動化し、スライダーをスキップします。トレードオフを気にせず、ただ小さくしたい場合に便利です。
画像以外のフォーマット変換(ドキュメント・動画・音声)については、Squooshは役立ちません——画像圧縮に特化して作られたツールです。
採用する価値のある実践方法
ダウンロード前にファイル名を変更してください。Squooshはimage-compressed.avifのような名前を生成します。名前を変えずにひとつのセッションで複数のファイルを処理すると、image-compressed (1).avif・image-compressed (2).avifというフォルダが出来上がります。
オリジナルを残しておいてください。AVIFとWebPの圧縮はロッシー(非可逆)です。後で異なる品質レベルや出力フォーマットが必要になったとき、オリジナルから始めたいはずです——すでに圧縮されたファイルを再圧縮すると品質の劣化が重なります。
すべての画像に同じ品質の数値を適用しないでください。詳細なクローズアップ写真は、同じ名目上の設定でも広い風景写真とは異なる方法で圧縮されます。ある画像では気にならない品質値が、別の画像では明らかに見えることもあります。スライダーが答えを教えてくれます——固定の数値より信頼してください。
画像の最適化は正しく行う価値のある作業のひとつです。そして適切なツールは無料で、アカウントなしで動き、完全にブラウザ内で実行されます。そのカテゴリのツール——ログイン不要、アップロード不要、追跡なし——をもっと探すなら、nologin.toolsに用途別に整理された数百のツールが揃っています。