ずいぶん前に HTML を初めて学習したとき、HTML で画像のサイズを常に設定することが重要であると教えられました。これにより、ブラウザは画像を配置する場所に空のボックスを描画し、ページをレンダリングし、次に、画像が属する場所にダウンロードしてレンダリングします。画像の幅と高さの値を設定しなかった場合、ブラウザは最初に画像をダウンロードしてサイズを検出する必要があり、接続が不安定な人にとってはページの読み込みが遅くなります.
ここ数年、私は CSS を使用しており、常にHTML のタグにwidthandheight宣言を入れています。img私の質問は、スタイル シートで幅と高さを設定し、これらの HTML 属性を追加しなくても同じように良いですか? それらがなくても、私の質素な HTML は確かにさらにきれいに見えます。
画像がすぐにダウンロードされないという問題は、CSSにも当てはまります。
違いは、残りの CSS がないとレイアウト全体が意味をなさない可能性があることです。言い換えれば、CSS の残りの部分がロードされていない場合、画像のサイズも欠落しているという事実はそれほど目立たないということです。
だから個人的には寸法をCSSに入れてもいいと思います。
これは良い質問ですが、少し主観的であり、SO で一般的に推奨されているよりも多くの議論につながる可能性があります。
90 年代にさかのぼると、ブラウザは遅く、インターネットも同様でした。56k は中サイズの画像を転送するのに時間がかかりました。その間、レイアウトは画像に合わせてサイズ変更されます。
10 年早送りすると、インターネットの速度が大幅に速くなり、レンダリング時間も大幅に短縮されます。ユーザーは、ページ読み込みの最初の 0.5 秒で少し変化するレイアウトに慣れています。ロード中にページのレイアウトが変わる可能性があることを理解している限り、画像サイズを指定しないことも悪くありません。
CSS はページが読み込まれる前に解析されるため、CSS で高さと幅を指定すると、インラインで指定するのと同じように機能します。
覚えておくべきことの 1 つは、インライン スタイル (および高さと幅の宣言を含む)は常にCSS よりも特異性が高いということです。画像の高さと幅をインラインで指定する場合、画像のサイズを調整するには、画像が存在するすべてのページに戻る必要がある場合があります。
個人的には、すべてのスタイルを同じ場所に保持できる CSS を使用することをお勧めします。
はい、CSS でこれらのプロパティを設定しても同様に機能します。
ただし、ページのレンダリング速度に何らかの影響があるかどうかはわかりません。それが持つ小さな効果は、画像がロードされ、最終的にすべてのスペースが割り当てられるまで、画像に依存するレイアウトがページ上を飛び回るように見えることです。
これは私自身が実践している方法ではありません。
同様の質問がすでに議論されており、ここで回答されています。
インラインで定義する必要があります。img タグを使用している場合、その画像にはコンテンツに対するセマンティックな値が必要です。そのため、検証には alt 属性が必要です。
画像をレイアウトまたはテンプレートの一部にする場合は、img タグ以外のタグを使用して、画像を CSS 背景として要素に割り当てる必要があります。この場合、画像には意味的な意味がないため、alt 属性は必要ありません。ほとんどのスクリーン リーダーは、CSS 画像が存在することさえ知らないと確信しています。
これも役に立ちます:
サイト テンプレートの一部である場合は、CSS ファイルに配置します。
1 ページだけの場合は、インラインにする必要があります (または上部のページ固有の CSS のブロックで定義します)。
当時、寸法を常に HTML コードに入れていた理由は、ロード時間によるものでした。14.4K モデムでは、メインの HTML ドキュメントがロードされた後に、比較的小さな画像ファイルでも著しくロードされました。
最近では、これはあまり問題になりません。それが問題である場合は、CSS ファイルがメインの HTML ドキュメントの後に読み込まれることに注意してください。そのため、そこでサイズを指定するだけで同じ問題が発生する可能性がありますが、CSS ファイルは通常かなり小さいため、効果は次のようになります。最小化。
もう 1 つのポイントは、旧式の HTML デザインはレイアウトに非常に重点を置いており、画像サイズがその重要な部分であることが多かったということです。画像のサイズが間違っていると、ページ全体のレイアウトが完全に間違っていることがよくありました。
最新のページ デザインでは、レイアウト情報を最小限に抑えて HTML に配置し、すべてをスタイルシートに抽象化するという、非常に異なるアプローチをとっています。したがって、典型的な最新のサイトでは、スタイルシートが読み込まれるまで、サイトは単なる一連のブロックであり、デザインが完全に欠けています。実際、サイズだけでなく、グラフィック自体がスタイルシートで定義されていることがよくあります。
答えは、最新のページ デザイン方法に従うには、スタイルシートに配置する必要があるということです。
最近のほとんどのサイトでは、スタイルシートがすばやく読み込まれることが重要であることは明らかですが、影響を受けるのはグラフィックスのサイズだけではありません。
CSS を使用してレイアウトをクリーンアップできますが、1 つの画像を読み込めないためにレイアウトが台無しになる場合は、最初にそれを修正する必要があります。
最新のレイアウトは div と CSS で制御する必要があり、レイアウト内の画像は形式でのみ提供する必要があります。background-image:
唯一の違いは、css が読み取れないこと (可能です!) であるため、<img>属性が使用されることだと思います。でもよくわからないので確認してみます。
編集: http://www.mezzoblue.com/archives/2005/05/10/image_attrib/