Googleの画像圧縮アプリSquooshが便利!使い方を画像付きで解説!

ブログ

※本ページにはプロモーションが含まれている場合があります。

こんな方におすすめです。

・Squooshって何?何ができるの?
・Squooshの使い方やすごいところを知りたい!
・画像を最適化してサイトの表示速度を上げる方法を知りたい!

本記事の内容

  • Squooshの機能やメリット
  • Squooshの使い方(PC・スマホ)
  • SquooshとSEO対策についてのよくある質問

本記事を読むと、Squooshのすごいところや使い方だけでなく、SEO対策のための最適な使い方やSquooshと合わせてできるSEO対策もわかります。

以下の経歴と実績を持つなべたろ(@seonabe)が解説するよ♪
なべたろの実績

  • ライター100名以上の組織の法人を経営→株式譲渡
  • 立ち上げから半年で月間1,000万PVを達成
  • 1年で月間1200万PVを達成
  • 年商約1億円を達成
  • 法人向けコンサル1社あたり月額60~100万円
  • PVメディア・アフィリエイトサイト・オウンドメディア・企業ブログなどSEOサイトの立ち上げ・コンサル実績多数

\ 月間1300万PVのプロが解説 /
↓検索順位1位を取りまくったノウハウを4万文字で解説(無料)↓

>> 【検索1位量産】ブログを爆速で伸ばすSEOの『抑えどころ』をプロが徹底解説!

「Squoosh」は画像の圧縮・変換が簡単!

①「Squoosh」は画像の圧縮・変換が簡単!
Squoosh
>> Squoosh

SquooshはGoogleが無料で提供しているWebアプリで、画像の圧縮や変換がとても簡単に行えます。

画像を圧縮・変換するサイトは他にもたくさんありますが、Squooshがあれば他はいらないくらい使いやすく便利です。

操作がとても簡単

Squooshのメリット①:操作がとても簡単
まずなんと言っても操作が簡単で使いやすいです。

画像をドラッグ&ドロップでアップロードしたら、後は上の画像のようにわかりやすいメニューで操作するだけ。

必要な機能が十分にありながら、余分な機能がなくてわかりやすいのも魅力だね♪

変換後の画像をリアルタイムに確認できる

他のツールと大きく違うのが、なんとリアルタイムで変換後の画像と比較しながら編集できること。
Squooshのメリット②:変換後の画像をリアルタイムに確認-1
左側に変換前・右側に変換後の画像が表示され、リアルタイムで劣化の具合などを比較しながら編集できます。
Squooshのメリット②:変換後の画像をリアルタイムに確認-2
画面の右下には画像の圧縮率が表示されているのですが、リアルタイムで画像を見れるので、圧縮率と画像の劣化具合のバランスを確認してベストな変換を選ぶことができます。

変換後の画像同士を比べることもできる

Squooshのメリット②:変換後の画像をリアルタイムに確認-3
左下のメニューを触ることで左側の画像も変換・圧縮画像を表示して、変換後の画像同士を比較することもできます。

変換するフォーマットや画像の劣化具合を見比べたいときなどに便利です。

変換できるフォーマット形式が豊富

Squooshのメリット③:変換できるフォーマット形式が豊富
Squooshは変換できる画像のフォーマット形式が非常に豊富で、以下のフォーマットから選択できます。

  • AVIF
  • JPG
  • PNG
  • JPEG XL
  • MozJPEG
  • OxiPNG
  • WebP
  • WebP v2
  • GIF
  • BMP
  • JPEG2000
  • TIFF

※ブラウザによって多少異なります。

JPEG画像ならMozJPEG、PNG画像ならOxiPNGを選択することで、画質をほとんど落とさずに大幅に圧縮できます。

画像によっては90%前後も圧縮することもできます。

Google推奨の次世代フォーマット「WebP」にも対応

Googleが推奨している次世代フォーマットである「WebP」にも変換できます。

Googleのサイトの表示速度計測ツール「PageSpeed Insights」では、ページ速度を改善する改善案としてもWebPが提案されています。

SEO対策のために是非取り入れたい画像です。

WebPをWordPressで使う方法は以下の記事で詳しく解説しています。

>> WordPressでWebP画像に変換・対応させる3つの方法【WebP画像】

プラグインでWebPに変換する方法は以下の記事で解説しています。

>> 【画像付き】EWWW Image OptimizerでWebP画像への変換を設定する方法

リサイズや色彩調整もできる

