レイアウトシフトを防ぐためにも、
imgタグにはwidthとheightを忘れずに入れる

今更ながらの当たり前と言えば当たり前の事にはなるのですが、ついこの間とあるサイトを引き継いでというか、クラウド系で依頼してたフリーランスの方が途中でバックレたということで案件が回ってきたのがあったのですが、これが見事に今回のタイトルのように何も入っていませんでした。

意外とサイトの制作を途中から引き継いだり、管理を引き継いだりしてサイトを見てみるとこのwidthやheightやaltなどが空っぽで何も入っていないというケースがあります。

それどころか、img src="**.jpg"のみというケースも意外とあったりします。
ということで、今回はおさらいや自分の復習の意味も込めてimgタグのおさらいとしてまとめてみました。

imgのwidthとheightについて

もう言わずとも多くの人は既に知っているかと思いますが、

• width：画像の幅
• height：画像の高さ

といった役割で使われているものになります。
実際にサイト・ページを表示する”だけ”を考えたら、これらは入れなかったとしても正常に表示されます。（ブラウザの設定などによって変わるところがあるかもしれませんが…）

<img src="./img/sample.jpg">

これだけ書けば、sample.jpgが正常に表示されます。
むしろCSSをしっかり設定していれば、html側でのサイズ指定が無かったとしても、意図した通りに表示はされます。

しかしながら、後述するレイアウトシフトと呼ばれるトラブルを避けるためにも、imgタグを書く際には必ず幅と高さの指定（と代替テキストも忘れずに）の入力をしておくのが良いのです。

<img src="./img/sample.jpg" width="500" height="500" alt="サンプル画像">

一例ですが、このように必ずそれぞれの値を入れるのが推奨されています。

入れないとレイアウトシフトを起こす

先ほどから出てきているレイアウトシフトとはなんぞやと思う方もいるかもしれませんが、よくページを見ていて、画像が後から出てきてテキストなどの表示がズレたりすることあるかと思いますが、あれこそがレイアウトシフトと呼ばれるものになります。

widthやheightを指定しなければ、ブラウザは画像をロードする際に画像分の余白を確保することができず、画像をロードした時には画像のサイズがない状態でロードされて読み込む事になるため、その後に続くコンテンツなどの表示にズレが起こる事があります。

例を挙げていえば、ラーメン店の列で並んでいるところに、自分の番が次という時（画像が表示されるタイミング）に、あ、10人分予約あったから後ろにずれてね！とずらされる感じでしょうか。widthやheightが入っていると、あなたの前に10人分の予約入るから11番目だから前の列あけといてね。となっているようなイメージでしょうか。

小さなファイルサイズなどではあまり無かったりするかもしれませんが、大きいファイルサイズの場合だとよく見かけますし、特にアドセンスなどの広告で画像が後で読み込まれて、コンテンツ部分が下にずれたりする機会をよく見かけるかもしれませんが、あれもその一種です。

よく広告の×をクリックしようとしたら、レイアウトシフトのせいでズレて広告の×じゃなくて広告をクリックしてイライラした経験ある人はいるかと思いますが、まさにあれが起きてしまうのです。

実際に下記のデモページを見てもらうとわかりやすいと思います。（PCで見ないとわかりにくいかもしれません。）

デモページ

デモページでは、左側の画像では縦横サイズを指定したもの、右側の画像は何も指定しないという状況になっています。

微妙にわかりにくいかもしれませんが、Chromeなどで開き、Ctrl+F5などをクリックして更新をすると、右側の画像はページが読み込まれた際には画像の余白分が設定されていないため、一瞬上部に表示されて、画像が読み込まれた後に正常な位置に表示されているのがわかります。

これこそレイアウトシフトと呼ばれている現象になります。
サイズがしっかり記載されていないと、ブラウザでページを表示する際に一瞬のズレなど予想外の動きをしてしまう事があるのです。

特にボタンや何かしらのリンクがある場合、クリックしようとした瞬間にズレたりしてユーザーにイラッとさせる事になりかねないので注意が必要です。

サイズを入れておけば予めそのスペースを確保してくれる

上で書いてきたように、imgタグにwidthとheightを指定してあげることで、画像が読み込まれる前の段階から、そのサイズ分の余白をブラウザ側が設けてくれるようになります。

デモページの左側のようにそのサイズ分の余白を確保してくれるので、右側の画像のようにカクッとしたりズレたりする事無く画像の後に読み込まれるコンテンツが正しい位置に表示されるようになります。

通常のサイトではそこまで影響が無いかもしれませんが、通販系のサイトやランディングページなど、画像を多用するサイト・ページの場合は、これの影響でページを読み込んだ後に色々と動いてしまうことでユーザーの離脱に繋がりかねません。

レスポンシブで作る場合はどうすれば良いか

サイズを設定しようと書くと、ついPC向けのサイトなら固定サイズだから良いけどタブレットやスマホ向けのページやレスポンシブで作られたサイトはどうすれば良いのかと思うかもしれませんが、そこは大丈夫です。

結局のところデザインはCSSにて対応していくことになるので、スマホの時は幅が100%、高さはそれに合わせた相対サイズでといったサイズ指定をする事が多いかと思いますので、問題ありません。

width="1000"とHTML側で書かれていたとしても、CSSにてwidth: 100%;の設定がされていれば、親要素のサイズに当然収まりますのでデザインが崩れる事もないので今まで通りというか通常通りにやれば問題ありません。

実際に必要なのは実サイズでは無く画像の比率

レイアウトシフトを防ぐための設定では、画像の比率が重要になってくるため、正しい比率の縦横をimgに書いていれば問題ありません。

widthとheight属性を指定する際は、実際の見た目などのサイズはCSSでwidth: 100%;やmax-width: 100%;などの設定がされている事が多いですし、そのサイズが間違ってなければ見た目上はcssの設定で正しく反映されるはずです。

そのため厳密に言えばHTMLのimgタグでのwidthとheightで大事になるのは、画像の縦横の比率が間違っていないか、という点になるのですが比率をいちいち入力するくらいならそのまま実サイズを入れておけば問題ないという感じでしょうか。

最近ではこのレイアウトシフトでSEO関連で色々とテーマが盛り上がっていることもあって、widthやheightを入れましょうと解説されがちですが、それでもいったん仮でコーディングしてそのまま忘れて…という事もあるので忘れずにしっかり入れる癖を付けておきたいところです。

まとめ

最近ではこのレイアウトシフトについて、Googleが提唱しているCore Web Vitals（コアウェブバイタル）で色々と話題に上がるようになったので、widthやheightを書くのが必須という流れができてはいますが、それでも見た目上は書かなくても表示されるため、書かない方もまだ少数ながらいます。

サイト制作を途中で受け継いだり、更新管理のリプレイスでサイトを見ると、指定されてないというサイトは意外とあったりもするので、しっかり忘れずに書くように心がけましょう。

サイズを書くときに大切なのは実は縦横の比率になるのですが、結局のところは画像のサイズをそのまましっかり入れておき、見た目の調整はCSSでやるのが一番スムーズで他に気を取られなくて済むので実際の画像サイズを入力しておくのが無難です。

また、実際にコーディングしていくときは縦・横のサイズ指定だけでなく、altなどについてもしっかりと入れるのを忘れないようにしておきたいところです。

せっかく作るならwidthとheightとaltの3点セットはデフォルトでしっかり入れるというくらいを心がけておくのが良いのでは？と個人的には思っていますし、実際に自分はそうしています。（もっと言うと、loading属性やdecoding属性もデフォルトに…と言いたいところですがそれはまた別の記事でまとめておきます。）