表示・印刷する大きさに合わせて寸法を決めます。縦横比を維持すると変形を防げます。幅と高さを両方指定した場合は枠内に収まり、枠を埋めるトリミングはしません。ピクセルを拡大しても失われた細部は増えません。
画像をSEO向けに最適化する方法
画像最適化はアクセシビリティと読み込みを助けます。検索順位の向上は約束できません。
使い方
1
内容と必要な互換性に合わせて形式を選びます。
2
寸法を調整して圧縮した結果を比較します。
3
文脈に合った代替テキストと説明的なファイル名を用意します。
4
レイアウト領域と適切な読み込み優先度を設定します。
5
公開後に測定し、結果を見て調整します。
よくある間違い
- すべての画像に同じ品質を使う。
- 結果を確認する前に元画像を削除する。
- バイト数が小さいだけで画質や検索順位が良くなると考える。
ピクセル寸法
品質と透過
中程度の品質から始め、ダウンロードした画像と元画像を比較してください。結果は画像とエンコーダーによって変わります。ページ内のサムネイルは元画像で、変換前後の比較表示ではありません。品質スライダーはPNGの符号化を変更しません。
画像を説明する情報
内容の分かるファイル名、有用なキャプション、ページの文脈に合う代替テキストを用意します。キーワードの詰め込みは避けてください。画像が読み込みの負荷になっている場合は軽量化が役立ちますが、変換で検索順位の向上は保証できません。
画像の配信方法
幅と高さ、またはCSSのaspect-ratioで表示領域を確保します。必要に応じてレスポンシブ画像を使い、主画像は早く、それより下の画像は遅延読み込みを検討します。公開後にモバイルで測定してください。形式変更だけでLCP・CLS・INPの改善は保証されません。
画像形式を比較
JPEG・PNG・WebP・AVIFを内容、透過、互換性、編集用途から比較します。