Webサイトを作っているとき、HTMLのチェックツールなどでこんなエラーや警告を見たことはありませんか？

「要素『img』には属性『width』が必要です」

「いやいや、CSSで width: 100%; ってちゃんと指定してるじゃん！なんでわざわざHTMLにも書かなきゃいけないの？」

と疑問に思う方も多いはず。

実はこれ、今のWeb制作において「絶対に知っておくべき、ユーザー体験とSEOに関わる超重要ルール」なんです。

今回は、なぜHTMLにもwidthとheightを書かなければならないのか、めちゃくちゃ分かりやすく解説します！

スマホで「誤タップ」してイラッとした経験、ありませんか？

理由を説明する前に、ちょっと想像してみてください。

スマホでニュース記事を読んでいるとき。 「おっ、この記事面白そう！」と思ってリンクをタップしようとした瞬間…… 遅れて画像がドーンと読み込まれて画面がガタッと下にズレて、全然関係ない広告をタップしてしまった！

……こんなイライラ体験、誰でも一度はありますよね。 実は、HTMLにwidthとheightを書かないと、あなたのサイトがあの「イライラ現象」を引き起こす原因になってしまうんです。

ブラウザの気持ちになって考えよう（場所取りの法則）

SafariやChromeなどのブラウザは、上から順番にHTMLのコードを読んで画面に表示していきます。 テキスト（文字）はデータが軽いので一瞬で表示されますが、画像データは重いので読み込みに時間がかかります。

❌ widthとheightを書いていない場合

ブラウザは画像が完全にダウンロードされるまで、「この画像がどれくらいの大きさなのか」が分かりません。 そのため、最初は「画像はないもの（大きさゼロ）」として、下のテキストを上に詰めて表示してしまいます。

そして数秒後、画像が読み込まれた瞬間に無理やりスペースをこじ開けるため、読んでいたテキストが突然ガタッと下に押し下げられてしまうのです。これが画面のズレの原因です。

⭕️ widthとheightを書いている場合

HTMLに <img src="..." width="600" height="400"> と書いてあるとどうなるでしょう？

ブラウザは、画像本体のダウンロードが終わる前でも「なるほど、ここは横600・縦400のスペースを空けておけばいいんだな」と瞬時に理解します。 つまり、透明な空箱を置いて「あらかじめ画像の場所取り（席取り）」をしてくれるのです。

場所取りができているので、後から画像がスッと読み込まれても、周りのテキストがガタガタ動くことはありません。ユーザーはストレスなく記事を読み進めることができます。

「でも、CSSでレスポンシブ（width:100%）にしてるよ？」

ここが一番の疑問点ですよね。 「スマホ対応のためにCSSで img { width: 100%; height: auto; } にしているから、HTMLで横幅600pxなんて固定したらおかしくならない？」と思うかもしれません。

結論から言うと、おかしくなりません。むしろ、これが大正解です。

現在の賢いブラウザは、HTMLに書かれた width="600" height="400" を「絶対このピクセルサイズで表示しろ！」という命令ではなく、「この画像は 3：2 の縦横比（アスペクト比）ですよ」というヒントとして受け取ります。

その上でCSSの width: 100% が効くので、スマホの小さな画面になっても「横幅いっぱいにしつつ、高さは3:2の比率を保ったまま、最初から正確な空箱を用意する」という完璧な処理をしてくれるのです。

Googleも激怒！？ やらないと検索順位が下がるかも

先ほど紹介した「画像の読み込み遅れによる画面のガタつき」現象を、専門用語で 「CLS（Cumulative Layout Shift）」 と呼びます。

現在、GoogleはこのCLSを「ユーザーをイライラさせる極めて悪いサイト」として厳しくチェックしています（Core Web Vitalsという評価基準の一つです）。

つまり、width と height をサボって画面がガタガタ動くサイトを作ってしまうと、Googleからの評価が下がり、検索順位（SEO）に悪影響を及ぼす可能性があるのです。

まとめ：画像を入れるときの鉄則

• HTMLの <img> タグには、必ず画像本来の width と height を書く！

• CSSには width: 100%; height: auto; を書いてスマホ対応（レスポンシブ）にする！

この2つをセットで行うことで、「読み込み前から綺麗な空箱（場所取り）が作られ、画面がガタつかない、ユーザーにもGoogleにも好かれるWebサイト」になります。

今まで「面倒くさいな…」とエラーを無視していた方も、これからはぜひ「席取り」のつもりで width と height を入れてあげてくださいね！