Q:

Rails: Is it better to display images with image_tag or css background image?

I have an image that I need to display prominently/immediately on our index page. I was wondering whether it would be better to use Rails' image_tag() helper, or use CSS's background image property to render the image quickly. Or does it even matter?

A:

If you reference an image in the html of the page, the page has to be parsed and the image downloaded.
If you reference an image in an external stylesheet, the page has to be parsed, then the CSS has to be downloaded and parsed, then the image needs to be downloaded.  This will be slower due to the number of round trips to the server to get the image.
If your CSS is inline, then you're back to parsing the first page, then downloading the image.
An interesting option, for the ultimate performance, if your image isn't too big, is to inline your CSS in the page, and then embed the image directly into the CSS, avoiding any downloads after the initial one for the page HTML. e.g.
<head>
  <style>
    #foo { background-image: url(data:image/png;base64,iVBORw0K...) 
  </style>
</head>
<body>
  <div id="foo"></div>
</body>

Rails (actually SASS) has helpers to inline asset data into CSS files (search for asset-data-url).  I've never used it to then inline that CSS into HTML, but this is at least possible.

