Q&A
タイトルが聞きたい内容です。
分かりづらくて、すみません。
【HTML】img要素にwidth、height属性をつけますか？
レスポンシブ対応やインターネット環境の向上で、img属性にwidth,height属性をつける必要性がないと感じていますが
みなさんは、どうしていますか？
理由も書いていただければ幸いです。
私は、下記のメリット・デメリットを認識していますがレスポンシブ対応を考えると
メリット部分が弱いかと考え、width属性などをつけていません。
■メリット
インターネット回線が遅い環境でもレイアウト崩れがなくなる
■デメリット
コーディングが長くなる
画像差し替えの際に手間が増える
よろしくおねがいします。
回答5件
0
ベストアンサー
単位が%とかvwとか相対的な単位になるimgにはつけないです
理由：widthを指定したところで正解の配置サイズにならない
画像サイズによらずにcssで配置サイズを統一したいimgにはつけません
理由：widthを指定したところで正解の配置サイズにならない
inline-blockやflexのアイテムの中にあって
そのアイテムのサイズに影響するimgにはつけます
理由：読み込みの時レイアウトがガタガタするのがイヤ
画像サイズがバラバラの画像をいくつも配置する場合
cssでは書かずにそれぞれwidthで書きます
理由：画像の追加・削除の度にcssも更新しなきゃいけないとか面倒
投稿2018/06/11 14:26
総合スコア7834
0
インターネット環境がどうのこうのより、ブラウザに画像サイズの余計な計算をさせなくて済むことによってブラウザのレスポンスが早くなるということなのではないでしょうか。
投稿2018/06/11 14:07
総合スコア13727
0
つけないとlinterで100点取れなくなる・・・っていうのはもう古いかもしれませんね。
ブラウザが計算しやすいので、レスポンスよかったり、
（現在ではわずかな差ではありますが）
Retinaディスプレイにおいて、表示より大きい画像を表示していても、
CSSで大きさを決めなくて済むなど、
利点はけっこうありますよ。
ただ、おっしゃる通り、レスポンシブデザインで大きさを決めたくないって時は、少々わずらわしかったりはしますけどね。
（そういう時は、widthに100%とか入れてます。
↑ただしこの書き方はIE9だと、横幅が認識されません 笑）
上記取り消し部分について、<img width="100%" height="auto">と入れるやり方の際とのつもりでしたが、
width、heightには、autoという値がないとのご指摘をいただきましたので、
取り消します。
あと、SEOにも影響があります。
というのも、ユーザビリティ（パフォーマンスが高いということ）が高く、HTMLとして正しい構文で記述され、エラーがないページの方が、SEOにおいての評価が高くなるからです。
といってもこれは古い知識かもしれませんが。（今は違うかも）
なので、僕は、いまだに、スマホのページのHTMLだったとしても、必ずwidthとheightはつけております。
（スマホの場合は、画像の実寸を入れている）
その上で、スマホやレスポンシブの場合はCSSで大きさをコントロール、ってやってますね。
また、最近では、Retinaディスプレイ対応のために、srcsetを使用しております。
html
1<!-- 原寸（1xの画像）は、200px × 200px、そのサイズで表示させたい場合 --> 2<img src="test.jpg" srcset="test.jpg 1x,test@2x.jpg 2x" width="200" height="200" alt="テスト画像">
srcも同時に定義すれば、srcsetがきかないブラウザに関してもsrcで定義した画像が表示されるので、
安心です。
この場合でも、必ず、width、heightは入れるようにしております。
投稿2018/06/12 09:29
編集2018/06/14 02:37
総合スコア9555
0
ブログをやってます。
色んな祭や街並の写真をアップしてます。
基本width height 指定は必ずしてます。max-widthを100％以下にしてしておかないとまずいんじゃないでしょうか。
で、当然heightはautoになります。
画像が表示画面からはみだすとレスポンシブの意味が無くなりませんか？
私は記事部分の全体サイズの中での一枚の写真の納まりを95％にしていることが多いです。
写真は基本3:2のアスペクト比なのですが、これを横位置で普通は撮りますが、状況によっては縦位置になります。
縦位置の写真のwidth指定をそれなりの指定をしないと横位置の写真との大きさのバランスが崩れるので、縦位置の写真はwidthを小さくしてしますね。
記事内での画像の大きさを指定するって普通です。
最大で必ず表示されるって。
表現の仕方ですよね。
投稿2018/06/12 14:31
編集2018/06/12 14:39
総合スコア52
heightにauto入れると、IE9だと、サイズが認識されなくなりますが、
IE9はもう、無視してもいいかもしれませんよね・・・。
あれま。そんな古いバージョンって使われてるのですかね。
私の私的ブログをGoogle Analyticsで直近三ヶ月を調べてみました。
全10,384の訪問者の内
IEの方はver別に下記のような数になってます。
ver11 :1,729
ver 9 :185
ver10 :20
ver 8 :6
ver 7 :5
IE9以前の方が2%程おられるようですね。
なるほど、これをどうするかは結構悩ましいです。
そうなんですよ、世界的にはほぼ全滅はしてるんですが、
日本国内だとわずかに生き残ってるんですよね、IE9・・・。
強制アップデートとかまたやってほしいものです 泣
僕も、heightにauto入れたい時けっこうあって、
IE9のためにやむなくheight属性をとったりしていました。
去年あたりからうちの会社は、IE9のサポート切っちゃってるので、
だいぶ楽になってますが 笑
質問者が height *属性* の質問をしているのに auto と言っているのが気になりました。CSSの話をしているのでしょうか？
x_xさん、<img width="100%" height="auto">みたいなことです。
こうしておくと、横幅はいっぱいいっぱい、縦は画像のアスペクト比を維持してなりで表示、とできます。
もちろん、CSSでも同じようなコントロールができます。
hgforteratail さんはどうなのでしょうか？
miyabi_takatsukさんと同じです。
HTML5ではwidth、height属性は廃止されてますので、
<img style="width: 50%; height: auto;">などとやったりしてます。
確かにこれでは属性ではなかったようです。
本気で言っているのならこの質問に答える前に、HTML を勉強しなおしたほうがいいのではないでしょうか？
To: hgforteratailさん
＞ HTML5ではwidth、height属性は廃止されてますので、
廃止はされていないと思います。
【<img>: 埋め込み画像要素 - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/img#attr-height
kei344さん、x_xさん。
失礼しました。私の勘違いでした。
申し訳ありません。ご指摘戴いて、長い間勘違いしてたことに気付きました。
ありがとうございました。
> hgforteratailさん
申し訳ございません、コメントのstyle属性でコントロールのやりかたでは、
僕のやつとは違う内容になります・・・。
僕が言っているのは、あくまで、width,height属性に%なりautoなりを入れる方法です。
width,heightは一部要素で廃止
https://www.osaka-kyoiku.ac.jp/~joho/html5_ref/width_attr.php?menutype=2dtaldl01l02l03A0
table,th,tdには書かれてること多いだろうからHTML5対応の修正の時には大変そう
0
誤読で hgforteratail さんへのコメントになってしまいましたので、本回答は無視して下さい。
img要素の width, height 属性
https://momdo.github.io/html/embedded-content-other.html#dimension-attributes
著者要件：img、iframe、embed、object、videoおよび、type属性がImage Button状態にある場合のinput要素上のwidthおよびheight属性は、その要素の視覚コンテンツの次元（出力媒体の名目上の方向に対するそれぞれの幅および高さ）をCSSピクセルで与えるために指定してもよい。属性が指定される場合、妥当な非負整数である値を持たなければならない。
すなわち、次のHTMLは文法違反です。
HTML
1<img src="foo.jpg" width="auto" height="auto">
heightにauto入れると、IE9だと、サイズが認識されなくなりますが、
width, height 属性に auto という値はありません。
picture要素
x_xさん、<img width="100%" height="auto">みたいなことです。
それはimg要素である必要がありますか。
一つの画像で拡大すればボケボケになり、縮小すれば余計なトラフィックが発生します。
私なら、picture要素、source要素を使う方向で考えます。
(2018/06/14 08:05追記)
miyabi_takatsuk さんより「IE11 は picture 要素をサポートしていない」という指摘を頂きました。確かに対応していませんでした。
Re: towatatsu12 さん
投稿2018/06/13 10:53
編集2018/06/13 23:08
総合スコア18194
この回答がhgforteratailさんへのコメントになっていませんか？
towatatsu12 さんは「height="auto"」と言うことを質問および返信において書いておられないと思います。
失礼しました。
仰る通り、誤解していました。
pictureは、IEは非対応ですよ。
まぁ、これからの時代、IE対応自体ナンセンスな時代にはなりますけどね。ただ、まだ根強くユーザーは残っているので、しばらくはプロとして対応は必要になるかと思いますよ。
特にネットリテラシーが少ないユーザーをターゲットにする場合は必要になります。
auto値がないのは、完全に知識不足でした。失礼しました。
To: miyabi_takatsuk さん
IE11 未対応を追記しておきました。
確かにこれは良くないですね。
ただ、早くpictureとか、新しい便利な技術は使いたいですよね。
早くIEが絶滅することを念願して止みません。
https://parashuto.com/rriver/responsive-web/picture-srcset-use-case
上記にサイズの変更だけは、imgとsrcset、画像自体を変更する（縦用とか）はpicture、と使い分けるのがいいと書かれております。
確かにこれいいですね。
実はさんざ言っておいて、僕自身imgのsrcsetを最近は使っております。srcも同時に定義するやり方です。
これなら、対応してないブラウザはsrcの方が使われるので、画像が表示されないことはなくなるので、いい感じです。
To: miyabi_takatsuk さん
JavaScriptでPolyfillコードを書くのが手間が少ない解決法だと思います。
本題に戻りますと、私はimg要素のwidth属性、height属性は必ず、入れます。
親記事に書いた通り、拡大/縮小目的で使うと「一つの画像で拡大すればボケボケになり、縮小すれば余計なトラフィックが発生します」ので。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。