13

What I want

Currently I have a png image of 4000x4000. After using tinypng.org it became just a 288KB file.

Now I want the fastes way to load the image, place it in the DOM and be able to draw a lot of canvas' on it.

I tested some and the results stunned me.

What I tested

I made 3 tests and check only the load speed.

  • (423ms) <canvas>
  • (138ms) <img>
  • (501ms) CSS background-image

The <img> tag is the fastest.

Question

So, is it bad-practice to use the <img> tag to display a huge (background) image and use some dirty CSS to be able to draw canvas on it?

Or is it better to use canvas in my case and don't worry about the longer load time?

Ron van der Heijden
  • 13,198
  • 7
  • 52
  • 79
  • I'm shocked. They are using the same download method, aren't they? Maybe the difference in time is due to client-side processing? How did you measure this? – freakish Feb 21 '13 at 09:41
  • Tested using [google pagespeed](https://developers.google.com/speed/pagespeed/) and [firebug net](http://getfirebug.com/wiki/index.php/Net_Panel) – Ron van der Heijden Feb 21 '13 at 09:58

2 Answers2

5

Great question! This is related: When to use IMG vs. CSS background-image?

From that article, if people are intended to print your page you wouldn't use <img> - as this would appear on the print. The same would apply to <canvas>, making background-image the logical solution.

How is your background image added through CSS? Is it inline or through its own stylesheet? If it's using its own stylesheet, have you tried compressing the CSS before testing the speed?

This is also related, I suppose: Do Images Load Faster in HTML or CSS?

Community
  • 1
  • 1
James Donnelly
  • 117,312
  • 30
  • 193
  • 198
0

I would think of looking from a semantic perspective at your situation: What do you want to display? Is it an image on top of which you want to draw something? Is it a background image of a game board?

IMHO: 500 ms in case of CSS background is not that slow, it always takes a couple of seconds to load a website. If you care about the loading speed of the image, use <img>, but HTMLing could be a bit more difficult because you have to fiddle around with z-index and position.

I would take the CSS background.

Joshua
  • 2,624
  • 2
  • 23
  • 39