6 ms·

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

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.
    - ehsankia 10y ago
      Are there tools that take existing normal gifs and convert it to make use of that? Because manually creating such gifs are generally a huge pain.
      - dlubarov 10y ago
        I think most GIF optimizers would do it, although I haven't tried any. E.g. https://ezgif.com/optimize https://ezgif.com/optimize says they do it ("makes unchanged parts of the following frames transparent").
      - versteegen 10y ago
        Use gifsicle. It's excellent and very fast, I don't think there's anything that produces smaller gifs than it. [0] You can also use ImageMagick to produce optimised gifs (it has about 4 different options for that, eg -layers OptimizeTransparency). See [1]. But in my own tests, gifsicle always beats it (often by a huge margin) and is vastly faster. That ImageMagick page may be out of date. Also, Tumblr contracted the author of gifsicle, Dr. Eddie Kohler, to make some improvement for them, hopefully that made it back into gifsicle [2]. [0] https://www.lcdf.org/gifsicle/ https://www.lcdf.org/gifsicle/ [1] http://www.imagemagick.org/Usage/anim_opt/#compress_opt http://www.imagemagick.org/Usage/anim_opt/#compress_opt [2] https://engineering.tumblr.com/post/80003435120/who-doesnt-love-animated-gifs-believe-it-or https://engineering.tumblr.com/post/80003435120/who-doesnt-l...
  - ardaozkal 10y ago
    Disagreed, BPG (better portable graphics) is based on H265, but aimed at animated/nonanimated pictures. From my tests it runs really well.
    - DaiPlusPlus 10y ago
      If you have a hardware H.265 decoder, sure - I'd wager a GIF or APNG runs better in single-thread, CPU-only environments.
      - ardaozkal 10y ago
        Kind of an old reply, but I should honestly test that- encoding on a CPU only environment compared to one with a GPU with specialized support takes around 4-5x more, but I didn't test decoding yet on a CPU only environment yet.
futurix 10y ago
Structure of animated GIFs is odd - you pretty much have to read entire file to animate it correctly; hence the inefficiencies.
- zulln 10y ago
  That is true, but after being rendered once it could be cached locally in some other way if that is believed lead to better performance.
- mnutt 10y ago
  Why do you say that? All of the metadata is at the beginning, followed by sequential frames.
  - futurix 10y ago
    The frame data is incomplete with no keyframes - if you want to do a fairly typical memory conservation technique where after user switched away from the browser tab, you pause a GIF, unload it from memory, and then need to reload it from the same frame when user switched back - you will need to replay entire GIF to that frame.
xenadu02 10y ago
There is no reason clients can't encode a GIF or APNG to H.264, cache that, then use the hardware video decoder on the GPU to render it. Whether that would be a win for performance or battery life probably depends on the exact hardware and how many of these things are displayed at the same time.
- bgirard 10y ago
  Using the optimized video code paths for GIF was discussed by the Mozilla graphics team several times. Basically the conclusion is that it's a lot of work when there's a perfectly good alternative which is using a video element. Effort that can be better spent elsewhere.
  - husky84 10y ago
    maybe let Mozilla know that it would be very helpful to their non-profit cause if they spent some time in rust making this work better. they spend a lot of time adding new milestones, but this is one which could improve the quality of the web. or they could design an extension which converts gifs to pdfs and we could continue to use their software for what it is: zero day gateway with attached subscribers to a non profit software engine company which spends a bunch of time doing what they feel could make their impact last any longer than it already has at least then the pdf would open in chrome :)
  - untog 10y ago
    That's a shame, because there is a hell of a lot of legacy content out there that's never going to get converted.
- samk117 10y ago
  translucency
michaelbuckbee 10y ago
While the browser vendors haven't done this - some of the image hosting sites (who are far more directly affected) have. Imgur automatically converts larger GIF files to "GIFV" (WebM or MP4). The size difference is nuts: their example is a 50MB gif being reduced to 3.5MB Their announcement post about it: http://blog.imgur.com/2014/10/09/introducing-gifv/ http://blog.imgur.com/2014/10/09/introducing-gifv/
- Ezhik 10y ago
  It's such a mess though. You have gif with all its quality loss (256 colors and etc.), and then to make matters worse it's getting shoved through webm/mp4 encoding. And then there's everyone from Imgur to Twitter missing the point of why gif is even a thing. Because it is simple. Because gif is treated as an image and not a video format. Because you can right click it, and save it for later use. Can't do that with "gifv" (seriously, I had to use curl just to get the video file from Imgur), and definitely can't do that with Twitter. Neither webm nor mp4 can kill gif yet - mp4 is a patent mess, and webm comes closer (4chan for example has a quite big SFW community of people trading videos), but there are issues with Apple refusing to support it, and lack of hardware support.
  - arcameron 10y ago
    With imgur, you can just right-click and hit `Save video as...` in both Chrome/Firefox (even without manually adding their ".gifv" extension) Twitter though, doesn't seem possible
    - Ezhik 10y ago
      Try to save a webm if it serves you an mp4, though. Maybe they changed it lately, but I just could not figure it out - .webm and .mp4 both just silently redirected to .gifv last I tried.
      - Dylan16807 10y ago
        Saving a video off imgur works about half the time in firefox, based on ???. There's a bug for it but it hasn't gotten much attention. It's a problem of imgur playing games with headers, embedding a video inside a web page and using the exact same URL for each. I haven't had any issues in chrome. Twitter's just putting dumb empty divs over the content. And they make it impossible to get the source gif even in cases where the video version is larger and lower quality. Thanks twitter.
