【Squoosh】Google推奨の画像圧縮Webツール【簡単に使えて圧縮しても画像が荒れない】

https://toreblog0928.com

ブログ

【Squoosh】Google推奨の画像圧縮Webツール【簡単に使えて圧縮しても画像が荒れない】

簡単に使えて、圧縮しても画像が荒れないWebツールがあったら便利だと思いませんか?

今回の記事では、それを実現する「Squoosh」について紹介していきます。

この記事はこんな人におすすめ

  • ブログを運営している
  • 使いやすい画像圧縮ツールを知りたい
  • 画像荒れが少ない画像圧縮ツールを使いたい

ブログを運営している人にとって、「サイト表示速度」は永遠のテーマです。

わたしも表示速度を改善するために試行錯誤していて、Google推奨の画像圧縮Webツール「Squoosh」がとても便利!

「Squoosh」使い方や、画像圧縮前後の違いなどを紹介していきます。

この記事の内容

  • 「Squoosh」とは
  • 「Squoosh」でできること
  • 「Squoosh」圧縮前後の画像比較

「Squoosh」とは…

【Squoosh】Google推奨の画像圧縮Webツール
https://squoosh.app/

「Squoosh」は、Googleが開発したWeb上で使える画像圧縮ツールです。

Google曰く「Webアプリ」の分類になるそうですが、オンライン上で画像圧縮をするわけではありません。

初回のアクセス時だけ、画面下に「Ready to WORK Offline」と表示され、その後からはオフラインでもブラウザから利用可能です。

「Squoosh」でできること

【Squoosh】Google推奨の画像圧縮Webツール
https://squoosh.app/

「Squoosh」でできることは「画像の圧縮」ですが、実際に使って便利だと感じた点は以下の4つ。

  • ドラッグアンドドロップで画像を圧縮
  • 圧縮による画像の荒れ具合を見ながら調整できる
  • 画像のファイル形式を変換できる
  • スマホでも利用ができる

ドラッグアンドドロップで画像を圧縮

【Squoosh】Google推奨の画像圧縮Webツール

「Squoosh」では、ドラッグアンドドロップですぐに画像を圧縮できます。

画像圧縮ツールには、ドラッグアンドドロップに対応していないツールもあります。

ブログやnote用に画像を多用するので、ドラッグアンドドロップで圧縮できるのは非常に便利!

圧縮による画像の荒れ具合を見ながら調整できる

【Squoosh】Google推奨の画像圧縮Webツール

「Squoosh」の圧縮画面は非常にシンプルで使いやすいです。

中央線を境に…

  • 左 → 圧縮前
  • 右 → 圧縮後

画面右下のスライダーで圧縮率を調整できます。

画面右側で画像の荒れ具合を確認しながら調整できるので、「ブログに貼り付けたら荒れてた…」なんてこともなくなります。

画像のファイル形式を変換できる

【Squoosh】Google推奨の画像圧縮Webツール

一般的なブログサイトで使用する画像フォーマットは、JPEGやPNGです。

「Squoosh」では、高圧縮のファイル形式に変換できます。

対応ファイル形式

  • Original Image
  • AVIF
  • JPEG
  • PNG
  • JPEG XL
  • MozJPEG
  • OxiPNG
  • WebP
  • WebP v2

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

Squooshはデフォルトでは「MozJPEG」になっています。

MozJPEGはJPEGやPNGより小さいサイズに圧縮できるため、ブログに使う画像は「MozJPEG」または「WebP」がおすすめです。

スマホでも利用ができる

Squooshは、画像のデータをサーバーにアップロードせずに変換処理します。

パソコンなどのローカル上で実行しているためセキュリティ面でも安心です。

スマホで利用できるうえに、通信を必要としないため、パケットを消費せずに作業できるというメリットがあります。

「Squoosh」圧縮前後の画像比較

「Squoosh」の最大のメリットは、圧縮しても画像劣化が少ないこと。

圧縮前後の画像は以下の通りです。

【Squoosh】Google推奨の画像圧縮Webツール
圧縮前
【Squoosh】Google推奨の画像圧縮Webツール
圧縮後

見た感じほとんど分かりませんが、上の画像では圧縮前と比較して93%も軽い画像になっています。

【Squoosh】Google推奨の画像圧縮Webツール
圧縮前
【Squoosh】Google推奨の画像圧縮Webツール
圧縮後

別の画像で比較すると、上の画像では圧縮前と比較して80%も軽い画像になっています。

まとめ

【Squoosh】Google推奨の画像圧縮Webツール

この記事では、Google推奨の画像圧縮Webツール「Squoosh」についてまとめてみました。

画像サイズが小さくすると、サイト表示速度向上に効果的です。

ひと手間かかってしまいますが、面倒くさがらずに圧縮したいところです。

使い方も非常に簡単なので、使ったことがない人はぜひ使ってみてください!

よく読まれている記事

コピーライティング7つのコツ 1

コピーライティング覚えられないんですけど… そんな人のために、この記事では… ライティングスキルがなくても 人の心に訴える 文章を作る(書く)7つのコツ について、紹介していきます。 とくに、Twit ...

ブログで毎月10,000円の収益を生み出す9ステップ 2

この記事では、ブログで収益化を生み出すためにやるべきことを9つのステップに分けて解説していきます。 ブログを書いているのに全然稼げない… 1円の売り上げもつかない… ASPサービスの紹介ばかりで書きた ...

【kindle10冠&ベストセラー】反響を得るためにやったすべてのコト 3

たくさんの人の支えをいただき、自身が出版した【分かりやすい文章に変える40のコツ】、kindleストアで10冠&ベストセラーを達成しました。 この記事では、kindleストアでランキング上位を獲るため ...

【月々200円】通常1,500円の有料版Canva Proを5人でシェアしてお得に使う方法 4

この記事では、【有料版のCanva Proを5人でシェアしてお得に使う方法】を解説していきます。 無料版のCanvaでは物足りない… 有料版を使いたいけど1,500円は高い… お得に使える方法はないで ...

【Googleが掲げる10の事実】理解し実践することが一番有効なSEO対策 5

SEO対策は、なにをどうしたらいいですか?そもそもSEOってなんですか…? 多くのブロガーが悩まされる根源 それが… SEO この記事では、SEO対策の基本中の基本となる【 Googleが掲げる10の ...

-ブログ
-