0

There are two img tags in my aspx page as shown below.

<img src="../Images/icon1.png" class="img-style" alt="Icon" />
<img src="../Images/icon1.png" class="img-style" alt="Icon" />

Both img tags are using the same css class and same image as the src attribute.

There came an argument like "Removing the src attribute of each img tags and adding the same image as the background-image in the CSS class is better and performance efficient".

I need an expert opinion regarding the above statement with the correct reason. If I remove the src attribute and add the image as background-image in the "img-style" css class, how it helps to improve performance?

Please help. Thanks.

Vishnu Y
  • 2,211
  • 4
  • 25
  • 38
  • See this thread: Covers in good detail http://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image – Jesse C Jul 18 '14 at 12:07
  • This question has been asked before [previous question](http://stackoverflow.com/questions/17288500/img-vs-background-image-css-in-performance) – JRulle Jul 18 '14 at 12:08
  • Note that the OP is also asking if is it better form to apply the image as a style rather than defining a `src`: `` My answer: It is not. – Mister Epic Jul 18 '14 at 12:11
  • All discussions were about img tag vs css background-image. My QN is specific to : IMG tag's src or background-image?? Which is performance wise good? – Vishnu Y Jul 18 '14 at 12:16
  • @JRulle Please read the question before making your comment. I dont need the difference between img and background-image. I need to know if there is any performance difference between img's "SRC" and css background-image. – Vishnu Y Jul 18 '14 at 12:50
  • @VishnuY that link **DOES** discuss performance (not the difference between them) and has a list of references for further info on the topic. The OP's question can be answered by a bit of googling or searching on stack overflow. – JRulle Jul 18 '14 at 12:55
  • For stuff like these, Open up a chrome browser, select developer tools, then Network and see how long its takes for the image to be loaded and rendered. Test remotely too on some elses computer. That's the only way to know for sure. some browsers are faster at rendering stuff others at loading stuff into the DOM etc. You might have a bottleneck somewhere else in your pages so monitoring whats goes on with browser is key to performance tuning. all browsers have these tools. – Tasos Jul 19 '14 at 06:23

1 Answers1

0

Got a prompt reply from : http://forums.asp.net/post/5739756.aspx Thanks to AidyF.

Vishnu Y
  • 2,211
  • 4
  • 25
  • 38