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

@Ravi4787994

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: www.apple.com/ipad/features/

Vote Up Vote Down

@Murray664

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.

Vote Up Vote Down

@Goswami567

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.

Vote Up Vote Down