0
1
imgタグに「width」「height」を指定すると画像サイズが固定されてしまうため、ネットで調べるとCSSに「height: auto;」を指定するといった解決方法がでてきます。
たしかに「height: auto;」を指定すると画像サイズが固定されることはなくなりました。
ただ、「height: auto;」を指定した状態で画像が読み込めない場合、高さがなくなりレイアウトが崩れる状態になります。
対処法について調べてはみたのですが、aspect-ratioを使う、画像をdivで囲みdiv側で高さを指定するなど人によって対応がバラバラでした。
画像1つ1つに上記を対応するのも手間がかかるのでみなさんはどうしているのか気になり質問させていただきました。
「height: auto;」をつける理由は、画像サイズが固定だとデザイン的に違和感があるため、ブラウザ幅を縮めても画像を可変さたいという理由です。
それなら「width」「height」指定しなければいいというご意見もあるかと思いますが、imgタグに「width」「height」を指定しないとサイトの評価が下がると聞いたため付与しています。
自分的には、基本は「height: auto;」でレイアウトシフトが気になる場合は個別対応かなとは思っています。
回答12件
#1
総合スコア117665
投稿2024/03/02 05:29
「width」「height」を指定すると画像サイズが固定されてしまう
固定されないことでレイアウトが崩れることを問題とするなら固定することが解決策では？
固定されることのデメリットはなんだと思われています？
#2
#1
デメリットは、ブラウザ幅を縮小してもサイズが変わらないのでデザイン的に違和感がでてくることです。
画像の大きさは変わらず、文字サイズが縮小されるとバランスが悪くなるのがデメリットかなと思ってます。
#3
総合スコア37413
投稿2024/03/04 02:07
編集2024/03/04 05:25ただ、画像が読み込めないと高さがなくなり、レイアウトが崩れる状態になります。
そうなりますか？
手元のブラウザ（Firefox123 Chrome122）だと、width属性height属性が指定されていればレイアウトシフトは起きないようでした。
これは2,3年前から、内部的にaspect-ratio: attr(width) / attr(height)を適用してるからだったと記憶してます。
ただ、width属性height属性によるアスペクト比が実際の画像と異なる場合には、読み込み後に intrinsic aspect ratio が実際の画像に更新されるはずなので、レイアウトシフトが起きるかと思います。そのような運用をする理由はあまりないと思いますが。
もし、Safari限定などのケースであれば、そのように書かれた方が話が混乱しないかもしれませんね。
自分的には、基本は「height: auto;」でレイアウトシフトが気になる場合は個別対応かなと
そもそもimg要素にwidth属性height属性を指定するのって、レイアウトシフトを防ぐ方策だったと記憶してます。
なので、レイアウトシフトに対応しないなら、そもそもwidth属性height属性を指定しなければいいかな、と思います。その場合にはheight: auto;は初期値なので不要かと。
#4
#3
ご回答ありがとうございます。
width属性height属性が指定されていればレイアウトシフトは起きないようでした。
おっしゃるとおり、 width属性height属性を指定するとレイアウトシフトは起こりません。
ただ、width属性height属性を指定してしまうと、画像のサイズが固定されてしまい、デザイン的に違和感があるので、その対策として「height: auto;」を指定して、ブラウザ幅が変わると画像サイズも変更するようにしました。
そうすると、画像サイズは変わるのですが、画像が読み込めないと高さがなくなり、レイアウトが崩れるという状態です。
レイアウトシフトに対応しないなら、そもそもwidth属性height属性を指定しなければいいかな、と思います。
width属性height属性を指定しないとサイトの評価が下がると聞いたため、苦肉の策でwidth属性height属性と「height: auto;」の両方指定する方がいいのかなと思っておりました。
#5
総合スコア37413
投稿2024/03/04 04:52
そうすると、画像サイズは変わるのですが、画像が読み込めないと高さがなくなり、レイアウトが崩れるという状態
当方で試した限りではレイアウトシフトは起きませんでした（Firefox123 Chrome122）。環境の問題があるのかもしれないですね。
#7
総合スコア37413
投稿2024/03/04 05:34
#4
コードで話した方が早そうなので、サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/gscephnb/
当方の環境ですと、『画像が読み込めないと高さがなくなり、レイアウトが崩れる』ということは起きないのですが、そちらでは違いますか？
また、想定されていたコードとは何か違いますか？
#8
総合スコア37413
投稿2024/03/04 05:50
あと、これはGoogle先生次第だと思うのではっきりしたことは言えませんが、「レイアウトシフトは対応しないけどSEOのためにwidth属性height属性を埋める」というのは本末転倒、というかなにかそれ効果があるのかな、という気がしてます。
【Core Web Vitals】CLSの要因と改善策をざっくりまとめ #Web - Qiita
#11
総合スコア37413
投稿2024/03/04 06:58
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。