8 ms·

I've been waiting for this for 9 years :-) A nice feature of APNG (and GIF) versus the more modern CSS/SVG animations is the CPU efficiency. It's really easy t

I've been waiting for this for 9 years :-) A nice feature of APNG (and GIF) versus the more modern CSS/SVG animations is the CPU efficiency. It's really easy to accidentally waste a ton of battery life by adding a tiny spinning gear to a page. It varies depending on the browser and whether the GPU is used for compositing, but it's much easier to optimize blitting a rectangle each frame versus blitting a rotation of some complex vector shape on top of the page.

erikpukinskis 10y ago
This is true, if you animate CSS properties that trigger reflows you can seriously harm battery usage. I try to stick to only animating the transform property, which should perform better than a raster format, since it doesn't require any new data per frame
- scarlac 10y ago
  I had the same approach as this. But not all animations can be made using the transform property, and even if you avoid reflows you can still have a lot of CPU usage with simple animations. In our case, we were moving a gradient inside a div. You wouldn't think this uses a lot of CPU, but if you have enough of them, it becomes a problem - there is apparently a lot of CPU processing involved in re-rendering regardless of reflow. Using the translateZ(0) trick did not eliminate the issue.
  - erikpukinskis 10y ago
    In my experience, you really need to work with designers who are willing to consider the technical impacts of design choices within the browser. You need to be able to say, this animation style causes strangeness and performance impacts... are their other designs that don't have the same technical needs and still achieve our product goals? The coder needs to be willing to understand the design constraints and the designer needs to be willing to understand the code constraints and both people need to take joy in finding solutions that tick every box. If you have a "throw the designs over the wall" workflow, CSS will never work, you have to go to iOS or Unity or something like that where you have minute control over every detail. On some level, this becomes an identity issue... are you Mercedes, or Apple, who will marshal incredible resources to control every detail of a production, or are you a Craigslist, or Bikini Kill, who will sacrifice any and every technical consideration to maintain laser focus on a singular goal. Put another way, are you the conqueror who flattens an entire ecosystem to build your perfect palace, or a craftsperson who takes a small amount of material each day, and makes something beautiful within the constraints?
nwah1 10y ago
Doesn't this just mean that SVG implementations are poorly optimized, and don't make proper use of the GPU?
- scythe 10y ago
  SVG is much more powerful than APNG and optimizing SVG for cases already handled by APNG is probably not a priority.
- alwillis 10y ago
  Updated graphics benchmarks, including SVG: http://browserbench.org/MotionMark/about.html http://browserbench.org/MotionMark/about.html
- alwillis 10y ago
  Updated graphics benchmarks, including SVG: http://browserbench.org/MotionMark/about.html http://browserbench.org/MotionMark/about.html
jacobolus 10y ago
Animated GIFs often burn huge amounts of CPU on my machine. A page full of GIFs can bring a modern computer to its knees. (This is one reason many image sharing sites convert uploated GIFs to proper video files, mp4 or webm or whatever.) I’ve never quite understood why implementations of GIF viewers in web browsers were so bad. In many cases it seems like they could cache every frame in GPU memory somewhere and very cheaply loop them. Caveat: I haven’t studied this in any detail, and am not an expert on image/video formats.
- Keverw 10y ago
  I've noticed that gifs are made into videos too. I wonder if apng's will be efficient. I would think a small animated image like a .gif would be more optimized than a full on video file but I guess not.
  - ehsankia 10y ago
    Once you understand how videos are encoded, it's pretty obvious why gif (and apng) are not and will never be as small as videos. Videos use temporal data. You have one key frame (where the whole image is stored) and the following frames are encoded as delta (difference) from the previous frame. So a still video could basically be the size of a single image. Animated images aren't that smart, they're just a bunch of images, so you're storing every single frame.
    - tyingq 10y ago
      It's not quite that stark. You can have the non changing background solely in the first frame, and have subsequent frames (smaller frames even, placed at offsets) composed solely of "sprite like" things that overlay. And there are tools like imagemagick that can optimize existing animated gifs in that way. It is crude, but it's more than just a plain sequence of unrelated full size frames .
    - dlubarov 10y ago
      > Animated images aren't that smart, they're just a bunch of images, so you're storing every single frame. GIF89a has a sort of limited delta encoding via the "do not dispose" option. If you write a frame with "do not dispose" and then write a frame with some transparent pixels, the transparent pixels will retain the colors from the previous frame. It's rather primitive but it's better than nothing.

