Tell me more ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.
up vote 6 down vote favorite
2

What formats supporting animation are suitable for the web and what are the pros and cons of each.

share|improve this question

3 Answers

up vote 7 down vote accepted

It depends on what type of animation you need.

  • .gif images - Fully supported, but limited use with frames. .png files are supposed to have support for animation, but you don't see it in the wild very often, if at all.
  • Flash, Silverlight, and other plugins - Flash has the most ubiquity, but all plugins need to be installed in the browsers and can't necessarily be counted on to be installed on a user's computer. May not work for mobile platforms.
  • CSS3 - Limited transforms or animations, limited browser support.
  • HTML5 video - The future, but limited browser support.
  • JavaScript - Needs to be enabled, but should have near universal browser-support. Limited types of animation. See Raphael.js.
  • Canvas tag - Modern browser support, but supports rich animations.
share|improve this answer
I'm going to nitpick here, but <canvas> animation is essentially JavaScript - it is just a different format on which stuff can be drawn. If you want to be precise, you should differentiate between animating HTML elements, SVG (which raphael.js uses) and HTML5 <canvas> – Yi Jiang Jan 5 '11 at 13:36
The difference between SVG and canvas animation in a nutshell - with SVG, every path is an element you can bind data and events like click and mouseover to and interact with like a div, while in Canvas, it's more like the browser creates things, gives them behaviour rules then forgets about them. SVG doesn't exist in IE before IE 9, which is why Raphael is awesome - it controls SVG, or, in IE6-8, it uses IE's old own-brand equivalent (called VML). The only thing I know Raphael doesn't work on is old Android stock browsers (before version 2 I think). – user568458 Nov 19 '12 at 9:37
up vote 1 down vote

When overlaying images that contain a transparency on-top of animated images on layers beneath the image. You will find that PNG24 is the only image format where the anti-aliasing blends correctly with the background imagery. With GIF and PNG8 you are going to find that your edges are all chunky. Doesn't look very good, but really easy to miss.

share|improve this answer
up vote 1 down vote

This is in addition to Virtuosi Media's great answer:

Apple has recently used still JPEG and PNG images for animation on their site. They use JavaScript to switch the images. It's a great technique if you don't have too many frames, need alpha transparency support, want the animation to be in place on the page and if you want wide browser support. The downside is download size and effort.

It can also be interactive. If you scroll to the Smart Cover section of Apple's iPad page, you can see it in action: http://www.apple.com/ipad/features/

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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