驚愕の画像圧縮サービス!「squoosh」とは?

Squoosh.png
今回は、Googleが提供するブラウザ上で画像の圧縮できる無料Webツールsquoosh」のご紹介です。

「なんでいまさら画像圧縮!?」と話が聞こえてきそうですが、画像の軽量化は、今の時代めちゃくちゃ重要なんです。

ここ数年デザイントレンドで画像を大きく使ったり、レスポンシブサイトでモバイルとの共用するのにオーバーサイズの画像を利用したりして、画像容量あまり意識してなかったりしませんか?

僕は普通にPhotoShopなどでの出力で満足してしまい、ダイアルアップで「ピーヒョロロロ~♪」繋げて、画像表示の遅さにイライラした記憶を、光回線のスピードですっかり忘れてしまっていましたよ!

そんな僕に喝をいれるように、神(Google)は言うのです。

モバイルページの読み込みに関するユーザー調査によると、

ページ読み込み時間が

1秒~3秒かかると離脱率が32%増加

1秒~5秒の場合は、離脱率を90%増加

1~6秒の場合は106%増加

1~10秒かかる場合は離脱率を123%増加。

ひぃーーー!!!!💦💦💦

まだまだ画像の最適化は、ユーザビリティの向上とSEO対策に影響を与えるため、サイト改善において有効な施策ではないですか。

こうなってくると、もう自社のサイト画像サイズ、、、気になって気になって仕方ない、、、

品質チェックで久しぶりに、

PageSpeed Insightsで自社サイトチェック!

PageSpeed-Insights.png

おぉー!さすが弊社のスーパーデザイナー森〇様。

そこそこ最適化はできておりますねー!!

ボトルネックなんだろ??

PageSpeed-Insights (1).png
うぉぉぉぉおぉぉぉぉ!大変申し訳ございません。

私が掲載した採用ページの画像サイズがボトルネックなのでございますね、、、💦

いざ!「squoosh」で圧縮!

では、責任をもって、神の偉大なツール「squoosh」で、画像の圧縮テストです。

まずは現状の確認
image_old.pngマジか、、、400KBの画像とかアップしてたのか、、、

さて、これをsquooshで圧縮すると、

弊社イケメン部長の写真ですが。(勝手にお借りしてすいません)

左側が圧縮前、右が圧縮後、、、、

画質ぜんぜん変わらないのに、右下の圧縮率みて!!

91%の圧縮!圧倒的優勝!

いまどきそんな話あるか疑うレベルだよね??

img_recruit_yamamoto_01-jpg-Squoosh.png

squooshホントに凄いんですよー!!!

今回はJPEGの圧縮なので「MozJPEG」というエンコーダー使って圧縮していますが、PNGも「OxiPNG」でエンコードすることもできます。

さらにwebp(ウェッピー)にも対応しています!

ウェッピー!あまり使われないんですが、数年前からちょこちょこみかけるようになりましたよね。

圧縮結果です。もう圧倒的ですよね。

image_new.png


画質のクオリティ変わらず、これだけ容量節約できれば、インターネットのトラフィック減らせるし、きっと消費電力も減らせて温暖化にも貢献できます!

そうそう、このサイトは1枚づつしかできませんが、node.js使うとまとめて一括圧縮もできるようです。

ぜひこのsquooshのサービス使ってみてください。

https://squoosh.app/

お気軽にご依頼・ご相談ください

前へ

Power Automate 魔法のような新機能!OpenAI Codex を使用して、文章からクラウドフローを自動作成できるように!

次へ

Power Apps 入門 ~初めてのアプリ作成~