<Img /> VS Background-Image (Css) in Performance

When to use IMG vs. CSS background-image?

Proper uses of IMG

1. Use IMG if you intend to have
   people print your page and you want the image to be included by default.
   —JayTee
2. Use IMG (with alt text) when the image has an important semantic meaning, such as a warning icon. This ensures that the meaning of the image can be communicated in all user-agents, including screen readers.

Pragmatic uses of IMG

1. Use IMG plus alt attribute if the image
   is part of the content such as a logo or diagram or person (real person, not stock photo people).
   —sanchothefat
2. Use IMG if you rely on browser scaling to render an image in proportion to text size.
3. Use IMG
   for multiple overlay images in IE6.
4. Use IMG with a z-index in order
   to stretch a background image to fill its entire window.
   Note, this is no longer true with CSS3 background-size; see #6 below.
5. Using img instead of background-image can dramatically improve performance of animations over a background.

When to use CSS background-image

1. Use CSS background images if the
   image is not part of the content.
   —sanchothefat
2. Use CSS background images when
   doing image-replacement of text eg. paragraphs/headers.
   —sanchothefat
3. Use background-image if you intend to have
   people print your page and you do not want the image to be included by default.
   —JayTee
4. Use background-image if you need to improve download times, as
   with CSS sprites.
5. Use background-image if you need for only a portion of the image to be visible, as with CSS sprites.
6. Use background-image with background-size:cover in order to stretch a background image to fill its entire window.

Difference in performance between img tag elements vs divs with background images?

AFAIK, browsers cache images the same whether they're in a DIV or an IMG. In any case, I think this one of those cases where specific performance is defined as an implementation detail internal to each rendering engine (and possibly the browsers built around them). As such, it's both out of our control as designers/developers and subject to change from browser to browser and version to version. In other words, I wouldn't spend too much time worrying about it.

Do I use img , object , or embed for SVG files?

I can recommend the SVG Primer (published by the W3C), which covers this topic: http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML

If you use <object> then you get raster fallback for free*:

<object data="your.svg" type="image/svg+xml">
  <img src="yourfallback.jpg" />
</object>

*) Well, not quite for free, because some browsers download both resources, see Larry's suggestion below for how to get around that.

2014 update:

• If you want a non-interactive svg, use <img> with script fallbacks
  to png version (for older IE and android < 3). One clean and simple
  way to do that:

  <img src="your.svg" onerror="this.src='your.png'">.

  This will behave much like a GIF image, and if your browser supports declarative animations (SMIL) then those will play.

• If you want an interactive svg, use either <iframe> or <object>.

• If you need to provide older browsers the ability to use an svg plugin, then use <embed>.

• For svg in css background-image and similar properties, modernizr is one choice for switching to fallback images, another is depending on multiple backgrounds to do it automatically:

  div {
      background-image: url(fallback.png);
      background-image: url(your.svg), none;
  }
  

  Note: the multiple backgrounds strategy doesn't work on Android 2.3 because it supports multiple backgrounds but not svg.

An additional good read is this blogpost on svg fallbacks.

Better performance for background images

For a css/background-image Have you looked at the image-set property in css? It's the css equivalent to the html img elements srcset. The downside may be browser compatibility (however for mobile you should be covered http://caniuse.com/#feat=css-image-set) and whether the expanded syntax has been added to those browsers yet.

example usage:

background-image: -webkit-image-set(url('my-img-1x.jpg') 1x, url('my-img-2x.jpg') 2x);

However, If you can use actual img elements in your HTML srcset itself now has pretty good browser support and expanded syntax to allow changing images at different screen-size breakpoints http://caniuse.com/#search=srcset

srcset example usage:

<img src="my-img-1x.jpg" srcset="my-img-1x.jpg 1x, my-img-2x.jpg  2x, my-img-wide.jpg  1920w" />

Looking forward the <picture> element is also starting to gain browser support, however probably a bit far away from mainstream adoption to use now.

Does display:none prevent an image from loading?

Browsers are getting smarter. Today your browser (depending on the version) might skip the image loading if it can determine it's not useful.

The image has a display:none style but its size may be read by the script.
Chrome v68.0 does not load images if the parent is hidden.

You may check it there : http://jsfiddle.net/tnk3j08s/

You could also have checked it by looking at the "network" tab of your browser's developer tools.

Note that if the browser is on a small CPU computer, not having to render the image (and layout the page) will make the whole rendering operation faster but I doubt this is something that really makes sense today.

If you want to prevent the image from loading you may simply not add the IMG element to your document (or set the IMG src attribute to "data:" or "about:blank").

---

Related Topics