Does hiding an animated GIF with CSS conserve browser resources?

Question

I have a gif image. It gets shown only on very specific events, not too often. By default, the gif's html <img> tag is hidden using display: none.

Now, we all know gifs can be very tough on a computer's cpu. I don't know how to benchmark or check whether a hidden gif still uses CPU bandwidth.

I checked the repainting of the gif with dev tools - it's not happening, as expected. That's good. The FPS meter doesn't go up either, and neither does memory usage. But I have a powerful CPU and computer; these don't go up when the gif appears either.

Does anyone have ideas for how to benchmark this, or knows better about browsers? I don't want this gif to be a resource hog for people who never see it. And I don't want to remove it from the DOM either.

Answer 1

"display:none" is Your Friend

If you use display:none on the GIF's html <img> tag, the GIF will not be rendered at all, and will not use any CPU or GPU resources. See this and this for explanations.

Use Javascript to Pause the Animated GIF

If for some reason display:none doesn't fill the bill, the free libgif-js and x-gif Javascript libraries both provide the ability to programmatically pause and restart the playing of animated GIFs. These libraries also offer a lot of other features that you are probably not interested in. See the answers to this SO question for further notes about these libraries.

Use an MP4 Inside an HTML5 Tag Instead of an Animated GIF.

To improve the page load speed and reduce CPU and GPU load, translate your animated GIF to an MP4 video, which requires a significantly smaller memory footprint and much lower CPU/GPU usage. See the following excerpt from the article, "How elegant code can hurt HTML5 performance" by George Lawton:

Animated GIFs are growing in popularity on many sites owing to their small file size. However, they should be avoided when possible (...) Use video for animations rather than GIFs to achieve good performance. When a browser tries to animate a GIF, it uses the change in images to render the objects. Although the files can be small, rendering them taxes CPUs and memory. For example, a 200 KB animated GIF can require gigabytes of internal memory to render. Video formats are much easier to render, can better leverage the GPU, and make it easier to throw out frame data after it is presented.

According to the article "Optimizing Animated GIFs by Converting to HTML5 Video" by Billy Hoffman,

Today over 90% of desktop browsers support MP4 video ... For modern mobile devices, support is close to 100%...

Our research has found that animated GIFs are usually 5 to 10 times larger than a properly encoded MP4 video. This difference means that GIFs are not only wasting significant amounts of bandwidth, they are loading more slowly and creating a bad user experience.

In fact, converting animated GIFs to MP4 video is such an awesome optimization that it is exactly what sites like Twitter and Facebook and imgur do when you upload an animated GIF. They silently convert it to an MP4 video and display that instead.

You can use the free utility ffmpeg to translate your animated GIF to an MP4 video. Then, modify your HTML from this:

<img src="video.gif" alt="" width="400" height="300" />

to this:

<video autoplay="autoplay" loop="loop" width="400" height="300">
  <source src="video.mp4" type="video/mp4" />
  <img src="video.gif" width="400" height="300" /></video>

This will automatically start the video, and loop it, without displaying any video controls. This gives the same experience as the animated GIF but it’s faster and smaller. Notice that we still have an <img> pointing at the original animated GIF inside the <video> tag. This way in the unlikely event the a visitor’s browser doesn’t support MP4 videos, the animated GIF will still be displayed and the user still experiences the content.

If You Still Want Proof

If you really want to prove that your animated GIF causes no drain on your CPU/GPU, you can use a clever method described by David Corvoysier in his article, Effectively measuring browser framerate using CSS:

The principle is quite simple: - insert a very simple CSS animated item in a page, - calculate the computed position of this item at regular intervals, - every second that has elapsed, count the number of different positions occupied by the item.

Pretty dumb, uh ? Well, maybe, but it gives surprisingly accurate results, actually ...

You can download his Javascript code here. His demo only evaluates the loading from CSS animations, but you could add your GIF to each <div> created in his code to see its effect on the test.

When performing a benchmark test for animation, you can purposely handicap your computer a little by disabling the hardware acceleration, which will move rendering activities from the GPU to the CPU. This might help you to more easily notice the impact of animation on performance.

Answer 2

with display:none elements still exist in, and are resolved by the browser, they are only hidden from the user.

you could use visible=false as this elements are not resolved in the browser but I don't know if you can use it.

I would also check visibility: hidden as I don't know for this option how is it rendered.

You can benchmark it the old school way, just jam up 50 (or more if necessary) gif's in your page, until your CPU spikes and than hide it and observe your CPU.

I would also point out that the behavior will heavily depend on the browser itself so you would need to check it with different browser to be really sure.

Answer 3

It shouldn't. In the MDN document for none value on display, It said that

The document is rendered as though the element did not exist.

A Timeline test on chrome:

Image used: https://imgur.com/download/i8kbwLN ( 37M )

HTML:

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <img src="a.gif" width="800px">
    </body>
</html>

Console:

use_jQuery();

setTimeout(function() {
    $('img').css({display: 'block'});
    setTimeout(function() {
        $('img').css({display: 'none'});
    }, 1000);
}, 2000);

---

Same things seems to happens with CSS animation:

Probably the element don't even render.

Answer 4

If you are hiding any imges(s) / iframe(s) through css's display:none or you are hiding any div (or other tag) through this css rule (display:none), image(s) / iframe(s) etc within this tag will not be loaded in the browser. It means browser will not make http request for these elements.

Browser will sent the request to the server after you change the display property to other then none.

It is not about img, but all the resources which makes server requests.