html - Which way to load a huge image (canvas vs img vs background-image)? -

html - Which way to load a huge image (canvas vs img vs background-image)? -

what want

currently have png image of 4000x4000. after using tinypng.org became 288kb file.

now want fastes way load image, place in dom , able draw lot of canvas' on it.

i tested , results stunned me.

what tested

i made 3 tests , check load speed.

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

the <img> tag fastest.

question

so, bad-practice utilize <img> tag display huge (background) image , utilize dirty css able draw canvas on it?

or improve utilize canvas in case , don't worry longer load time?

great question! related: when utilize img vs. css background-image?

from article, if people intended print page wouldn't utilize <img> - appear on print. same apply <canvas>, making background-image logical solution.

how background image added through css? inline or through own stylesheet? if it's using own stylesheet, have tried compressing css before testing speed?

this related, suppose: do images load faster in html or css?

html css html5 canvas image