The difference between HTML image and CSS background-image?

Link to the lesson:

When including a picture in a website, how can you decide if it is a better idea to add an img element in html or a background-img property in CSS?

Both seem to be possible, and I would like to know if there are clear differences.


From reading the MDN docs on <img> and background-image, I would say that the biggest difference is the clarity for you, the developer.
Most likely it is easier to use the CSS property.

1 Like

Background images are generally not associated directly, or even indirectly with the page content, as in skin graphics, eye candy and window dressing. These are best kept in the CSS and that folder blocked from robots. I use a skin folder in my css folder. This keeps the images from being indexed.

<img> is something we relate directly or indirectly to our page content. With sufficient markup and adjacent content the search engines can make indexing decisions. If you don’t want your images indexed, then don’t use the IMG element, or add a nofollow, noindex directive in the meta data of the page.

In terms of page load time, the CSS images will come in first, followed by the IMGs. Unlike script though, it should all be asynchronous and not interrupt image downloads to the page. We can speed it up even more by hosting the page images on another platform (a CDN) and only host CSS images on site. This permits multiple servers and thus more asynchronous ports. Browsers are usually limited to two ports on a single host server at any one time, but does not limit multiple servers with each having two open ports.

We should not need to go into how important it is to have optimized images, at least for the page load, and make the high quality images available for the user if needs be through another page or interstitial upon a click from the user. The same rule applies to skin graphics. Make them as optimized as humanly possible. Avoid making the browser scale images for you. That is an expensive process, as is having to calculate the dimensions needed in the page when we leave off the all important width and height attributes. CSS can be used for this purpose, too if we want the images to change size for different viewports.


Off topic, sort of.

When we wish to share a high quality image online, then it follows we will give the best resolution available. From the old school stance mentioned above, ‘an interstitial’, one can see how technology has advanced enough to give us progressive high quality images which usually involves a blurred image, then a less blurred image, then an idea of the image, then some fuzziness with better quality and on to the final high quality.

That’s okay for Youtube or NHL pages you’re not likely to bounce from right away. Do we risk this on our home page? No answer needed.

To get around this we can load an optimized representation of the image that is the correct dimensions. Then we can asynchronously set a timeout on this element and allow the second or two for the higher quality image to download, then render it, bypassing the progressive load-and-show. It’s a thought.

1 Like