本文にスキップ
weballin

weballin DIGIWIKI

画像の最適化

画像の最適化は、画像サイズ、形式、読み込み方法、代替テキストを調整し、使いやすさとアクセシビリティを改善する作業です。

weballin

表示サイズに合った解像度と圧縮率を選び、幅と高さを指定します。初期表示の範囲外にある画像は遅延読み込みにできますが、最初に表示する主要画像、特にLCP画像には使わないようにします。変更の効果は実際の読み込み性能で確認します。

altテキストは画像の用途と文脈を説明し、キーワードの羅列を避けます。主要ブラウザーの現行版はWebPとAVIFをサポートしています。画質、ファイルサイズ、対象ブラウザーを比較し、必要に応じてpicture要素で代替形式を用意します。形式を変えるだけで検索への表示やLCPの改善が保証されるわけではありません。

参考資料

よくある質問

WebPとAVIFはどちらを選べばよいですか?

同じ画像で画質と転送サイズを比較し、利用者のブラウザーの対応状況を確認します。画像の特性と配信環境に合わせて選びます。