WEBサイトの表示速度を向上させるために画像の軽量化は必須です。しかし、画像を圧縮すればするほど画質が劣化していくため、その妥協点をさぐるのに難航している方は多いのではないでしょうか。
当記事では、画像の圧縮率に伴う画質の変化をリアルタイムで確認できる画像圧縮ツール「Squoosh」を紹介していきます。画像の軽量化にこだわりたい方は今後のサイト制作に活用してください。
「Squoosh」とは
「Squoosh」は、Google Chrome Labsが開発している画像圧縮サービスになります。圧縮前後の画像をリアルタイムで確認できるので、圧縮しすぎて画像が劣化しすぎてしまった、といったような失敗を避けることができるようになります。また、ブラウザ上で操作できるのですが、処理自体はローカル環境で行ってくれるため、オフラインでも使用することが可能です。
「Squoosh」の基本的な使い方
「Squoosh」は会員登録不要のため、下記よりアクセスしてすぐに使用することができます。ブラウザ上で操作しても構いませんし、画面右上の「Install」をクリックすれば、アプリケーションとして使用することも可能です。個人的にはインストールした方が快適に操作できました。
画像をアップロードする
まずは「Squoosh」に圧縮したい画像をアップロードしていきましょう。画像をドラッグ＆ドロップするか、「select an image」をクリックしてアップロードすることが可能です。
画質を確認しながら圧縮する
画像をアップロードすると下記の画面になり、この時点である程度画像が圧縮された状態になります。デフォルトでは画面左側が圧縮前の画像で、右側が圧縮後の画像になります。
画面右下の「Quality」の値を変化させると、画質の変化がリアルタイムで反映されるので、実際に確認しながら圧縮率を調整していきましょう。また、画面下部の両端に存在している数値が画像の容量になるので、どれくらい軽量化できたかも確認できます。
画像をリサイズする
画像の圧縮率を調整できたら、実際に使用する画像サイズに変更していきましょう。「Resize」にチェックを入れると、画像のwidth（横幅）やheight（高さ）を任意の値に変更することができます。
リサイズによる画質の劣化や容量の変化などもリアルタイムで確認できるので、とても便利です。
画像のダウンロード
基本的な圧縮形式は「MozJPEG」を選択しておけば大丈夫です。今後のサイト制作に利用するのであれば、「WebP」も視野にいれておくといいかもしれません。あとは、画面右下のダウンロードアイコンをクリックすれば圧縮した画像をダウンロードすることができます。
編集した画像同士を比較することも可能
デフォルトの状態では、左側が元画像で右側が圧縮後の画像と決まっていましたが、圧縮後の画像同士を比較することも可能です。画面左下の「Original image」を別の形式に変更すると、編集画面が表示されるので、圧縮形式を変えたり、もっと詳細なオプションを設定して比較してもいいですね。
画像の軽量化にこだわりたい方は「Squoosh」
「Squoosh」を使えば、画像圧縮をより細かく設定できますので、1枚1枚こだわりたい方には最適の画像圧縮ツールですね。ただ、現在の仕様では、複数の画像を1度に圧縮することができないため、まとめて自動圧縮したい方は「TinyJPG」などの方が適しているかもしれません。
また、下記でサイトの表示高速化を行うために必要な知識や対応方法を紹介してますので、表示速度をもっと向上させたい方はぜひご覧ください。
Webサイトの表示速度向上について、さまざまな方法が存在しますが、本稿ではWebサイトの表示の仕組みから、どのような高速表示対応が効果的かを考えていきたいと思います。 本稿はバックエンドの知識に長けた方にとっては知っていることも多い内容かもしれませんが、あまりコーディングにも興味をもてない方に...
コメント