Googleは画像サイズの推奨値を具体的に規定していません。
ただし、「LCP（Largest Contentful Paint）を2.5秒以内に実現する」という表現で画像サイズに言及しています。
LCP（Largest Contentful Paint）は画像読み込みの尺度です
WEBサイトのぺージの読み込みパフォーマンス尺度です。
ページ表示速度を測る指標と言えます。
直訳すると「最大コンテンツ描画」となります。
ウェブサイトはユーザーがURLをクリックすると、画像やテキストなどが読み込まれ、
コンテンツが表示されます。
この時、ページ内で一番大きな要素が表示されるまでに
かかった時間を「LCP」として表します。
通常、WEBサイトページ内で一番大きな要素は画像です。
Googleは読込開始からLCPを2.5秒以内に実現するようにと明言しています。
Largest Contentful Paint（LCP）: 読み込みパフォーマンスの尺度。優れたユーザー エクスペリエンスを提供するには、サイトでページの読み込み開始から 2.5 秒以内に LCP を実現するようにします。
https://developers.google.com/search/docs/guides/page-experience?hl=ja
LCPスコアで考慮される要素
- <img>
- <image>***<svc>
- <video>***（ポスター画像を使用）
- url(*)関数を介してバックグラウンドで読み込まれた画像（CSSグラデーションとは対照的に）
- ブロックレベルのテキストノードまたは他のインラインレベルのテキスト要素
<img>elements
<image>elements inside an<svg>element
<video>elements (the poster image is used)An element with a background image loaded via the
url()function (as opposed to a CSS gradient)Block-level elements containing text nodes or other inline-level text elements children.
https://web.dev/lcp
詳しくはにGoogle Developers公式サイトからリンクを貼られているweb.devに書いてあります。
LCPスコアを高くするために画像サイズは小さいほど良いのか？
当然そうなりますが、画像サイズを小さくし過ぎて画像が荒れたり、小さくて見難かったりすりと、ユーザーエクスペリエンス（UX）を損ねます。
Googleは検索順位の決定にユーザーエクスペリエンスを重要視しています。
画像は見易く、綺麗に表示される、そんな限界までサイズを落とすのが良いです。
WEBサイトのページで使うべき一般的な画像サイズは150KB~200KB 以下が良い
できるだけ小さい方が良いに越したことはありません。
ユーザーエクスペリエンスを損なわないのであれば100KB以下にしたいところです。
Googleが推奨するWEBページのサイズは1.6MB以下
1.6MBは3G接続の時に10秒以下でダウンロードできる理論値です。
この値は、Cromeの拡張機能であるLighthouseを使用したデータから求められました。
このデータによるとネットワークペイロードの中央値は1.7MB～1.8MBで、1.6MBは中央値の手前です。
Aim to keep your total byte size below 1,600 KiB. This target is based on the amount of data that can be theoretically downloaded on a 3G connection while still achieving a Time to Interactive of 10 seconds or less.
https://web.dev/total-byte-weight/?utm_source=lighthouse&utm_medium=unknown
まとめ
画像はユーザーエクスペリエンス（UX）を高めるサイズにする
Googleはユーザーエクスペリエンス（UX）をページランクの決定要素として重要視しています。
UXランクの決定にはLCPスコアが重要な要素であり、LCPスコアを上げるためには画像サイズをできる限り小さくすることが大切です。
一般的に、WEBサイトのページで使う画像サイズは150KB~200KB 以下が良いです
Googleが推奨するWEBページのサイズは1.6MB以下です。
コメント