Canvas and DOM - What is the most efficient way to display images in HTML5?

Stackoverflow users

When creating an html5 application / website for situations such as an image gallery where a large number of images are displayed sequentially or at the same time in the browser, is the use of a canvas element used?

While we are only talking about the representation of the image, does it make sense to use a canvas and draw an image on it instead of using the DOM <img> tag element? There will also be some manipulations with images, such as CSS3 transforms / moving / scaling / zooming and gesture recognition (drag and drop, touch / tap, possibly a pinch, etc.), which, as far as I know, apply to canvas as well and to img tags.

It would also be important to keep as much "html5" as possible, as well as consider performance. For example, it would be important if in the future the canvas element will be increasingly used and optimized by browsers, and this also matters if, for now, <img> is much faster.

Since we are considering developing a universal html5 application running on desktop computers as well as on mobile devices, performance and speed are a very important factor. However, tests comparing the canvas and <img> were intended for most browsers in javascript format. In this case, animation is not as important as memory consumption and overall performance.

Are there any resources / studies on this particular aspect?

+6
source share
1 answer
UseCanvas = NeedCanvas ? true : false 

You really do not need a canvas for this operation, and development with a canvas will take longer because it is much more complicated.

Using <img> tags with javascript will not only increase compatibility, but also speed and accessibility - absolutely everything can launch CSS and Javascript using a browser. Also, SEO factors, too, I'm sure images in the canvas will not be indexed.

Do not use HTML5 technology to use HTML5 technology. When you want to start warping images and drawing them by the user so that you can export / save where you need the canvas.

+1
source

Source: https://habr.com/ru/post/917640/


All Articles