img タグ
ドキュメント：
使い方
ドキュメント：
参考：
img タグ | コーディングのプロが作る HTML タグ辞典
表示サイズを調節する
参考：
画像のサイズ／縦横比／トリミング指定方法 | DISITOR
object-fit
参考：
1行追加で OK！CSS だけで画像をトリミングできる object-fit プロパティー | Web クリエイターボックス
object-fit – CSS だけで画像をトリミングできる | FASTCODING BLOG
object-fit の使い方／img 要素の縦横比固定方法 | nyanblog
要素の背景に画像を表示する
backgroundbackground-imagebackground-sizebackground-repeat
ドキュメント：
参考：
background-image | HTML クイックリファレンス
background-size | HTML クイックリファレンス
background-repeat | HTML クイックリファレンス
background-image に filter をかける
参考：
background-image のみに filter を掛ける – Qiita
背景画像だけにガウスぼかしをかける方法 | Black Everyday Company
CSS で背景画像だけにブラーエフェクトを加える方法 | Design Color
How to apply a CSS filter to a background image – Stack Overflow
backdrop-filter
ドキュメント：
参考：
backdrop-filter – 次世代 Web スタイリングを追う – Qiita
たった一行でガラス板の美しいエフェクトが実装できる、backdrop-filter プロパティの使い方を解説 | コリス
backdrop-filter で効果をつける | Design memo
backdrop-filter を使ったデザイン集 | ONE NOTES
CSS Backdrop Filter | Can I Use Support Tables
alt 属性
スクリーンリーダーを使用している際に読み上げられる画像の説明文。SEO にも影響するため、img タグで画像を挿入する際は付与することが望ましい。
参考：
alt 属性とは？効果から適切な記述方法まで詳しく解説 | 株式会社デジタルアイデンティティ
alt 属性とは？代替テキストの書き方と考え方 | 株式会社オレンジ社
alt 属性とは？ SEO における役割と効果的な使い方 | デジ研
alt 属性とは？ SEO に効果的な記述方法を解説 | AI アナリスト
title 属性
img タグで表示した画像にカーソルを合わせた際に、補足的な情報をツールチップとして表示するためのテキストを記入する。
参考：
title 属性 – 要素に補足情報を付ける | TAG index
image 関数
ドキュメント：
レスポンシブに表示する
最大幅を親要素の幅最大までとし、画像のアスペクト比を保つために高さを自動的に調節する。
.responsive-image {
max-width: 100%;
height: auto;
}Code language: CSS (css)ドキュメント：
参考：
aspect-ratio でアスペクト比を固定したレスポンシブ対応方法を解説 | みやっちブログ
アスペクト比を維持する
.half-width {
max-width: 50%;
height: auto;
}Code language: CSS (css)参考：
画像の縦横比を維持したままリサイズする CSS | スタイルシート Tips ふぁくとりー
サムネイル表示する
参考：
CSS だけで画像縦横比を維持したレスポンシブ対応サムネイルを作る方法 | Tanweb.net
ファイル形式
ドキュメント：
データ URL
参考：
互換性
参考：
img | Can I Use Support Tables
src | Can I Use Support Tables
SVG in HTML img Element | Can I Use Support Tables
background-image | Can I Use Support Tables
background-image Options | Can I Use Support Tables
background-image: SVG Images | Can I Use Support Tables