ウェブパフォーマンスのために画像を最適化

ウェブ画像が高速に読み込まれるには、ピクセルサイズ・フォーマット・ファイルサイズの3点が重要です。以下では、それぞれのポイントと、サイト側で対応すべき部分について解説します。

ウェブサイトの画像に最適なサイズは?

ページ上で表示される最大幅に合わせて画像サイズを設定しましょう。画像の寸法を確認し、最大寸法を設定します。初期設定では長辺が1920pxに制限され、小さい画像を拡大することはありません。おすすめの開始幅は以下の通りです。

• 全幅のヒーロー画像やバナー：幅1920px。
• ブログや記事の画像：本文の列幅。多くの場合800〜1200px。
• サムネイルや商品カード：400〜600px。
• 高精細なスマートフォンやノートPCの画面：表示幅の最大2倍まで。

WebPとAVIF、どちらを使うべき?

どちらもJPGより写真のファイルをはるかに小さくでき、主要ブラウザの最新版はいずれにも対応しています。画像の用途に応じて選びましょう。

• WebP: Googleによると、非可逆WebPファイルは同じ品質のJPGファイルより25〜34%小さくなります。圧縮ツールの「画像を保存」でWebPを選択してください。
• AVIF: さらに小さくなることが多いですが、生成に時間がかかります。画像リサイザーでAVIFとして保存できます。
• JPG: メールや古いアプリを含め、どこでも開けます。WebPに対応していないプラットフォームで使いましょう。
• PNG: ロゴやアイコン、輪郭がはっきりした画像や透過部分のあるスクリーンショットに。

画像はLCPやCore Web Vitalsにどう影響する?

LCP (Largest Contentful Paint) は、画面上で最も大きな要素の読み込みが完了するまでの時間を測定するもので、多くのページではそれが写真です。Googleは2.5秒以内を良好なLCPとしています。ファイルが小さいほど早くダウンロードできます。以下の対策はこのツールではなく、サイトのコード側で行うものです。

• ページ上部のメイン画像は遅延読み込みにせず、すぐに読み込ませましょう。
• HTML内のすべての画像に幅と高さを指定し、読み込み中にページがガタつかないようにしましょう。
• srcsetを使ってスマートフォンにより小さい画像を配信するか、サイトビルダーに任せましょう。

SEOのために画像を最適化するには?

検索エンジンは画像を理解するためにテキスト情報に頼ります。このツールはサイズとフォーマットを担当し、残りは公開先で行います。

• 画像の内容を説明する代替テキスト(alt)を書きましょう。
• blue-running-shoe.webpのような、短く分かりやすいファイル名を使いましょう。独自のファイル名を保つには、詳細設定で「ファイル名の接尾辞」をオフにしてください。
• ページ下部にある画像は遅延読み込みにしましょう。多くのサイトビルダーが自動で対応してくれます。