Google製の画像圧縮・変換サービス『Squoosh』の使い方

https://squoosh.app/

Squoosh（スクワッシュ）とは、Googleが開発した画像変換・圧縮用のWebサービスで、変換前後の画像をリアルタイムで比較しながら設定を調整できるという特徴があります。

Webで使用する画像サイズは軽ければ軽いほど良い一方、デザイン的な観点から画質もある程度担保したいというようなニーズも多いと思います。Squooshは、プレビュー画面で変換前後の画質をリアルタイムで確認しながら圧縮設定を調整することができるので、ファイルサイズと画質の両面で最適な結果を得たい場合にとても便利です。Squooshの主な特徴としては以下の通りです。

• 8種類の画像形式への変換に対応

• 圧縮前後の画質をプレビュー確認できる

• ファイルサイズの縮小率のパーセンテージ表示

• ローカル環境で処理されるのでセキュリティ的にも安心

• インストールしてデスクトップアプリとしても利用可能

Squooshには、変換・圧縮・リサイズといった画像の最適化に必要な機能が揃っています。特に、Webサイトの高速化に適した「JPEG XL」「MozJPEG」「OxiPNG」「WebP」といった圧縮技術やファイル形式への変換をサポートしていることが特徴です。

• AVIF

• JPG

• PNG

• JPEG XL（Safariのみ対応のJPEG新規格）

• MozJPEG（MozillaによるJPEGエンコーダ）

• OxiPNG（PNGのロスレス圧縮）

• WebP

• WebP v2

関連記事

WebPとは？高い圧縮率によるメリットを解説！変換ツールも紹介

WebP（ウェッピー）とは、Googleが開発した画像フォーマットの一種で、Web上での利用に適している形式です。高い圧縮率背景透過に対応アニメーションに対応上記の特徴があるため、Webサイトの制作者やデザイナーにとって、効率的な画像管理と高い表現力を両立するための重要な選択肢となっています。WebP最大の特徴とも言えるのが、圧縮率が高く画像が軽量であることです。JPEGやPNGといった従来のフォーマットと比べて、同じ画質でもファイルサイズを大幅に削減できるため、Webページの読み込み速度が速く

Squooshの使い方はとても簡単。

1. 圧縮・変換したい画像をドラッグ&ドロップ

2. 圧縮率・リサイズ等の設定を調整

3. 右下のボタンでダウンロード

画像の選択は、ドラッグ＆ドロップの他にも利用している環境でコピーした画像を貼り付けて選択することもできるため、Figmaなどのデザインツール上で画像をコピーして使えば、画像を一度書き出したりダウンロードすることなく変換が行えます。

関連記事

Figmaで選択したレイヤーやグループを画像としてコピーするショートカット

Figmaで作ったデザイン、またはその一部だけをちょっと画像として他のところに貼り付けたい時ってありませんか？画面デザインをMiroやパワーポイントに貼り付けるときなど、いちいちエクスポート機能を使って書き出すと時間がかかります...そんな時には、画像としてコピーしたいレイヤーやグループ、フレームを選択した状態で『Command ⌘ + Shift + C』のショートカットを使うと、選択した部分をpng画像としてクリップボードにコピーすることができます！一つのレイヤーやグループだけではなく、複数

Squooshの圧縮設定には専門的な設定が多く存在します。しかし、基本的にはこの「Quality」設定で画質を調整するだけでも十分な効果が実感できると思います。圧縮後にファイルサイズがどのくらい縮小されたのかがわかりやすくダウンロードボタンの横に表示されるため、ファイルサイズと画質のバランスを見極めやすいですね。

Squooshでは、画像を圧縮するだけでなく出力サイズを変更することもできます。サイズの変更によるファイルサイズの節約率も表示されるため、サイズ変更と圧縮により総合的にファイルサイズを縮小できていることがわかりやすいです。

ブラウザのネットワークパネルで確認しても画像のアップロードを行っていないことがわかります

Squooshのような画像変換を行うサービスで気になるのが、「オリジナル画像がサーバーに送信されているのではないか？」という点です。もし、オリジナル画像がサーバーに送信されているのであればセキュリティ的な観点から利用しにくいという場合も多いですよね。その点、Squooshはユーザーのブラウザ上ですべての画像処理を行うため、画像自体をサービス側にアップロードするようなことはありません。

Squooshを頻繁に利用するという場合は、Webページ右上の「Install」ボタンからデスクトップアプリとしてダウンロードして使用することが可能です。

Squooshは、圧縮前後の画像を見比べながらパラメーターを調整できる使い勝手が大きな利点ですね。ただし、GifやSVG、PDFの圧縮には対応しておらず、まだデフォルトの設定での圧縮率で他のツールに劣る場合もあります。以下の記事では、デフォルトの設定でSquooshよりも高い圧縮率となるTinifyやCompressor.io、またPDF圧縮に対応したImageRecycleなども紹介しています。ぜひ、そちらも参考にして目的に合わせた最適なツールを見つけてみてください。

関連記事

オンラインで使える無料の画像圧縮・軽量化ツール10選！

この記事では、画像ファイルの圧縮ツールをご紹介します。下記のサイトは、すべてブラウザから手軽に使用できるサイトです。また、JPEGやPNGだけでなく、Web用の高圧縮フォーマットであるWebPや、汎用性の高いベクターデータフォーマットであるSVGなどに対応しているツールもあります。いずれも無料で使えるツールを厳選していますので、気になるサイトがあればチェックしてみてください。ツール名JPEGPNGWebPGIFSVGBMPAVIFPDF概要Squoosh〇〇〇 〇 Googleが開発した画像

最近では、SSG（Static Site Generator）などを使用してWebサイトの生成時にまとめて画像の変換・圧縮を行うことも多くなってきました。しかしヒーローエリア用の画像など、画質とファイルサイズのバランスを細かく調整したいようなケースはまだまだ存在するのではないでしょうか？このような場合に、SquooshはWebサイトの高速化とクオリティの担保という両面の課題を解決するとても便利なオプションとなりそうです。

Webデザインに関する記事をもっと読む

「Webデザイン」に関連する記事一覧

「より良い未来」をつくるデザイナーのためのWork & Lifeマガジン『unprinted』では、Webデザインに関する学習コンテンツや最新情報など、デザイナーのためのコンテンツを配信中