42

I am building a site that is using a scrolling plugin that basically animates the scrolling. I am quite concern about performance as if I insert some images in the site, it looks quite choppy when scrolling/animating.

The main problem I can detect with images is the reflow/repaint issue, when the image doesn't have the correct dimensions and therefore is scaled (I have to deal with this, I know about the best practice).

With this statement in mind (images will be scaled). What should be better, image element or divs with those images as backgrounds as for performance?

I made this jsFiddles that in my chrome browser memory tool, show that the back-ground image option uses less memory.

<img />: http://jsfiddle.net/ek6Xn/

<img src="..." />

background-image: http://jsfiddle.net/ek6Xn/1/

<div></div>

div {
    background:url(...);
    background-size:100% 100%;
}

References:

  1. Difference in performance between img tag elements vs divs with background images?
  2. When to use IMG vs. CSS background-image?
  3. http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/
  4. http://updates.html5rocks.com/2013/02/Profiling-Long-Paint-Times-with-DevTools-Continuous-Painting-Mode
Cœur
  • 37,241
  • 25
  • 195
  • 267
Alvaro
  • 9,247
  • 8
  • 49
  • 76
  • Also, search engines and social media embedding systems do not like css background images. – leonard vertighel Jun 25 '13 at 03:37
  • Could you please explain why? – Alvaro Jun 25 '13 at 03:51
  • They simply do not cache them or, in the case of facebook embedding, it is not considered as thumb image while sharing. – leonard vertighel Jun 25 '13 at 05:34
  • 1
    possible duplicate of [Difference in performance between img tag elements vs divs with background images?](http://stackoverflow.com/questions/3711932/difference-in-performance-between-img-tag-elements-vs-divs-with-background-image) – Jukka K. Korpela Jun 25 '13 at 08:25
  • 2
    Please contribute to improving answers to an existing question instead of intentionally posting a duplicate. If you wish to ask a much more focused question, use a title and a problem formulation that express this. – Jukka K. Korpela Jun 25 '13 at 08:28

4 Answers4

21

Personally I would forget about performance in this instance and focus on what the image is:

1) Image = content

2) Background Image = design

The way I tend to think about this is, do I want the image to appear on all screen sizes, on all devices, with CSS turned either on or off? Do I want the image to be "indexed" by Google and Facebook. If the answer is yes to all or any of these questions, then usually the image is "content" and you should use an IMG tag.

If you want a different image to display at different screen sizes (or no image at all on certain devices), or if you're happy for the image to not appear on a print out, or you're happy for the image to not appear if CSS is turned off, then usually the image is "design" and you should use a background image.

MrCarrot
  • 2,546
  • 1
  • 23
  • 29
  • 3
    Awesome, succinct summary of the situation. Very helpful in clearing up when to use which one. – CodeFinity Dec 11 '13 at 20:38
  • 67
    sorry, but hardly agreeable. the question is focused on performance, and the 1)2) response is completely unrelated in this scope. 2nd - css turned off? really? in 2015, in rich web app we really consider this option? sorry, but this seems completely irrelevant to the question. – Sergey Sob Feb 05 '15 at 10:03
  • The answer was posted in 2013 but the same thing applies now - CSS is for design/layout not for content. Go ahead and serve content using CSS on the basis nobody will turn it off - that doesn't make it the correct thing to do – MrCarrot Feb 19 '15 at 13:51
  • 7
    agree with sergey, came here to find out performance difference between background vs image, as in 'what will compute faster/use less resources'. What to use when is completely irrelevant and answered far better in reference 2 of the question – Douwe Oct 22 '15 at 21:17
  • 1
    I think it's a matter of design vs. content. – basickarl Nov 08 '15 at 20:03
  • Programming for the web under the assumption that CSS might be off is like programming an app for a phone under the assumption that the user might run your app without a LCD screen. – quemeful Mar 17 '18 at 23:38
  • 1
    It is important to differentiate between content and design - not because CSS can be toggled off - but for accessibility. A browser might show the page in a 'reader' modus, or accessibility aids might need to know what is important on the screen. – Simon Backx Feb 15 '20 at 10:03
2

If you use <img> or <svg> tag it will become part of the DOM, with all it's benefits and drawbacks (it will cost you some extra memory and speed).

I'd definitely advise using CSS background, especially when the same element/picture is repeated multiple times (table with icons etc.).

xpuu
  • 1,514
  • 13
  • 13
2

From a performance standpoint, loading a bunch of large images as CSS backgrounds will slow down the entire site because the CSS will take longer to parse.

However, with HTML img tags, CSS can be parsed quicker and each separate image request would be made independently as the HTML is parsed.

With the CSS method, you're waiting for all of the CSS containing image requests to finish parsing. With the HTML method you'll begin to see the content sooner and separately from the top down rather than waiting for it all to be ready at once.

This is how I understand it. Please correct me with a comment if I am wrong.

Toma Nistor
  • 786
  • 10
  • 18
-4

Hope it will be help for everyone!.

  1. This is better to use tag for you.

I think that, to animate image is to animate the content(image) from browser DOM. You should be think about roading times(CSS and Js file).

And then there are many reasons. I mean alt property and size, performance.

thanks

Josef Anderson
  • 1
  • 1