1

I want to animate a small section of an image. Most of the image is going to remain static and only a small section is going to animate. This can be done with animated GIFs, but is there a better alternative to this? I'm not sure if APNG is well-supported by most browsers. Are there any jQuery plugins to do this?

Michael M.
  • 10,486
  • 9
  • 18
  • 34
user1448031
  • 2,172
  • 11
  • 44
  • 89
  • 1
    GIF annimations only store the part that actually change, so it should be fine just to use one big image - unless this image is a photo, where you would use am JPEG. In that case a small GIF with just the animated part would be better. JavaScript/jQuery isn't a magic do-it-all. Just use CSS apsolute positionsing to place the animationed GIF at the right location on top of the large image. – RoToRa Apr 20 '14 at 17:57

2 Answers2

2

APNG is capable of animating a portion of the image, like GIF, plus it allows eight bits per sample RGBA with millions of colors, unlike GIF which limits you to 256 colors and 1-bit transparency. APNG is not well supported by browsers. Supposedly the latest version of WebP supports animation.

Glenn Randers-Pehrson
  • 11,940
  • 3
  • 37
  • 61
1

Updated in June 2023...

All major browsers now support APNG format - Chrome, Safari, Firefox, Opera and Edge.

The remaining browsers that don't support APNG are Opera Mini (which has a browser market share less than 1%) and Internet Explorer (which is unsecure and nobody should use any more).

WebP also supports animation and all browsers support it (except Internet Explorer).

Video can be a good alternative to animated images. Videos can feel smoother and have smaller file size for complex animations.

Dan Roberts
  • 517
  • 7
  • 13