『Squoosh』とは、Googleが提供する画像圧縮サービスです。
適切な画像圧縮は、Webサイトを訪問したユーザーの通信負荷を下げながら画像を用いた情報の提供に役立ちます。
また、Googleはユーザーが検索したキーワードに対する検索結果の順位を決める要素にユーザーエクスペリエンスの基準を盛り込み、その指標である “Core Web Vitals” を公開しています。
本記事では、「画像データ」の最適化でSquooshを使う方法について解説していきます。
画像圧縮Webアプリ “Squoosh”
Webサイトに利用する圧縮された画像データを作成するのに、Squooshはものすごく役に立つツールです。
Squoosh｜公式サイト
“Squoosh” の使用方法はとても簡単です。
- “Squoosh”の中に画像をドラッグ＆ドロップする
- 解像度、圧縮率などの調整をする
- シークバーで画像を比較して確認する
- 問題なければ、ダウンロードボタンを押す
これだけの動作で画像の最適化が完了します。
Squooshの使用イメージはコチラでも確認できます。
最適な画像の容量は？
最適な画像の容量については画像の解像度を含め、写真画像なのか、イラスト画像なのかによって扱い方が違うので、ベストな画像容量については言及されていません。
しかし、画像の種類についての適切なガイドラインは示されています。
画像を最適化する｜Google for Developers
私の場合は、写真画像の場合は100KB前後、イラストの場合は使用されている色数にもよりますが50KB前後に圧縮しています。
しかし、今回の指標が明示されたことで、画像の容量について改善が必要となる可能性が高いので、より圧縮率を高めて画像の差し替えを行っていく予定です。
最適な画像の大きさは？
最適な画像の大きさについてGoogleは、AMP仕様のWebサイトなども含めて、主にロゴや画像の大きさについて明示している情報があります。
Google 画像検索 SEO ベスト プラクティス｜Google検索セントラル
私の場合は、AMP仕様にする予定はないのですが、使用しているロゴやアイキャッチの画像などは、ガイドの仕様に合わせた解像度にしています。
- ブログのロゴ：横600x縦60px
- アイキャッチ : 横1200x縦675px(アスペクト比 16×9)
- 記事内画像 : 横は1200px、縦は素材による
Squooshで対応している画像フォーマット
Squooshで対応している画像フォーマットはとても豊富です。
特に、Web向けに最適化されているだけあるので
- MozJPEG
- WebP
- AVIF
の3点セットにはしっかりと対応しています。
一応、上記以外にも多くの画像フォーマットに対応しており、このリライトを兼ねた執筆時点（2022年02月時点）では
- AVIF
- Browser JPEG
- Blowser PNG
- JPEG XL
- Moz JPEG
- Oxi PNG
- WebP
- WebP v2
などの多くの画像フォーマットに対応しています。
X（Twitter）に透明PNGのまま投稿できる画像フォーマットにも対応
特に『Blowser PNG』は、専門的で高価なデザインソフトなどを持っていなくても、透明PNGの状態を保ったままX（旧Twitter）に投稿できる画像フォーマットに変換することができるので便利です。
Squooshを使えば、フリーのペイントソフトやデザインソフトを使って色々な利用用途のデザイン素材を作り、それを簡単に合成画像素材として利用できる『透明PNG：Blowser PNG』で書き出すことが可能です。
詳細な制作プロセスについては、別記事で詳しく書いてみました。
下記の記事がお役に立てば幸いです。
画像の最適化にはalt属性の入力も重要
Webサイトでは、その画像が「何を示しているのか？」という情報を付加するための要素が設定できるようになっています。
alt属性（オルト属性）とは、画像の代替となるテキスト情報です。
特に、ブログサイトを運営している方に多いのが、圧縮してWeb用に最適化した画像をサイトに埋め込むときに、alt属性の入力をしていない方が多いです。
alt属性を入力していないと、画像と記事の関連性をGoogleがクロールしてきた時にそれらの関連性が認識できなくなってしまいます。
また、alt本来の役割とは別に、画像を説明するためではない、別のメッセージを入れて使われてしまうパターンもあります。
このような使い方は、alt情報が必要なユーザーを混乱させてしまうので控えるようにしていきましょう。
そして、あらゆる画像に対してalt属性の中身に内容を示す必要は無いのですが、アイキャッチ、記事内画像は設定しておきましょう。
Squooshはスゴく便利な画像圧縮ツール
最近は、様々なSNSでも投稿時に画像を添付するとalt属性も入力できるようになってきました。
これから適正な画像をどのように設定しているか、ブログサイトだけでなく様々なサービス利用の中で重要になっていく傾向にあります。
話を最初の “Squoosh” に戻しますが、よりこのツールについて知りたい場合のYouTubeリンクを紹介しておきます。
（5:31:25から “Squoosh“の紹介チャプターに入ります。 ）
Squooshを利用した実際の運用事例
例えば、筆者の場合は以下の手順でブログサイトなどの画像を管理しています。
- 画像データをSquooshでMoz JPEG方式で100kb未満に圧縮する
- もしCMSがWordPressだったら「Imagify」というプラグインを入れておく
- ImagifyでWebPなどの代替画像を生成する
ちょっとプロセス的に効率が割るように見えますが、Imagifyは有料プランでなくても小規模サイトであれば無料で充分に使える高機能な画像圧縮プラグインです。
そこに、Squooshで画像圧縮した画像をWordPress内で利用すれば、サーバー容量も圧迫せずに利用が出来ます。
その上で、さらにサイト表示についてWebPも対応してくれるので、個人的にはオススメの運用方式です。
Squooshによる画像圧縮運用以外のこと
最後に、Squooshと相性の良い高速なレンタルサーバーを運用に用いれば、難しい高速化プラグインやキャッシュ技術などの難しいことを気にしなくて済むようになります。
実際に、このユニコブログ®︎もげんｚ内は、高速なレンタルサーバーのみでWebサイトの表示をしている状態ですが、極端に遅いということは起きていないはずです。
現在、数十のWebサイトと複数のYouTubeチャンネルや配信プラットフォームで様々なメディアを連携して収益化を含めて運用しています。
下記のブログ記事では、現在も実際に利用している高速なWebサイト表示を可能にするレンタルサーバーを紹介しているので、これらの記事が参考になれば幸いです。
コチラも参考していただければ幸いです。
最後まで読んでいただきありがとうございました。
参考Webサイト : Chromium Blog “Core Web Vitals”