Squooshで画像をカンタン圧縮!

Squooshはブラウザに画像をドラッグ&ドロップするだけで簡単にファイル容量を圧縮出来る。

特別なソフトのインストールを必要とせず、お手軽かつ高機能なのでおすすめだ。

きっかけ

webページの表示速度をアップ!

当サイトでは画像ファイルを多用しているが、ファイル容量が大きくなりがちで1枚が1MB超になってしまうこともしばしば。

画像容量を圧縮して表示速度を上げよう!ってことです。

表示速度を上げることはSEO評価向上につながるし、何よりユーザー体験が向上する。ページ表示が遅いとイライラして離脱しますよね…

画像の読み込みにはどのくらい時間がかかる?

実際にwebサイトの画像の読み込みにはどのくらい時間がかかるのだろうか?

筆者の環境で検証してみた。

ダウンロード速度計測

まずはダウンロード速度計測。以下サイトで計測してみた。

PC(光回線)の場合。1秒間に約6MB。まずまず。

ダウンロード速度 光回線

スマートフォン(LTE回線)。1秒間に187KB。うーん、厳しい。

ダウンロード速度 LTE回線

ダウンロード所用時間計算

次に1MBの画像のダウンロードに掛かる時間を以下サイトで計測。

PC(光回線)。0.2秒。1ページ内に5枚画像があったら1秒かかる計算。

ダウンロード所用時間 光回線

スマートフォン(LTE回線)だと、1枚だけで5.6秒もかかる!

これは離脱しますわ・・・

ダウンロード所用時間 LTE回線

Squooshの使い方

画像を圧縮する

Squooshのサイトにアクセスして、圧縮したいファイルをドラッグ&ドロップするだけ

ソフトのインストールは不要。

以下サイトにアクセス

圧縮する画像ファイルはコチラ。以前の投稿記事の画像のひとつだが、容量は1.17MB。でかい。

画像圧縮テスト

Squooshのトップページに圧縮したいファイルをドラッグ&ドロップ。

Squooshトップ画面

これで圧縮は終わり。

右下のダウンロードアイコンをクリックして圧縮後のファイルをダウンロードすればOK。

左下に元画像の容量、右下に圧縮後の容量が表示される。

今回の例だとなんと1MB→90KBと10分の1以下に圧縮できた。画質も十分だ。

Squoosh圧縮画面

画質の劣化具合を確認しながら、圧縮率を調性できる

青い境界線の左側は元画像、右側は圧縮後画像。

境界線は中央の矢印をドラッグできるので、圧縮前後の画質を確認できる

Squoosh圧縮前後比較

圧縮率を変更する

右下のQualityのスライドバーで画質(と容量)の調整がリアルタイムにできる。

下記はQualityを75→10に変更したところ。

容量は99%圧縮できたが、さすがに画質の低下ははっきりわかる。

Squoosh Quality変更

画像をリサイズする

画像のサイズを変更することも可能だ。

Resizeをクリックして任意のサイズを指定すればOK。

リサイズの場合も変更前後が確認できるので画質を視覚的に比較できる。

Squoosh Resize

クリップボードから直接貼り付けできるのが便利!

クリップボードに保存された画像も圧縮できる。

スクリーンショット等でクリップボード上にコピーされた画像を、、、(クリップボードへのコピー方法は以下の記事を参照)

Windows10標準機能!完全フリーで動画・静止画をキャプチャ

ブラウザ上で貼付け(Ctrl + v)すればOK。

以下は任意箇所キャプチャ(Windowsキー + Shift + s)した画像をSquooshに貼り付けたところ。

Squoosh クリップボードの画像を貼付け


【Amazon.co.jp限定】Transcend USBメモリ 32GB USB3.1 & USB 3.0 スライド式 ブラック TS32GJF790KPE (FFP)