ブラウザで画像圧縮・リサイズ！Googleの「Squoosh」を使ってみた

先日、「Squoosh」というGoogleのPWA（Progressive Web Apps）があることを知りました。

Googleの「Squoosh」というウェブアプリでは、ブラウザで画像を最適化（圧縮・リサイズ）できるようです。

嬉しいことに無料&登録不要で利用できるようです。

どのような機能が使えるのか気になり、利用してみることにしました。

Googleの「Squoosh」で画像の最適化

 

「Squoosh」はブラウザ上で画像を圧縮・リサイズできるウェブアプリ。

今回テストする画像を探していたところ、フリー素材サイト「ぱくたそ」で面白い画像を発見しました。

 

 

「PUBG」レベル3のヘルメットを被っています（笑）

最近スマホコントローラーを購入するほど「PUBGモバイル」にハマっているので、この画像を最適化してみることにしました。

「ぱくたそ」にはさまざまな企画・コラボ写真があり、おもしろいフリー素材サイトだと思います。

関連する記事:「ここだけおさえれば完璧！本当に使える商用利用OKのフリー素材サイトのまとめ」

 

画像の圧縮

 

「Squoosh」で画像を圧縮する場合は画像をドラッグ&ドロップするか、「select an imag」をクリックするとWindowsではエクスプローラーが開くので画像を選択します。

 

 

画像をアップロードすると、画像編集画面が開きます。

画像の左半分が変更前、右半分が変更後の画像です。

そして左側のメニューに変更までの画像サイズ、右側に編集したい項目と変更後の画像サイズが表示されます。

さらに画像サイズの横に編集した画像のダウンロードアイコンがあります。

まずは画像を圧縮してみることにしました。

画像を圧縮する場合は「Quality（画質）」の数字を変更します。

 

 

普段ブログに画像を載せるときは画質を30%にしているので、「Quality（画質）」を0.3にしてみました。

すると画像サイズが116kbから28.5kbになり、75%圧縮できたことが一目でわかります。

リアルタイムで編集後の画像や画僧のサイズを確認できるのは魅力だと思います。

 

 

さらに、「Show advanced setting」の項目をチェックすると詳細な設定をすることもできます。

ただ残念なことに、「たつじんｗ」と名乗っていますが完全な素人です（笑）。

詳しくないので「Show advanced setting」にある項目で本格的に画像を圧縮する場合、十分な機能が揃っているのかはわかりません。

 

画像のリサイズ

 

画像のリサイズをする場合はメニューの「Edit」にある、「Resize」にチェックを入れます。

 

 

すると、縦横のサイズを指定してリサイズできます。

画像を圧縮する場合と同様にリサイズでも変更後の画像サイズを確認できます。

 

 

他にも画像を反転させたり、カンバスのカラーを変更できます。

 

利用できるブラウザと画像の種類

「Squoosh」はGoogleのChromeだけでなく、SafariやEdge・Firefoxでも利用できます。

今回はPCのChromeブラウザで画像を圧縮してみることにしましたが、スマホでも利用できます。

 

 

自分はiPhoneを利用していますが、iPhoneのSafariやChromeブラウザでも利用できます。

また、モバイルで利用する場合は端末に保存してある画像だけでなく、カメラアプリで写真やビデオを撮影して編集することもできるようです。

そして編集できる画像の種類はJPEGとPNGだけでなく、Googleが開発している静止画フォーマットのWebPにも対応しています。

 

Photoshopとの比較

どちらもデバイスを問わず画像を圧縮・リサイズできます。

けれど「Squoosh」は物凄く高速です。

 

 

普段画像を最適化する場合はPhotoshopを利用していますが、Photoshopは起動に少し時間がかかります。

画像を編集せず、単純な画像のリサイズ・圧縮する場合は「Squoosh」の方が簡便だとだと思います。

ただ、「Squoosh」は画像の「切り抜き」まではできません。

「Squoosh」は画像の圧縮・リサイズだけでなく、「切り抜き」までする必要がある時は他のツールも使う必要があります。

画像の圧縮・リサイズだけでなく、画像の切り抜きや文字入れなどする場合はPhotoshopの方が全てを完結できるので便利だと思います。

ただ、標準の機能ではPhotoshopは「WebP」には対応していません。

Google製だけあって「Squoosh」は「WebP」に対応しています。

まとめ

「Squoosh」は高速で、画像を圧縮・リサイズするのに便利なウェブアプリだと思います。

先日自動で画像から人物を切り抜いてくれる「remove.bg」というウェブサービスを使ってみました。

とても便利なウェブサービスだと思いますが、便利さで「Squoosh」も引けを取らないと思います。

問題があるとすれば「Squoosh」の言語が英語なこと。

「Squoosh」は直感的な操作で画像を圧縮・リサイズできますし、基本的な機能で使われている単語は自分のように英語に弱くてもわかると思います。

それでも厳しい場合はブラウザの翻訳機能を使えば何とかなると思います（笑）。

 

今日のたつじんへの一歩