画像の最適化とalt属性

ウェブページにおける画像の最適化は、ページ表示速度の改善とコンテンツの機械可読性向上という二つの目的を持つ。ファイルサイズの削減には、WebPやAVIFといった次世代フォーマットの採用、適切な圧縮率の設定、表示サイズに合わせた画像の用意（レスポンシブ画像）が有効な手段となる。srcset 属性を用いることでデバイスの画面解像度に応じた画像を自動的に選択させることができ、モバイル環境でのデータ通信量を抑えることにもつながる。

alt属性（代替テキスト）は、画像が表示できない環境やスクリーンリーダーを使用するユーザーのために画像の内容を文字で伝えるものである。検索エンジンもこの属性を読み取り、画像の内容を理解する手がかりとして利用する。alt属性には画像が何を示しているかを簡潔かつ具体的に記述することが基本であり、キーワードを詰め込む行為は品質基準に反すると判断されることがある。装飾目的の画像には空の alt 属性（alt=""）を設定し、読み上げ対象から除外することが推奨される。ファイル名もクローラーが画像内容を推測する際の参考情報となるため、「img001.jpg」のような汎用的な名前ではなく内容を表す名前を付けることが望ましい。

画像の遅延読み込み（lazy loading）は、ビューポート外の画像をスクロールに応じて読み込む技術であり、初期表示の高速化に寄与する。img 要素に loading="lazy" を追加するだけで主要なブラウザで機能する。ただしファーストビューに表示される重要な画像に適用すると LCP の悪化につながるため、スクロールしなければ見えない位置にある画像にのみ適用するのが適切な使い方である。また、画像の width と height を明示しておくことで、読み込み前にブラウザがレイアウト上のスペースを確保でき、レイアウトシフトの発生を防ぐ効果もある。