Googleはユーザーが検索したキーワードに対する検索結果の順位を決める要素にユーザーエクスペリエンスの基準を盛り込み、その指標である “Core Web Vitals” を公開しました。
この記事では、指標の中のひとつにある「ページの読み込み速度」で重要なコンテンツとなる「画像データ」の最適化について解説していきます。
目次
画像圧縮Webアプリ “Squoosh”
Googleは、画像を最適化する為のWebツール “Squoosh” を提供しています。
“Squoosh” の使用方法はとても簡単です。
- “Squoosh”の中に画像をドラッグ＆ドロップする
- 解像度、圧縮率などの調整をする
- シークバーで画像を比較して確認する
- 問題なければ、ダウンロードボタンを押す
これだけの動作で画像の最適化が完了します。
Squooshの使用イメージはコチラでも確認できます。
参考YouTube動画 : Google Chrome Developers Demo of Squoosh.app
最適な画像の容量は？
最適な画像の容量については画像の解像度を含め、写真画像なのか、イラスト画像なのかによって扱い方が違うので、ベストな画像容量については言及されていません。
しかし、画像の種類についての適切なガイドラインは示されています。
● Google PageSpeed Insightの画像を最適化について
私の場合は、写真画像の場合は100KB前後、イラストの場合は使用されている色数にもよりますが50KB前後に圧縮しています。
しかし、今回の指標が明示されたことで、画像の容量について改善が必要となる可能性が高いので、より圧縮率を高めて画像の差し替えを行っていく予定です。
最適な画像の大きさは？
最適な画像の大きさについてGoogleは、AMP仕様のWebサイトについては、主にロゴや画像の大きさについて明示している情報があります。
参考サイト : 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
などの多くの画像フォーマットに対応しています。
画像の最適化にはalt属性の入力も重要
Webサイトでは、その画像が「何を示しているのか？」という情報を付加するための要素が設定できるようになっています。
alt属性（オルト属性）とは、画像の代替となるテキスト情報です。
特に、Blogサイトを運営している方に多いのが、圧縮してWeb用に最適化した画像をサイトに埋め込むときに、alt属性の入力をしていない方が多いです。
alt属性を入力していないと、画像と記事の関連性をGoogleがクロールしてきた時にそれらの関連性が認識できなくなってしまいます。
あらゆる画像に対してalt属性の中身に内容を示す必要は無いのですが、アイキャッチ、記事内画像は設定しておきましょう。
Squooshはスゴく便利な画像圧縮ツール
最近は、様々なSNSでも投稿時に画像を添付するとalt属性も入力できるようになってきました。
これから適正な画像をどのように設定しているか、ブログサイトだけでなく様々なサービス利用の中で重要になっていく傾向にあります。
話を最初の “Squoosh” に戻しますが、よりこのツールについて知りたい場合のYouTubeリンクを紹介しておきます。
（5:31:25から “Squoosh”の紹介チャプターに入ります。 ）
参考YouTube動画 : Google Chrome Developers Chrome Dev Summit 2018 – Day 1 Livestream
Squooshを利用した実際の運用事例
例えば、筆者の場合は以下の手順でブログサイトなどの画像を管理しています。
- 画像データをSquooshでMoz JPEG方式で100kb未満に圧縮する
- もしCMSがWordPressだったら「Imagify」というプラグインを入れておく
- ImagifyでWebPなどの代替画像を生成する
ちょっとプロセス的に効率が割るように見えますが、Imagifyは有料プランでなくても小規模サイトであれば無料で充分に使える高機能な画像圧縮プラグインです。
そこに、Squooshで画像圧縮した画像をWordPress内で利用すれば、サーバー容量も圧迫せずに利用が出来ます。
その上で、さらにサイト表示についてWebPも対応してくれるので、個人的にはオススメの運用方式です。
Squooshによる画像圧縮運用以外のこと
また、画像のSEO対策以外にも、様々なSEO対策についてまとめた記事もあります。
コチラも参考していただければ幸いです。
● SEOとは？基礎知識を徹底解説！ブログやサイト運営のSEO対策を分かりやすく解説
ブログを初めて立ち上げる人向けに様々なノウハウを記事にまとめました。
こちらの記事も参考になれば幸いです。
最後まで読んでいただきありがとうございました。
参考Webサイト : Chromium Blog “Core Web Vitals”