イメージのサイズはhtmlで指定する必要がありますか？

Question

イメージのサイズはhtmlで指定する必要がありますか？

私は長い間、画像の幅と高さをハードコードすることが最良の方法であったことを思い出しましたが（一般的に、読み込み中に適切な量のスペースが割り当てられました）、今ではほとんどの人が高速で、？どんなコンテンツイメージでもhtmlでインラインサイズが設定されていることが望ましいですか？

1

追加された 27 10月 2011 〜で 10:43 著者 Damon 編集された 25 5月 2014 〜で 05:06

ビュー: 6

源

ro ru fr es pt de zh hi bn ar kk uz be tr uk

8 答え

HTML属性やスタイルシートを使用してサイズを設定するかどうかは関係ありませんが、イメージのサイズを指定する必要があります。

現時点では、画像の読み込み速度が非常に速いため、表示されているページと画像がポップアップする間に目立った遅延があります。イメージがロードされている間にページのレイアウトが変わっても、それはまだ気になります。

2

追加された 27 10月 2011 〜で 10:48 著者 Guffa

源

著者 Celso Bessa · Answer 1 · 2015-09-17T05:27Z

私はWordpress Stack ExchangeやWebmaster Stackの同様の質問に答えました。私はここにそれを掲示して、より多くの人々を明確にし、助けることを意図しています。（管理者/モデレーター：許可されていない場合は、適切な方法を教えてください）。

実際には、htmlに幅と高さを指定する必要はありません。それが意味することは、あなたが適切なスペースを確保しなければならないことと、画像がロードされると、ブラウザはページをリフローして再ペイントする必要がないということです。

また、ディメンションをハードコーディングすると、応答するビヘイビアを破ることができます。あなたのレイアウトが応答していない場合、それは問題ありませんが、応答性を維持したい場合は、CSSだけを使用して結果を得ることができます。

ほとんどの場合、widthと max-width：100 の両方を使用して作業しますが、
次のステップは、コンテナ内に画像を配置し、コンテナをいっぱいにすることです。これを行うには、イメージをコンテナ内に絶対配置する必要があります。例： "

.img-container {
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    background-color: black;
}

.img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

著者 Quentin · Answer 2 · 2011-10-27T10:45Z

はい、まだ好ましいです。

人々の多くは高速接続ではなく、モバイルがより一般的になりつつあります。

1

追加された 27 10月 2011 〜で 10:45 著者 Quentin

源

著者 oOo--STAR--oOo · Answer 3 · 2011-10-27T10:48Z

常にそのCSSを使うのがベストです

このように画像の高さと幅をハードコードすることができます

.myimg img {
width: 10px;
height: 10px;
}

0

追加された 27 10月 2011 〜で 10:48 著者 oOo--STAR--oOo

源

多くの人がCSSを使うと言っています。画像がコンテンツの一部であり、サイズが可変である状況ではどうでしょうか？異なる画像のカスタムクラスを作成できますか？画像サイズのクラスが安定していますか（縦横、縦横比、小/中/大）ですか？

追加された 27 10月 2011 〜で 11:45, 著者 Damon, 源

著者 Patricia · Answer 4 · 2011-10-27T10:48Z

あなたの画像ファイル自体は、あなたが特に遅いローディングについて心配している場合には、ほとんどの場合、あなたが表示したいサイズでなければなりません！あなたが500X800のpx画像を持っていれば、100X200として表示したいだけです。ファイルサイズがはるかに小さくなり、読み込み速度が速くなります:)

著者 Hubert Jarema · Answer 5 · 2011-10-27T10:45Z

それはインラインである必要はありません - あなたは外部CSSでそれを行うことができます。古いブラウザの中には、サイズを指定しないと、それを0pxとして扱うものもあります。

著者 Hilyin · Answer 6 · 2011-10-27T10:52Z

画像が読み込まれなかった場合や文書の読み込み中に空白が含まれていることを確認したい場合は、「はい」と答えます。しかし、ブラウザでの不必要な負荷や画像の歪みなど、これらの属性を使用して画像を拡大縮小/サイズ変更する場合は不要です。

著者 PackratDragon · Answer 7 · 2011-10-27T10:59Z

クロスブラウザとの互換性を考慮して設計している場合は、イメージ自体のCSSの高さと幅を少なくとも指定する必要があります。 FireFox、IE、Operaなどのサイズが画像専用に指定されていないと、不一致が見つかりました。異なるバージョンについて言及することなく、各ブラウザがHTML標準への順守を異なるように扱うという事実のために、私は、一部のブラウザではHTMLデザイナーの意図を推定するのに最善を尽くしますが、他の人は最初のエラーでうんざりすることがわかりました。タブレットなどのモバイルデバイスからウェブサイトを表示する場合は、ピクセルまたは％のサイズではなくemサイズをお勧めします。しかし私は、HTML5で遊んで始めたので、画像に関してHTML5の違いはありません。