erikpukinskis 10y ago

This is true, if you animate CSS properties that trigger reflows you can seriously harm battery usage. I try to stick to only animating the transform property, which should perform better than a raster format, since it doesn't require any new data per frame

scarlac 10y ago
I had the same approach as this. But not all animations can be made using the transform property, and even if you avoid reflows you can still have a lot of CPU usage with simple animations. In our case, we were moving a gradient inside a div. You wouldn't think this uses a lot of CPU, but if you have enough of them, it becomes a problem - there is apparently a lot of CPU processing involved in re-rendering regardless of reflow. Using the translateZ(0) trick did not eliminate the issue.
- erikpukinskis 10y ago
  In my experience, you really need to work with designers who are willing to consider the technical impacts of design choices within the browser. You need to be able to say, this animation style causes strangeness and performance impacts... are their other designs that don't have the same technical needs and still achieve our product goals? The coder needs to be willing to understand the design constraints and the designer needs to be willing to understand the code constraints and both people need to take joy in finding solutions that tick every box. If you have a "throw the designs over the wall" workflow, CSS will never work, you have to go to iOS or Unity or something like that where you have minute control over every detail. On some level, this becomes an identity issue... are you Mercedes, or Apple, who will marshal incredible resources to control every detail of a production, or are you a Craigslist, or Bikini Kill, who will sacrifice any and every technical consideration to maintain laser focus on a singular goal. Put another way, are you the conqueror who flattens an entire ecosystem to build your perfect palace, or a craftsperson who takes a small amount of material each day, and makes something beautiful within the constraints?

nwah1 10y ago

Doesn't this just mean that SVG implementations are poorly optimized, and don't make proper use of the GPU?

scythe 10y ago
SVG is much more powerful than APNG and optimizing SVG for cases already handled by APNG is probably not a priority.
alwillis 10y ago
Updated graphics benchmarks, including SVG: http://browserbench.org/MotionMark/about.html http://browserbench.org/MotionMark/about.html
alwillis 10y ago
Updated graphics benchmarks, including SVG: http://browserbench.org/MotionMark/about.html http://browserbench.org/MotionMark/about.html

jacobolus 10y ago

Animated GIFs often burn huge amounts of CPU on my machine. A page full of GIFs can bring a modern computer to its knees. (This is one reason many image sharing sites convert uploated GIFs to proper video files, mp4 or webm or whatever.) I’ve never quite understood why implementations of GIF viewers in web browsers were so bad. In many cases it seems like they could cache every frame in GPU memory somewhere and very cheaply loop them. Caveat: I haven’t studied this in any detail, and am not an expert on image/video formats.

Keverw 10y ago
I've noticed that gifs are made into videos too. I wonder if apng's will be efficient. I would think a small animated image like a .gif would be more optimized than a full on video file but I guess not.
- ehsankia 10y ago
  Once you understand how videos are encoded, it's pretty obvious why gif (and apng) are not and will never be as small as videos. Videos use temporal data. You have one key frame (where the whole image is stored) and the following frames are encoded as delta (difference) from the previous frame. So a still video could basically be the size of a single image. Animated images aren't that smart, they're just a bunch of images, so you're storing every single frame.
  - tyingq 10y ago
    It's not quite that stark. You can have the non changing background solely in the first frame, and have subsequent frames (smaller frames even, placed at offsets) composed solely of "sprite like" things that overlay. And there are tools like imagemagick that can optimize existing animated gifs in that way. It is crude, but it's more than just a plain sequence of unrelated full size frames .
  - dlubarov 10y ago
    > Animated images aren't that smart, they're just a bunch of images, so you're storing every single frame. GIF89a has a sort of limited delta encoding via the "do not dispose" option. If you write a frame with "do not dispose" and then write a frame with some transparent pixels, the transparent pixels will retain the colors from the previous frame. It's rather primitive but it's better than nothing.