2

背景画像と埋め込み画像のサイズが同じ場合、HTML ページの読み込みにかかる時間はほぼ同じですか? ページ内で同じ画像を 2 回 (背景として 1 回、通常の埋め込み画像として 1 回) 使用する場合、どちらが速く読み込まれますか?

Web サイトをスクリーン リーダーと互換性を持たせるために、画像を含める最良の方法は何ですか? 背景画像はスクリーン リーダーで適切に読み取られますか? それとも単に背景画像を無視しますか?

4

2 に答える 2

3

背景画像と埋め込み画像のサイズが同じ場合、HTML ページの読み込みにかかる時間はほぼ同じですか?

はいと思いますが、ロード方法にもよると思います。以前は、画像のプリロードと呼ばれる方法がありました。それが本当に有益かどうかを知るために、個人的に速度テストを行ったことはありません.

Web サイトをスクリーン リーダーと互換性を持たせるために、画像を含める最良の方法は何ですか? 背景画像はスクリーン リーダーで適切に読み取られますか? それとも単に背景画像を無視しますか?

<body>スクリーン リーダーは、<div>、 などに背景画像が添付されていることを通知しません。altこの場合、属性のための魔法の場所はありません。画像とテキストの色の間に適切なコントラストを維持していることを覚えておく必要があります。私の意見では、WebAIM には優れたカラー コントラスト チェッカーがあります。

背景として使用される画像の上にテキストを配置するために CSS を使用している場合、その画像に を付けることができますがalt、そうしないでください。<img src="..." alt=""/>とにかく、その画像にはおそらく null alt ( ) が必要です。

于 2013-03-06T13:50:54.790 に答える
2

画像を背景と画像の両方として使用する場合 (つまり、同じ画像を 2 回使用する場合)、画像が適切にキャッシュされていると仮定すると、技術的にはその画像を 1 回だけ読み込む必要があります。またはその画像がダウンロードされている場合、ブラウザはキャッシュから画像をロードするか、その 1 つの画像のロードが完了するまで待機します。

背景画像と埋め込み画像の読み込みにほぼ同じ時間がかかるかどうかについて。コンテキストを取得しましょう。Google によると: https://developers.google.com/speed/articles/browser-paint-events

最後に、各画像自体が段階的にレンダリングされることに注意してください。これにより、ユーザーは、画像全体の読み込みが完了する前に画像コンテンツを見始めるようになります。最新のブラウザーは、HTML タグ内の画像を段階的にレンダリングします。対照的に、多くのブラウザーは、CSS の background-image 属性を使用して指定された画像をプログレッシブにレンダリングしません。イメージのプログレッシブ レンダリングを有効にするには、CSS の background-image 属性の代わりに HTML タグを使用します。

そのため、<img> タグを使用した画像は読み込みが速くなり、DOM の準備が整うのを遅らせることはありません。

ただし、<img> のプログレッシブ レンダリングに関する注意点は、widow.onload イベントが発生したときにイメージが完全にロードされていない場合 (これは、大きなイメージの場合はほとんどの場合に当てはまります)、かなり見苦しいプログレッシブ レンダリングになることです。自動幅や 100% 幅を使用して画像をレスポンシブに設定すると、ペイントのリフローが発生します。

インライン画像をより速く、より良い方法でロードするために、私がしたことは次のとおりです。

最初に、ページの <head> の AND で css 背景としてそれらを非常に早い段階でプリロードします。CSS ファイルまたは本体が解析される前に、CSS イメージの一部またはすべてのプリロードを開始することもできます。

次に、その他の欠点を回避するために、javascript の lazy-load-ish メソッドを使用して、ウィンドウが読み込まれる前にインタラクティブ イベントの画像を非表示にします。

最後に、CSS で呼び出された画像の読み込みが完了したら、画像をフェードインとして表示します。

実際の例はhttp://www.nptr.net/1614で見ることができます。

したがって、埋め込み画像が最適です。ページの読み込みに最適な速度が気になる場合は、特に背景としてすぐに使用する必要がある場合は、頭の css 背景を介して大きな画像を早い段階でプリロードすることを強くお勧めします。

そうしないと、ブラウザが実際にそれらの取得を開始するまで、css ファイルと同期 JavaScript の両方が完全に受信されるまで、ボディ内の画像を待たなければならないからです。通常、100 ～ 500 ミリ秒の遅延が発生し、最初のページの読み込みで最悪の遅延が発生します。

于 2013-04-19T07:49:52.180 に答える