画像したい（img）
<img src="画像のパス" alt="画像の説明">
imgタグは、画像を挿入して表示するタグです。
src属性は必須で、挿入したい画像のパスを指定します。
ローカルにある画像を使う場合は相対パスで指定するとよいです。
外部URLを指定することもできます。
alt属性には代替テキストを記述します。
通常の表示では見えませんが、画像が読み込めなかったときの代わりのテキストとして表示されたり、
スクリーンリーダーで読み上げられたりします。
文法上は省略可能ですが、装飾目的の画像でない限りは実質必須の属性です。
アクセシビリティのためにも、必ず指定するようにしましょう。
サイズを指定したい（width / height）
<img src="画像のパス" alt="画像の説明" width="800" height="600">
width属性とheight属性で、画像の表示サイズを指定できます。
指定しておくと、画像の読み込み前にブラウザが表示領域を確保できるため、
読み込み完了時にページのレイアウトがガクッとズレる現象（CLS: レイアウトシフト）を防げます。
実際の表示サイズはCSSで別途調整してもよく、この2つの属性はアスペクト比を伝えるためのものと考えてよいです。
遅延読み込みしたい
<img src="画像のパス" loading="lazy">
loading属性をlazyにして遅延読み込みできます。
ファイルサイズの大きな画像を使った場合、ページ全体を読み込むまでに時間がかかってしまいます。
loading="lazy"を指定すると、ビューポートの範囲外のときに読み込みを後回しにできます。
ただし、ページを開いたときに最初から見えている画像（ファーストビュー）には使わないほうがよいです。 読み込み開始が遅れてしまい、かえって表示が遅くなることがあります。
CSSしたい（img）
img {
max-width: 100%;
height: auto;
display: block;
}
imgタグはデフォルトでinline表示のため、画像の下に不自然な余白ができてしまいます。
display: blockを指定しておくと、この余白がなくなります。
max-width: 100%とheight: autoを組み合わせておくと、
親要素の幅に収まるように画像が縮小され、かつアスペクト比も保たれます。
レスポンシブなレイアウトでは、この3行をimgのデフォルトCSSとして設定しておくとよいです。