HTMLで画像を表示する方法-----imgとbackgroundの違い

この章では、htmlでの画像表示方法-----imgとbackgroundの違いを紹介し、htmlで画像を表示する2つの方法の違いを理解できるようにします。困っている友人は参考にしていただければ幸いです。

1. 解析の仕組みからすると、

imgはhtmlタグに属し、backgroundはcssメソッドです。ページは html、css、js で構成されます。ブラウザの解析メカニズムに従って、html タグが最初に解析されます。 CSS ファイルがヘッドに読み込まれることは誰もが知っていますが、これはすぐに実行されるという意味ではなく、HTML が読み込まれた後にのみ実行されます。したがって、ロゴなどの重要な要素には img を使用する必要があります。

バナーや広告画像など、画像を表示するだけの場合は、背景方法を使用することをお勧めします。帯域幅の占有とデータ輻輳の発生を避けるために、重要でない項目は自動的に後ろのキューに入れられるためです。

画像が多い場合、ここで新たな問題が発生します。ブラウザによってサポートされる同時読み込み数が異なります。(最新のテスト) IE は 10、FF は 10 です。画像が多すぎると、遅延または 404 が発生します。 、画像の読み込みが遅いとページのメインデータの表示に影響するため、ユーザーに表示されるものはすべて空白になります。彼を待たせ続けるのは恥ずかしいですか？したがって、lazyload を使用しない場合は、バックグラウンドを使用することをお勧めします。

img タグの利点は、自己終了型であり、空タグの出現を回避できることです (空タグも w3c によって検証されるコンテンツの 1 つです)。バックグラウンド方式を使用すると、ブートストラップのアイコンにはすべて i タグが追加され、その i タグには空のコンテンツが含まれるため、空のタグが表示されます (これが悪いというわけではありません。メリットとデメリットについては後で説明します)。 ）。

2. SEOの観点から

先ほど述べたように、imgタグは自己終了タグであり、テキストコンテンツを追加できません。ただし、imgにはalt属性があり、この属性はw3c標準で必須です。 、そうすることにはまだ多くの利点があります。

まず、画像が比較的大きい場合、またはユーザーのインターネット速度が遅い場合、少なくとも、画像がどのようなコンテンツであるかをユーザーに伝えるテキストプロンプトが表示されます。ユーザーがどうしてもこの画像を見たい場合は、画像を数回スワイプして読み込みます。さらに、alt 属性は、特にリーダーを使用してページを閲覧する目の見えない友人にとって、読書を補助するのに役立ちます。テキスト プロンプトがなければ、あまりにも不親切です。

第二に、alt 属性は SEO に有益です。検索エンジンが優れた画像認識を実現するにはまだ道がありません。

もちろん、いくつかの欠点もあります:

まず、Img によってロードされた画像は src を通じて取得されます。HTML コードの変更が許可されていない場合、画像を変更できるのは同じ名前のファイルだけです。交換されましたが、304 ステータスが発生する可能性があり、サーバー側で対応する設定を行う必要があります。この時に背景のメリットが出てくるのですが、これがスキン変更用のクリです。

第 2 に、画像表示領域のスペース サイズが予約されている場合、画像は予約されたスペースと一致している必要があります。そうでない場合、画像は引き伸ばされるか圧縮され、これは均等な比率の操作ではありません。もちろん、この問題を回避するには、フロントエンド デザイナーとビジュアル デザイナーが特定の基準に従う必要があります。

3. セマンティクスの観点

background はセマンティクスが明確な HTML タグです。

推奨: 最初にロードする必要がある重要な写真には img を使用するのが最善です。重要でない写真には背景を使用するのが最善です。

SEO を行うのに最も便利な方法は背景です。写真は背景に配置され、コンテンツは前景に書かれます。どちらも正しいです。コンテンツを表示したくない場合は、text-indent、-99999 を追加します。 （この遊び方は、検索エンジンのアルゴリズムが単一で、割合の高いキーワードが上位に表示されていた時代に使われていました）。

先ほどブートストラップの背景メソッドについて触れましたが、ブートストラップのメソッドはアイコンの設定に背景を使用するため、モジュール化する必要があり、両方の方法を使用することはできません。 PS: ブートストラップ v3 以降、アイコン フォントが採用されました

次に、アイコンの重要性は実際には高くありませんが、最後にロードすることで帯域幅の使用量が削減され、PV 速度が向上します。

img タグのセマンティクスは非常に明確であり、無差別に使用することはできないため、ブートストラップではセマンティクスのない i タグを使用してアイコンを設定するのが良いでしょう。 PS: 独自のプロジェクトでセマンティックのないタグを使用する場合は、それらが上位互換性があるかどうかに注意し、HTML5 の定義に注意を払う必要があります

以上がHTMLで画像を表示する方法-----imgとbackgroundの違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。