質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.84%

  • HTML

    7788questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • HTML5

    3489questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    1802questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

【HTML】img要素にwidth,height属性をつけますか?

解決済

回答 5

投稿

  • 評価
  • クリップ 0
  • VIEW 238

towatatsu12

score 2

レスポンシブ対応やインターネット環境の向上で、img属性にwidth,height属性をつける必要性がないと感じていますが
みなさんは、どうしていますか?

理由も書いていただければ幸いです。


私は、下記のメリット・デメリットを認識していますがレスポンシブ対応を考えると
メリット部分が弱いかと考え、width属性などをつけていません。
■メリット
インターネット回線が遅い環境でもレイアウト崩れがなくなる

■デメリット
コーディングが長くなる
画像差し替えの際に手間が増える

よろしくおねがいします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 5

checkベストアンサー

+3

単位が%とかvwとか相対的な単位になるimgにはつけないです
理由:widthを指定したところで正解の配置サイズにならない

画像サイズによらずにcssで配置サイズを統一したいimgにはつけません
理由:widthを指定したところで正解の配置サイズにならない

inline-blockやflexのアイテムの中にあって
そのアイテムのサイズに影響するimgにはつけます
理由:読み込みの時レイアウトがガタガタするのがイヤ

画像サイズがバラバラの画像をいくつも配置する場合
cssでは書かずにそれぞれwidthで書きます
理由:画像の追加・削除の度にcssも更新しなきゃいけないとか面倒

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+2

インターネット環境がどうのこうのより、ブラウザに画像サイズの余計な計算をさせなくて済むことによってブラウザのレスポンスが早くなるということなのではないでしょうか。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/11 23:30

    タイトルが聞きたい内容です。
    分かりづらくて、すみません。
    【HTML】img要素にwidth、height属性をつけますか?

    キャンセル

+1

つけないとlinterで100点取れなくなる・・・っていうのはもう古いかもしれませんね。

ブラウザが計算しやすいので、レスポンスよかったり、
(現在ではわずかな差ではありますが)
Retinaディスプレイにおいて、表示より大きい画像を表示していても、
CSSで大きさを決めなくて済むなど、
利点はけっこうありますよ。
ただ、おっしゃる通り、レスポンシブデザインで大きさを決めたくないって時は、少々わずらわしかったりはしますけどね。
(そういう時は、widthに100%とか入れてます。 ↑ただしこの書き方はIE9だと、横幅が認識されません 笑)
上記取り消し部分について、<img width="100%" height="auto">と入れるやり方の際とのつもりでしたが、
width、heightには、autoという値がないとのご指摘をいただきましたので、
取り消します。

あと、SEOにも影響があります。
というのも、ユーザビリティ(パフォーマンスが高いということ)が高く、HTMLとして正しい構文で記述され、エラーがないページの方が、SEOにおいての評価が高くなるからです。
といってもこれは古い知識かもしれませんが。(今は違うかも)

なので、僕は、いまだに、スマホのページのHTMLだったとしても、必ずwidthとheightはつけております。
(スマホの場合は、画像の実寸を入れている)
その上で、スマホやレスポンシブの場合はCSSで大きさをコントロール、ってやってますね。

また、最近では、Retinaディスプレイ対応のために、srcsetを使用しております。

<!-- 原寸(1xの画像)は、200px × 200px、そのサイズで表示させたい場合 -->
<img src="test.jpg" srcset="test.jpg 1x,test@2x.jpg 2x" width="200" height="200" alt="テスト画像">


srcも同時に定義すれば、srcsetがきかないブラウザに関してもsrcで定義した画像が表示されるので、
安心です。
この場合でも、必ず、width、heightは入れるようにしております。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

ブログをやってます。
色んな祭や街並の写真をアップしてます。
基本width height 指定は必ずしてます。max-widthを100%以下にしてしておかないとまずいんじゃないでしょうか。
で、当然heightはautoになります。
画像が表示画面からはみだすとレスポンシブの意味が無くなりませんか?

私は記事部分の全体サイズの中での一枚の写真の納まりを95%にしていることが多いです。

写真は基本3:2のアスペクト比なのですが、これを横位置で普通は撮りますが、状況によっては縦位置になります。
縦位置の写真のwidth指定をそれなりの指定をしないと横位置の写真との大きさのバランスが崩れるので、縦位置の写真はwidthを小さくしてしますね。

記事内での画像の大きさを指定するって普通です。
最大で必ず表示されるって。