scarlac 10y ago
There are certainly many cases where using video instead of GIF makes much more sense. But if you're talking about continuous animation of 10+ elements, then I'm not sure video is a good idea. We recently optimized electricitymap.org to use GIFs instead of CSS/SVG animations, reducing CPU usage between 50-95 percentage points (depending on setup). In our case, we were animating ~70 arrows causing 100% CPU on many machines, including my own beefed up MBPr from late 2013.
- mxfh 10y ago
  Looks great indeed, there is also the option to dynamically render the SVG animation to a sprited or multiple canvas once, and avoid to reevaluate and render the SVG for all instances on every frame.
the8472 10y ago
At least for pixel graphics with transparency converting gif to apng would be a far better choice than gif to h.264 or vp9. The thing is that you want 4:4:4 (no chroma subsampling) + alpha + lossless for pixel graphics. While some video standards support that in theory browsers often don't support those advanced profiles.
- mzs 10y ago
  I was surprised how well ProRes 4444 worked-out in practice for Windows/Mac/other(ffmpeg). The only downside was enormous size. https://en.wikipedia.org/wiki/Apple_ProRes#ProRes_4444_and_ProRes_4444_XQ https://en.wikipedia.org/wiki/Apple_ProRes#ProRes_4444_and_P...
  - the8472 10y ago
    ffmpeg is not the issue here, it supports several 444/alpha/lossless codecs quite well, proes is not special in that regard. Browsers only expose a small subset of codecs that ffmpeg supports. gif and apng are now the most compatible format in browsers for this kind of content.
    - mzs 10y ago
      FourCC of ap4x 'just worked' on IE (I might have installed QuickTime codecs), Safari, and gstreamer with Firefox - it just played in the window (though I did not test alpha channel). I was surprised too ;)

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.
  - ehsankia 10y ago
    Are there tools that take existing normal gifs and convert it to make use of that? Because manually creating such gifs are generally a huge pain.
    - dlubarov 10y ago
      I think most GIF optimizers would do it, although I haven't tried any. E.g. https://ezgif.com/optimize https://ezgif.com/optimize says they do it ("makes unchanged parts of the following frames transparent").
    - versteegen 10y ago
      Use gifsicle. It's excellent and very fast, I don't think there's anything that produces smaller gifs than it. [0] You can also use ImageMagick to produce optimised gifs (it has about 4 different options for that, eg -layers OptimizeTransparency). See [1]. But in my own tests, gifsicle always beats it (often by a huge margin) and is vastly faster. That ImageMagick page may be out of date. Also, Tumblr contracted the author of gifsicle, Dr. Eddie Kohler, to make some improvement for them, hopefully that made it back into gifsicle [2]. [0] https://www.lcdf.org/gifsicle/ https://www.lcdf.org/gifsicle/ [1] http://www.imagemagick.org/Usage/anim_opt/#compress_opt http://www.imagemagick.org/Usage/anim_opt/#compress_opt [2] https://engineering.tumblr.com/post/80003435120/who-doesnt-love-animated-gifs-believe-it-or https://engineering.tumblr.com/post/80003435120/who-doesnt-l...
- ardaozkal 10y ago
  Disagreed, BPG (better portable graphics) is based on H265, but aimed at animated/nonanimated pictures. From my tests it runs really well.
  - DaiPlusPlus 10y ago
    If you have a hardware H.265 decoder, sure - I'd wager a GIF or APNG runs better in single-thread, CPU-only environments.
    - ardaozkal 10y ago
      Kind of an old reply, but I should honestly test that- encoding on a CPU only environment compared to one with a GPU with specialized support takes around 4-5x more, but I didn't test decoding yet on a CPU only environment yet.

futurix 10y ago

Structure of animated GIFs is odd - you pretty much have to read entire file to animate it correctly; hence the inefficiencies.

zulln 10y ago
That is true, but after being rendered once it could be cached locally in some other way if that is believed lead to better performance.
mnutt 10y ago
Why do you say that? All of the metadata is at the beginning, followed by sequential frames.
- futurix 10y ago
  The frame data is incomplete with no keyframes - if you want to do a fairly typical memory conservation technique where after user switched away from the browser tab, you pause a GIF, unload it from memory, and then need to reload it from the same frame when user switched back - you will need to replay entire GIF to that frame.

