I do not know where the sprite sheet came from, but for the first time I heard about them when I became interested in games. In games with them, everything is simple, there is a big picture of the sprite list, there is a small picture that you create manually and copy into it the necessary part of the big one.
But if you believe the information from that obtained from Google, then if I have a sprite list with a thousand frames, then by displaying them using background-image + background-position I will create the original image (sprite sheet) a thousand times.

Am i right

  • So it will be loaded once, then it will be taken from the cache. - Duck Learns to Take Cover
  • ru_volt: but if the sprite consists of 100 frames and weighs 1MB, then it will memory 100MB of memory ... This is crazy. It turns out that the use of sprites in the web is similar to that pitiful sight when a little girl makes crooked lips with her mother's lipstick and puts her shoes on three legs more than her ... - vas
  • one
    But if you believe the information obtained from Google - attach a reference to what was found, there are regular cases when the findings are misinterpreted. - D-side
  • 3
    @vas if there are many, attach any of the examples will not be a problem, and now you are an independent distributor of dubious rumors without specifying their source. - D-side
  • one
    I do not understand about the increase and color change. Where is it and what's the sprite? - Qwertiy ♦

1 answer 1

You proceed from the assumption that using a sprite somewhere on the page actually requires a copy of the sprite piece in memory. This is not quite true.

How drawing works (at least in Windows, on fingers):

  • Under the program window (browser), a large rectangle is allocated in the video card's memory.
  • For some events, a part of this rectangle is marked as “to be redrawn” —for example
    • over the program window someone stretched out another window
    • the program was expanded or turned off
    • the program code itself decided that some part of the window was outdated and had to be redrawn - for example, the DOM changed in the case of the browser
  • This raises a window redraw event (or part of it).
  • The redraw handler decides what the redrawed part looks like, and re-renders it into a rectangle in the video card's memory.

How does the browser handle sprites?

If at the moment of redrawing the element using the sprite got into the area being redrawn - the necessary piece of the sprite is copied into the same rectangle in the video memory. When drawing it rotates / scales / trimmed to the size of the element being redrawn.

A copy of the sprite is not created (or is created temporarily) - a straight-edge is already selected for a long time, and it no longer draws the drawing of the sprite. Those. The moment to "create a picture" from the sprite, which you are so afraid of, does not come - just a piece of the sprite is copied into the already allocated buffer in memory.

  • I can say the following - you have just described working with gpu, but css is cpu. That's why I can't argue with you .. Based on your words, all calculations are done in gpu and everything is raster. But damn, what if vector sprite is svg? The vector in the video card is not true ..? - vas
  • 6
    @vas I described the rendering mechanism. I do not see where I mentioned that it should occur at the GPU level. Or that "everything is raster." I wrote that everything turns into a raster in the process of drawing . If the sprite is a vector svg, then when drawing it will still become a piece of raster image in the video memory. Text HTML - and that turns into a raster of video memory - and using the same rendering mechanism. For the simple reason that turning something into a raster in video memory is the only way to show something on the screen. - PashaPash ♦
  • @vas is specifically your example with "rotate and draw" - in GDI this is done by invoking TranslateTransform + RotateTransform + DrawImage. At the same time, the rotated and shifted image is drawn immediately, and the original remains unchanged. - PashaPash ♦
  • one
    @vas, but the canvas is not a background. - Qwertiy ♦
  • 2
    @vas naturally does not copy. The div is just a piece of DOM. Canvas allows you to draw on yourself, and the memory he eats just under the storage drawn. Those. at the moment of rendering, the contents of the canvas - the image - is copied to the video memory. And the div on itself does not allow to draw. At the time of rendering, it simply draws its contents (text, nested elements, frames ) directly into the video buffer. Those. maybe the browser and caches the result of the last rendering of the div, in case it has not changed (more precisely, 100% caches), but it does so only for the displayed elements. And not at all for all the elements in the tree. - PashaPash ♦