Webサイト制作やブログを書いていると画像の表示にタイムラグが発生したりしてイライラすることってありませんか？そのちょっとしたタイムラグがユーザーを逃している可能性があります！
画像の容量が必要以上に大きいまま使用していると、ページの表示速度はもちろん遅くなります。１枚や２枚ならましも、１ページ内に複数枚画像を使用している場合は、それぞれの画像の容量を少しでも小さくしたいところです。
そんな時に便利なのが、Googleが提供する画像圧縮ツールの「Squoosh(スクウッシュ)」です！
今回はこのSquooshの特徴や使い方をご紹介していきます。
Squoosh（スクウッシュ）とは、Googleが提供する画像圧縮ツールで、ブラウザ上で画像の圧縮ができるのでパソコンだけでなく、スマホでも活用できるのが特徴です。
Squooshとは？
Squooshは無料の画像圧縮ツールで、アプリのインストールは不要でブラウザ上で使えるのが特徴的です。
- AVIF
- Browser GIF
- Browser JPG
- Browser PNG
- JPEG XL
- MozJPEG
- OxiPNG
- WebP
- WebP v2
Squooshの特徴
Squooshの主な特徴3つをご紹介します
1.画質やファイルサイズを見ながら調整できる
Squooshは、ブラウザに画像をドロップすると、画面の中央にある線を動かしたり、画像を拡大したりすることができます。
そのため圧縮する前の画像と比較しながらどのくらい圧縮したいかを調整することができます。
2.スマホでも使いやすい
Squooshは、ブラウザ上で動作するツールのため、スマートフォンでも利用することができ手軽に画像の圧縮ができます。
3.画像編集はローカル処理のため安心
Squooshは、画像をサーバーにアップロードせずにブラウザ上で動作するため圧縮したい画像の漏洩やプライバシーの侵害を心配する必要はありません。
Squooshの欠点
Squooshの使いにくいポイントは、画像の圧縮が複数同時にはできないという点です。
複数画像を手っ取り早く一括圧縮したい場合には不向きです。
Squooshの使い方
1.Squoosh公式サイトにアクセスします
2.圧縮したい画像をドラッグ＆ドロップする
試しに紫の花の画像を圧縮してみます。
3.画像のファイル形式を選択する
画像をアップロードしたら編集画面にて画像のファイル形式を選択します。画面右下の「Compress」の下から書き出したい形式をお好みで選びます。
4.画像サイズを指定する
画像をリサイズしたい場合は、WidthとHeightに指定すればリサイズされます。
どちらか片方だけ入力すれば、元の画像の比率を維持したまま縮小されます。
5.色情報を指定する
「Reduce palette」というスイッチを切り替えることで色彩情報を少なくすることもできます。
単純に色彩情報を減らすことでファイルを軽量化できますが、色味は落ちますので目で確認しながら調整します。
6.完了したらダウンロードする
編集が完了したら、右下にある「ダウンロード」のボタンからデバイスに画像を保存することができます。
実際に圧縮してみた花の画像データは「8890KB」から「600KB」にファイルサイズを圧縮することができました。画像を見比べてみてもブラウザ上で閲覧するのであれば、ほとんど画質に差は感じません。試しに上の画像クリックして確認してみてください。
画像を圧縮して利用することのメリット
WEBサイトを作成する際に、撮影画像をそのままのファイルサイズで利用すると必要以上にデータ容量が重くなることでページの表示速度が遅くなってしまいます。昔に比べればネットの回線も良くなりページの読み込み、表示に時間がかかることも少なくなってきましたが、塵も積もれば・・・という話になると、できる限りサイトで使う画像は軽くしておきたいものです。これはSEO的にもCV的にも有効であることは間違いありません。きちんとデータサイズを理解して適切な状態で利用できるかどうかもデザイナーの腕の見せ所ですので、これまであまり気にしていなかったという方は是非意識するようにしてみてはいかがでしょうか。
画像ファイルがちょっと重いんだよな～と感じたら「Squoosh」を使ってみてください。