xenadu02 10y ago

There is no reason clients can't encode a GIF or APNG to H.264, cache that, then use the hardware video decoder on the GPU to render it. Whether that would be a win for performance or battery life probably depends on the exact hardware and how many of these things are displayed at the same time.

bgirard 10y ago
Using the optimized video code paths for GIF was discussed by the Mozilla graphics team several times. Basically the conclusion is that it's a lot of work when there's a perfectly good alternative which is using a video element. Effort that can be better spent elsewhere.
- husky84 10y ago
  maybe let Mozilla know that it would be very helpful to their non-profit cause if they spent some time in rust making this work better. they spend a lot of time adding new milestones, but this is one which could improve the quality of the web. or they could design an extension which converts gifs to pdfs and we could continue to use their software for what it is: zero day gateway with attached subscribers to a non profit software engine company which spends a bunch of time doing what they feel could make their impact last any longer than it already has at least then the pdf would open in chrome :)
- untog 10y ago
  That's a shame, because there is a hell of a lot of legacy content out there that's never going to get converted.
samk117 10y ago
translucency

michaelbuckbee 10y ago

While the browser vendors haven't done this - some of the image hosting sites (who are far more directly affected) have. Imgur automatically converts larger GIF files to "GIFV" (WebM or MP4). The size difference is nuts: their example is a 50MB gif being reduced to 3.5MB Their announcement post about it: http://blog.imgur.com/2014/10/09/introducing-gifv/ http://blog.imgur.com/2014/10/09/introducing-gifv/

Ezhik 10y ago
It's such a mess though. You have gif with all its quality loss (256 colors and etc.), and then to make matters worse it's getting shoved through webm/mp4 encoding. And then there's everyone from Imgur to Twitter missing the point of why gif is even a thing. Because it is simple. Because gif is treated as an image and not a video format. Because you can right click it, and save it for later use. Can't do that with "gifv" (seriously, I had to use curl just to get the video file from Imgur), and definitely can't do that with Twitter. Neither webm nor mp4 can kill gif yet - mp4 is a patent mess, and webm comes closer (4chan for example has a quite big SFW community of people trading videos), but there are issues with Apple refusing to support it, and lack of hardware support.
- arcameron 10y ago
  With imgur, you can just right-click and hit `Save video as...` in both Chrome/Firefox (even without manually adding their ".gifv" extension) Twitter though, doesn't seem possible
  - Ezhik 10y ago
    Try to save a webm if it serves you an mp4, though. Maybe they changed it lately, but I just could not figure it out - .webm and .mp4 both just silently redirected to .gifv last I tried.
    - Dylan16807 10y ago
      Saving a video off imgur works about half the time in firefox, based on ???. There's a bug for it but it hasn't gotten much attention. It's a problem of imgur playing games with headers, embedding a video inside a web page and using the exact same URL for each. I haven't had any issues in chrome. Twitter's just putting dumb empty divs over the content. And they make it impossible to get the source gif even in cases where the video version is larger and lower quality. Thanks twitter.

scarlac 10y ago

There are certainly many cases where using video instead of GIF makes much more sense. But if you're talking about continuous animation of 10+ elements, then I'm not sure video is a good idea. We recently optimized electricitymap.org to use GIFs instead of CSS/SVG animations, reducing CPU usage between 50-95 percentage points (depending on setup). In our case, we were animating ~70 arrows causing 100% CPU on many machines, including my own beefed up MBPr from late 2013.

mxfh 10y ago
Looks great indeed, there is also the option to dynamically render the SVG animation to a sprited or multiple canvas once, and avoid to reevaluate and render the SVG for all instances on every frame.

the8472 10y ago

At least for pixel graphics with transparency converting gif to apng would be a far better choice than gif to h.264 or vp9. The thing is that you want 4:4:4 (no chroma subsampling) + alpha + lossless for pixel graphics. While some video standards support that in theory browsers often don't support those advanced profiles.

mzs 10y ago
I was surprised how well ProRes 4444 worked-out in practice for Windows/Mac/other(ffmpeg). The only downside was enormous size. https://en.wikipedia.org/wiki/Apple_ProRes#ProRes_4444_and_ProRes_4444_XQ https://en.wikipedia.org/wiki/Apple_ProRes#ProRes_4444_and_P...
- the8472 10y ago
  ffmpeg is not the issue here, it supports several 444/alpha/lossless codecs quite well, proes is not special in that regard. Browsers only expose a small subset of codecs that ffmpeg supports. gif and apng are now the most compatible format in browsers for this kind of content.
  - mzs 10y ago
    FourCC of ap4x 'just worked' on IE (I might have installed QuickTime codecs), Safari, and gstreamer with Firefox - it just played in the window (though I did not test alpha channel). I was surprised too ;)