表現の仕方ですよね。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/13 14:00

    heightにauto入れると、IE9だと、サイズが認識されなくなりますが、
    IE9はもう、無視してもいいかもしれませんよね・・・。

    キャンセル

  • 2018/06/13 15:28

    あれま。そんな古いバージョンって使われてるのですかね。
    私の私的ブログをGoogle Analyticsで直近三ヶ月を調べてみました。
    全10,384の訪問者の内
    IEの方はver別に下記のような数になってます。

    ver11 :1,729
    ver 9 :185
    ver10 :20
    ver 8 :6
    ver 7 :5

    IE9以前の方が2%程おられるようですね。
    なるほど、これをどうするかは結構悩ましいです。

    キャンセル

  • 2018/06/13 15:34

    そうなんですよ、世界的にはほぼ全滅はしてるんですが、
    日本国内だとわずかに生き残ってるんですよね、IE9・・・。
    強制アップデートとかまたやってほしいものです 泣

    僕も、heightにauto入れたい時けっこうあって、
    IE9のためにやむなくheight属性をとったりしていました。
    去年あたりからうちの会社は、IE9のサポート切っちゃってるので、
    だいぶ楽になってますが 笑

    キャンセル

  • 2018/06/13 17:33

    質問者が height *属性* の質問をしているのに auto と言っているのが気になりました。CSSの話をしているのでしょうか?

    キャンセル

  • 2018/06/13 17:46

    x_xさん、<img width="100%" height="auto">みたいなことです。
    こうしておくと、横幅はいっぱいいっぱい、縦は画像のアスペクト比を維持してなりで表示、とできます。

    もちろん、CSSでも同じようなコントロールができます。

    キャンセル

  • 2018/06/13 17:49

    hgforteratail さんはどうなのでしょうか?

    キャンセル

  • 2018/06/13 18:13

    miyabi_takatsukさんと同じです。
    HTML5ではwidth、height属性は廃止されてますので、
    <img style="width: 50%; height: auto;">などとやったりしてます。
    確かにこれでは属性ではなかったようです。

    キャンセル

  • 2018/06/13 18:22

    本気で言っているのならこの質問に答える前に、HTML を勉強しなおしたほうがいいのではないでしょうか?

    キャンセル

  • 2018/06/13 18:23

    To: hgforteratailさん
    > HTML5ではwidth、height属性は廃止されてますので、
    廃止はされていないと思います。

    【<img>: 埋め込み画像要素 - HTML | MDN】
    https://developer.mozilla.org/ja/docs/Web/HTML/Element/img#attr-height

    キャンセル

  • 2018/06/13 18:28

    kei344さん、x_xさん。
    失礼しました。私の勘違いでした。
    申し訳ありません。ご指摘戴いて、長い間勘違いしてたことに気付きました。
    ありがとうございました。

    キャンセル

  • 2018/06/13 18:29

    > hgforteratailさん
    申し訳ございません、コメントのstyle属性でコントロールのやりかたでは、
    僕のやつとは違う内容になります・・・。
    僕が言っているのは、あくまで、width,height属性に%なりautoなりを入れる方法です。

    キャンセル

  • 2018/06/13 18:57

    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は文法違反です。

<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 20:01

    この回答がhgforteratailさんへのコメントになっていませんか?
    towatatsu12 さんは「height="auto"」と言うことを質問および返信において書いておられないと思います。

    キャンセル

  • 2018/06/13 23:38

    失礼しました。
    仰る通り、誤解していました。

    キャンセル

  • 2018/06/14 00:13

    pictureは、IEは非対応ですよ。

    まぁ、これからの時代、IE対応自体ナンセンスな時代にはなりますけどね。ただ、まだ根強くユーザーは残っているので、しばらくはプロとして対応は必要になるかと思いますよ。
    特にネットリテラシーが少ないユーザーをターゲットにする場合は必要になります。

    auto値がないのは、完全に知識不足でした。失礼しました。

    キャンセル

  • 2018/06/14 08:10

    To: miyabi_takatsuk さん
    IE11 未対応を追記しておきました。
    確かにこれは良くないですね。

    キャンセル

  • 2018/06/14 09:01

    ただ、早くpictureとか、新しい便利な技術は使いたいですよね。
    早くIEが絶滅することを念願して止みません。

    https://parashuto.com/rriver/responsive-web/picture-srcset-use-case

    上記にサイズの変更だけは、imgとsrcset、画像自体を変更する(縦用とか)はpicture、と使い分けるのがいいと書かれております。
    確かにこれいいですね。
    実はさんざ言っておいて、僕自身imgのsrcsetを最近は使っております。srcも同時に定義するやり方です。
    これなら、対応してないブラウザはsrcの方が使われるので、画像が表示されないことはなくなるので、いい感じです。

    キャンセル

  • 2018/06/14 09:10

    To: miyabi_takatsuk さん
    JavaScriptでPolyfillコードを書くのが手間が少ない解決法だと思います。

    本題に戻りますと、私はimg要素のwidth属性、height属性は必ず、入れます。
    親記事に書いた通り、拡大/縮小目的で使うと「一つの画像で拡大すればボケボケになり、縮小すれば余計なトラフィックが発生します」ので。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.84%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • HTML

    7788questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • HTML5

    3489questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    1802questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。