css - Rails：image_tagまたはcssの背景画像を使用して画像を表示する方が良いですか？

Question

インデックスページに目立つように/すぐに表示する必要のある画像があります。Railsのimage_tag（）ヘルパーを使用するのが良いのか、それともCSSの背景画像プロパティを使用して画像をすばやくレンダリングするのが良いのか疑問に思いました。それとも重要ですか？

score 3 · Accepted Answer

ページのhtmlで画像を参照する場合は、ページを解析して画像をダウンロードする必要があります。

外部スタイルシートで画像を参照する場合は、ページを解析してから、CSSをダウンロードして解析してから、画像をダウンロードする必要があります。これは、画像を取得するためのサーバーへのラウンドトリップの数のために遅くなります。

CSSがインラインの場合は、最初のページの解析に戻り、画像をダウンロードします。

画像が大きすぎない場合の究極のパフォーマンスのための興味深いオプションは、ページにCSSをインライン化してから、画像をCSSに直接埋め込み、ページHTMLの最初のダウンロード以降のダウンロードを回避することです。例えば

<head>
  <style>
    #foo { background-image: url(data:image/png;base64,iVBORw0K...) 
  </style>
</head>
<body>
  <div id="foo"></div>
</body>

Rails（実際にはSASS）には、アセットデータをCSSファイルにインライン化するヘルパーがあります（asset-data-urlを検索します）。そのCSSをHTMLにインライン化するためにそれを使用したことはありませんが、少なくともこれは可能です。

score 1 · Accepted Answer

画像がコンテンツと見なされる場合は、適切な代替テキストを含む画像タグとしてレンダリングする必要があります。装飾の場合は背景画像になります。

score 1 · Accepted Answer

Railsにとって、それは問題ではありません。選択する内容は、その画像がどの程度正確に表示されるかに基づいて決定されます。テキストの後ろ？ヘッダー画像として？image_tagこれで、またはCSSの使用方法がわかります。

3 に答える 3