Squooshはブラウザに画像をドラッグ&ドロップするだけで簡単にファイル容量を圧縮出来る。
特別なソフトのインストールを必要とせず、お手軽かつ高機能なのでおすすめだ。
Contents
きっかけ
webページの表示速度をアップ！
当サイトでは画像ファイルを多用しているが、ファイル容量が大きくなりがちで1枚が１MB超になってしまうこともしばしば。
画像容量を圧縮して表示速度を上げよう！ってことです。
表示速度を上げることはSEO評価向上につながるし、何よりユーザー体験が向上する。ページ表示が遅いとイライラして離脱しますよね…
画像の読み込みにはどのくらい時間がかかる？
実際にwebサイトの画像の読み込みにはどのくらい時間がかかるのだろうか？
筆者の環境で検証してみた。
ダウンロード速度計測
まずはダウンロード速度計測。以下サイトで計測してみた。
[blogcard url=”https://www.musen-lan.com/speed/”]
PC(光回線)の場合。1秒間に約6MB。まずまず。
スマートフォン(LTE回線)。1秒間に187KB。うーん、厳しい。
ダウンロード所用時間計算
次に1MBの画像のダウンロードに掛かる時間を以下サイトで計測。
[blogcard url=”https://note.cman.jp/network/speed.cgi”]
PC(光回線)。0.2秒。1ページ内に5枚画像があったら1秒かかる計算。
スマートフォン(LTE回線)だと、1枚だけで5.6秒もかかる！
これは離脱しますわ・・・
Squooshの使い方
画像を圧縮する
Squooshのサイトにアクセスして、圧縮したいファイルをドラッグ＆ドロップするだけ。
ソフトのインストールは不要。
以下サイトにアクセス
[blogcard url=”https://squoosh.app/”]
圧縮する画像ファイルはコチラ。以前の投稿記事の画像のひとつだが、容量は1.17MB。でかい。
Squooshのトップページに圧縮したいファイルをドラッグ＆ドロップ。
これで圧縮は終わり。
右下のダウンロードアイコンをクリックして圧縮後のファイルをダウンロードすればＯＫ。
左下に元画像の容量、右下に圧縮後の容量が表示される。
今回の例だとなんと1MB→90KBと10分の1以下に圧縮できた。画質も十分だ。
画質の劣化具合を確認しながら、圧縮率を調性できる
青い境界線の左側は元画像、右側は圧縮後画像。
境界線は中央の矢印をドラッグできるので、圧縮前後の画質を確認できる。
圧縮率を変更する
右下のQualityのスライドバーで画質(と容量)の調整がリアルタイムにできる。
下記はQualityを75→10に変更したところ。
容量は99%圧縮できたが、さすがに画質の低下ははっきりわかる。
画像をリサイズする
画像のサイズを変更することも可能だ。
Resizeをクリックして任意のサイズを指定すればＯＫ。
リサイズの場合も変更前後が確認できるので画質を視覚的に比較できる。
クリップボードから直接貼り付けできるのが便利！
クリップボードに保存された画像も圧縮できる。
スクリーンショット等でクリップボード上にコピーされた画像を、、、(クリップボードへのコピー方法は以下の記事を参照)
ブラウザ上で貼付け(Ctrl + v)すればＯＫ。
以下は任意箇所キャプチャ(Windowsキー + Shift + s)した画像をSquooshに貼り付けたところ。
【Amazon.co.jp限定】Transcend USBメモリ 32GB USB3.1 & USB 3.0 スライド式 ブラック TS32GJF790KPE (FFP)
