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 tag is hidden using display: none

Answer 1

"display:none" is Your Friend

If you use display:none on the GIF's html 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:

to this:

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 pointing at the original animated GIF inside the 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

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.

0 讨论(0)

查看其它4个回答

发布评论:

提交评论

---

•  加载中...