Menu
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.
I made 3 tests and check only the load speed.
<canvas> <img> background-image The <img> tag is the fastest.
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?
821
It is widely known that using the image tag is better SEO practice than using background images because of the screen reader implications.
#The difference between HTML images <img> and CSS background images. The HTML <img> element is for images that are part of the content, while CSS background images are purely decorative.
1. CONTENT : Use an <img> tag if it is content related and not just being used as a design element, while backgroung image has nothing to do with the content and is purely a design element.
Background on a div is for decorative purposes. If the image itself is the content, use an img tag.
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?
118
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