Squooshは画像の圧縮・変換だけでなく、リサイズや色彩調整も簡単にできます。
Squooshのメリット④:リサイズや色彩調整もできる-1
上の画像のようにリサイズメニューや
Squooshのメリット④:リサイズや色彩調整もできる-2
色彩調整のメニューも直感的に使いやすいです。

色彩調整をすると画像を軽くしながらモノトーンのようなおしゃれな画像にすることもできるね♪

スマホでも使いやすい

スマホでもPCと同じようにサクサク簡単に使えます。
Squooshのメリット⑤:スマホでも使いやすい

電車の中などの移動中でも作業ができるから便利だね♪

ローカル変換だからセキュリティも安心

他のツールと大きく異なる特徴の1つで、SquooshはPCやスマホ上でローカルで画像を圧縮・変換するツールなのでセキュリティ面も安心です。

ローカルと言えども、ブラウザで使うのでツールのインストールは不要です。

通信量の節約にもなるね♪

圧縮率と画質がすごい

もちろん変換する画像のフォーマットにもよりますが、圧縮率の高さと仕上がりの画像の綺麗さは驚きです。
Squooshのメリット⑦:圧縮率と画質がすごい
画像の劣化がほぼ見られないにも関わらず、92%の圧縮率です。

92%も圧縮すると画像が荒くなりそうなものですが、見た目ではほぼわかりません。

サイトの表示速度が改善されること間違いなし♪

Squooshのデメリットは一括変換できないこと

②Squooshのデメリットは一括変換できないこと
便利で素晴らしいSquooshですが、唯一のデメリットとして「複数の画像を一括で変換できない」ことが挙げられます。

1枚あたり数秒で変換できるので一括で変換できなくても最悪なんとかなりますが、

「どうしても一括で変換したい!!」

という方は

Web上で一括で画像を圧縮したいならTinyPNG

一括で

  • WebPに変換
  • リサイズ
  • 画像の圧縮

などをしたいならWordPressプラグインのEWWW Image Optimizerがおすすめです。

Squooshの使い方:PC

③Squooshの使い方:PC
それではここからはSquooshの使い方をご紹介します。

とっても簡単だよ♪

ドラッグ&ドロップで画像をアップロード

Squoosh
>> Squoosh

まずはSquooshにアクセスして画像をアップロードします。
Squooshの使い方:ドラッグ&ドロップで画像をアップロード-1
画像をドラッグ&ドロップすることで簡単にアップロードできます。
Squooshの使い方:ドラッグ&ドロップで画像をアップロード-2
すると画面が上の画像のように切り替わります。

変換するフォーマットを選択

次は画像をどのフォーマットに変換するかを選択しましょう。
Squooshの使い方:変換するフォーマットを選択-1
「MozJPEG」と書かれた箇所をクリックすると、
Squooshの使い方:変換するフォーマットを選択-2
変換できる画像フォーマットが一覧で表示されるので、自由に選択しましょう。
Squooshの使い方:変換するフォーマットを選択-3
選択すれば、リアルタイムで変換が進みます。

なお、

  • JPEG画像として大幅に圧縮したいならMozJPEG
  • PNG画像として大幅に圧縮したいならOxiPNG
  • WordPressでSEO対策のために使いたいならWebP

がおすすめです。

「Quality」で画質と圧縮度合いを調整できる

「Quality」のゲージを操作すると、画質をどれだけ保つかを調整して圧縮率を調整できます。

試しにQualityを「4」まで下げてみると、、、
Squooshの使い方:「Quality」で画質と圧縮度合いを調整できる

画質は荒くなり、その代わり圧縮率が99%となっています。

「Resize」で画像の大きさを調整

Squooshの使い方:「Resize」で画像の大きさを調整-1
「Resize」をONにすると画像の大きさを変更することができます。
Squooshの使い方:「Resize」で画像の大きさを調整-2
上の画像のようにメニューが表示されるので、「Width」や「Height」を変更しましょう。

ブログの画像は、「Width」は最大1024pxあれば十分だよ♪

画像の高さと幅の比率を変えたい場合は「Maintain aspect ratio」のチェックを外すと比率も変更できます。

比率も変えたい場合にはのチェックを外すことで設定できるようになります。

「Reduce palette」で色彩を調整

Squooshの使い方:「Reduce palette」で色彩を調整-1
「Reduce palette」をONにすると色彩調整ができます。

色彩調整とは具体的には

  • 色を減らすことでデータを小さくする

という感じです。

試しに「Colors」の数字を落としてみると、、、
Squooshの使い方:「Reduce palette」で色彩を調整-2
画像が白黒のようになっていきます。

これはこれでおしゃれかも♪

設定できたら画像をダウンロード

