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

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

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

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

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

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

ページ読み込み時間が

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

1秒～5秒の場合は、離脱率を90％増加。

1～6秒の場合は106%増加。

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

ひぃーーー！！！！💦💦💦

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

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

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

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

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

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

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

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

いざ！「squoosh」で圧縮！

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

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

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

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

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

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

91％の圧縮！圧倒的優勝！

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

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

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

さらにwebp（ウェッピー）にも対応しています！

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

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

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

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

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

https://squoosh.app/