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?