Squooshの使い方:設定できたら画像をダウンロード
設定したい箇所を全て設定できたら、画面右下のダウンロードボタンをクリックすれば画像をダウンロードできます。

リアルタイムで仕上がりを確認してからダウンロードできるので安心だね♪

Squooshの使い方:スマホ

④Squooshの使い方:スマホ
Squooshはスマホでもとっても簡単に画像の変換・圧縮ができます。

隙間時間にも作業できるから便利だね♪

画像をアップロード

まずは画像をアップロードします。
Squooshのスマホでの使い方-1
Squooshのサイトを開き、上の画像の箇所をタップします。
Squooshのスマホでの使い方-2
すると画像をどこからアップロードするか選択できるので、自由に選択してアップロードします。

PCとの違いは、画像をドラッグ&ドロップできないことくらいです。

PCと同じよう使える

Squooshのスマホでの使い方-3
アップロードすると上の画像のように画面が切り替わります。

機能や使い方もPCと同じで、リアルタイムで変換前後の画像を比較しながら作業できます。

PCと同じように変換してみましょう。

Squooshアプリのインストールも簡単

⑤Squooshアプリのインストールも簡単
Squooshはアプリをインストールしなくてもブラウザでさくっと使えますが、

PC用のアプリも用意されています。
Squooshのアプリのインストール-1
Squooshトップページの右上に「Install」というボタンがあるので、

ボタンをクリックするとSquooshのアプリのインストールができます。
Squooshのアプリのインストール-2

アプリは上のような感じで、ブラウザ上での操作と同じように使えます。

頻繁にSquooshを使うならアプリをインストールしておくと便利だね♪

SquooshとSEOのよくある質問

⑥SquooshとSEOのよくある質問
この記事を読まれている方はブログをSEO対策するためにSquooshを使われる方も多いと思うので、

SquooshとSEO対策についていくつか解説します。

Q. SEO対策におすすめの画像のフォーマットは?

WebPを使うことがおすすめです。

次世代フォーマットとしてGoogleも推奨しており、Googleの「PageSpeed Insights」ではページ速度を改善する方法として「WebP」が提案されています。

ページ速度が大幅に改善されます。

Q. WordPressでWebPを使うには?

WodPressはデフォルトではWebP画像に対応していない、あるいは画像をWebPに変換することが必要です。

WodPressでWebPを使うための方法は以下の記事で詳しく解説しています。
>> WordPressでWebP画像に変換・対応させる3つの方法【WebP画像】

Q. SquooshかWordPressプラグインはどっちを使えば良いの?

「WordPressはプラグインを入れすぎると重くなるので、プラグインはできるだけ使いたくない」

という方も多いと思いますが、

画像のプラグインに関しては、EWWW Image Optimizerを入れておくと

  • 画像の圧縮
  • 最適化(余分なメタデータの削除)
  • 画像の表示方法の改善(ページの表示速度アップ)
  • 画像のリサイズ・変換

などをしてくれるので、ページの表示速度が大幅に改善できます。

WebPに自動で変換することもできるので、導入することでページの表示速度が大幅に上がります。

画像の圧縮・変換はSquooshが便利!

⑦画像の圧縮・変換はSquooshが便利!
Googleが無料で提供するWebアプリ「Squoosh」について解説しました。

  • リアルタイムで変換前後の画像を比較できる
  • ローカルで変換できる
  • 変換できるフォーマットが豊富
  • 画質が綺麗で圧縮率もすごい

などなどとっても素晴らしいWebアプリなので、さっそく使ってみてください。

画像を最適化してページ速度を改善して、SEO対策をしたい方には以下の記事もおすすめです。

>> WordPressでWebP画像に変換・対応させる3つの方法【WebP画像】
>> 【画像付き】EWWW Image OptimizerでWebP画像への変換を設定する方法

たかが画像と言えどページ速度は大幅に変わります。

売上にも大きく影響するので、できることは全てしておきましょう。

画像以外の最適化による高速化は以下の記事で解説しています。
>> 【2021年最新】Autoptimizeの設定方法と使い方:コード最適化プラグイン【WordPress】


\【無料ブログ講座】LINE限定でノウハウを配信/

ブログの無料講座:公式LINE

公式LINE限定で読めるパスワード付きの記事でがっつり解説しています。

LINE参加者の声


400名が以上参加中!無料で読めます♪

\ 最短で収益化 /公式LINEで無料で学ぶ

\年商1億超えのプロが解説!ブログの収益化方法/
無料で受け取る
\ 年商1億超えのプロが解説!ブログの収益化方法 /
無料で受け取る