2

What is better for the client side, an animated gif or the same animation done as a sequence of images with CSS ?

2

What's better, apples or oranges?

An animated .gif gives the author extensive control (frame rate, length, color profile etc.) but will often have a rather bloated filesize (for an image).

CSS animations tend to be more succinct in terms of data transfer, but require more processing by the browser (and are subject to inconsistencies between browsers/rending engines) and may not work on old browsers.

Do you think that CPU/GPU is more precious to your users than bandwidth?

How important is pixel perfect rendering?

Balancing these factors, or even better testing the performance of each, is the only way to know which is better for your specific needs.

2
  • I'm still wondering why it is an "apples or oranges" answer; while both are different technologies per se, the question is focused on a common feature: animation.
    – marcanuy
    Dec 17 '15 at 14:20
  • Have you ever made an animated .gif? It a series of static images that loop at timed intervals. Taking those files, sequencing and timing them are the author's responsibilities, most of the burden on the client is related to bandwidth (they are bitmap based). CSS animations are vector based and they rely on the client calculating and rendering them appropriately and there's lot of variables (for instance, even with 2d transformations, it's often a good practice to write them as 3d transformations so they use the GPU not the CPU), totally different technologies.
    – adam-asdf
    Dec 18 '15 at 17:14
0

If the prospective clients of your website/application will have a low bandwidth connections, you should consider gif over CSS animation. You can have control over the gif from your side and can even alter the output from that single file if you require without multiple file alterations (on the CSS file and the image files).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.