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

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

ただいまの
回答率

90.60%

  • HTML

    8684questions

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

  • HTML5

    3881questions

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

HTMLの<img>タグのwidth指定について。

解決済

回答 3

投稿

  • 評価
  • クリップ 1
  • VIEW 1,207

YuichiKataoka

score 206

HTML5の<img〜>タグを使用する際、今までは「width」、「height」それぞれ指定していたのですが,「width」だけ指定すれば、heightも同比率のまま拡大縮小されることを最近知りました。

正しい記述としては、やはり両方(width,height)記載した方が良いのでしょうか?読み込みが早いのは記載していた方が早いのでしょうか?

教えて下さい。
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

checkベストアンサー

0

両方記載したほうがいいです。widthのみの場合、widthからheightを計算することになるので遅くなります。また、画像が読み込めなかった場合でもその画像の大きさを前提としたレイアウト組みが維持されるので良いです。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/04/29 11:57

    なるほどぉ。ありがとうございます。あと、少し質問の趣旨から外れてしまうのですが
    例えば「縦横600px」の画像を綺麗に見せたい場合にwidth,heightを「300px」に指定して表示させたりということをやるのですが、これって綺麗に見せたい場合に正しいやり方でしょうか?

    ブラウザChromeなんかだと、綺麗に見えるんですが「IE」や「Safari」だと綺麗に見えません。特にIEはガチャガチャな見え方になってしまいます。。。。

    キャンセル

  • 2015/04/30 00:03

    正しくないですね
    綺麗に見せたいならそもそも画像の解像度を高くしておくかベクターにするかなどになるでしょうね

    もしよければ以下のURLを確認してみてはどうでしょうか
    http://compojigoku.blog.fc2.com/blog-entry-15.html

    キャンセル

  • 2015/04/30 21:19

    正しくないとのことなのですが、「縦横600px」の画像をwidth,heightを「300px」に指定して表示してみると、かなり綺麗に見えるのですが、
    このデメリットを教えて頂けませんでしょうか?

    キャンセル

  • 2015/05/01 00:59

    質問者の方が書いていた通り
    >ブラウザChromeなんかだと、綺麗に見えるんですが「IE」や「Safari」だと綺麗に見えません。特にIEはガチャガチャな見え方になってしまいます
    のように問題はいくらでも起こりますよ。
    ブラウザごとの振る舞いによって処理が変わったり、見栄えが変わったりしてしまうのは致命的なデメリットかと思われます……。
    画像を加工しておくひと手間を省くか、一部ブラウザで表示が狂う、見栄えが悪くなることのどちらに重きを置くかということでしょう。
    私はよほど理由がない限り、画像を加工したほうがメリットがあると考えます(というより見栄えが悪くなるリスクを排除するというべきか)。

    余談ですが同じような質問をされている方がいました。
    http://answers.microsoft.com/ja-jp/ie/forum/ie9-windows_7/ie9%E3%81%A7%E3%81%AF%E5%A4%A7%E3%81%8D%E3%81%AA/654093f1-7a65-4506-83e5-67778ffe45d0
    大きな画像を小さく表示させたことにより発生するジャギの解決法はないですか?

    キャンセル

0

PC向けだと事前にリサイズしておくことは鉄板です。特に、古いブラウザを意識するのであれば。
iPhoneだと、組み方にもよるのかもしれませんが、実サイズだと逆にぼやける場合があるので逆に
大きめ(倍のサイズ)を使っています。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/04/29 12:49

    >PC向けだと事前にリサイズしておくことは鉄板です。特に、古いブラウザを意識するのであれば。
    リサイズとは600px(縦横)の正方形に配置したい場合に、600px正方形の画像をwidth,heightで600pxずつで指定するという意味ですか?

    >iPhoneだと、組み方にもよるのかもしれませんが、実サイズだと逆にぼやける場合があるので逆に
    大きめ(倍のサイズ)を使っています。
    例えば、300px(縦横)の正方形にレイアウトする場合、600px(縦横)の正方形を作成しておき、width,heightで300pxずつで指定するということでよろしいでしょうか?


    キャンセル

0

600x600の画像を300x300で表示したい場合は、300x300のサイズの画像で保存して

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

  • 解決済

    box-shadow<div>要素内の画像に。

    例えば以下の様にマークアップした画像があります。 <div class="Wrapper">         <img src="home" alt="" height="600

  • 受付中

    slick.js 画像が一瞬大きく表示されてしまう

    slick.jsを使用してカルーセルの画像を並べたのですが、 スマートフォンで開くと元画像のサイズがPC用の為か、一瞬画像が大きく表示されてしまいます。(すぐスマートフォン用の画

  • 解決済

    グレースケールで描画する

    範囲選択された画像をトリミングして、そのトリミングした画像をグレースケールで表示したいのですが、良い方法を知っている方教えてください。 いろんなサイトを見て回って、試したのですが

  • 受付中

    画像がサイトに表示されない。

    サイトに食べログのように個々の店舗の画像を掲載したいです。僕は現在yahoo!のapiを使って個々の店舗情報を取得しています。xml経由でphpファイルにyahoo!のapiのコー

  • 解決済

    PH画像サイズの調整

    画像をバックスラッシュで囲んで希望のサイズに直しているのですがwidth=100%のような相対値を入れるとheight=150に設定しても数値がきかないのですがそいういうルールがあ

  • 解決済

    Slickで画像スライドの実装を行う際の対象について

    前提・実現したいこと 現在、Slickを使って画像スライドの実装を行おうとしています。 その際に、画像を指定するタグをjQueryのappendで動的に生成しているのですが、そ

  • 受付中

    ブログでのプロの写真の設定

    ブログを作成しています。 Asthorのモデルを $ rails c Author.create(name: 'sparta', description: 'hogehoge', 

  • 解決済

    HTMLの画像が表示されない

    HTMLとCSSのコードを書いて、インターネットエクスプローラで実行させてみたところ、画像が表示されません。 サーバーはまだ契約しておらず、ファイルをインターネットエクスプロー

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

  • HTML

    8684questions

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

  • HTML5

    3881questions

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