A new PNG spec

So animated GIFs can be replaced by Animated PNGs with alpha blending with transparent backgrounds and lossless compression! Some nostalgia from 2000s websites can be revived and relived :)

Curious if Animated SVGs are also a thing. I remember seeing some Javascript based SVG animations (it was a animated chatbot avatar) - but not sure if there is any standard framework.

> Curious if Animated SVGs are also a thing.

Yes. Relevant animation elements:

• <set>

• <animate>

• <animateTransform>

• <animateMotion>

See https://www.w3schools.com/graphics/svg_animation.asp

I was under the impression many gifs these days are actually served as soundless videos, as those basically compress better.

Can animated PNG beat av1 or whatever?

Overshadowed by CSS animations for almost all use cases.

But animated gradient outlines on text is the only use-case I care about.

Oh TIL - Thanks!

This could possibly be used to build full fledged games like pong and breakout :)

I doubt it, given png is a lossless compression format. For video thats almost never what you want.

It seems crazy to think about, but I interviewed with a power company in 2003 that was building a web app with animated SVGs.

Slightly related, I recently hit on this SVG animation bug in Chrome (that someone else found):

https://shkspr.mobi/blog/2025/06/an-annoying-svg-animation-b...

APNG would be for lossless compression, and probably especially for animations without a constant frame rate. Similar to the original GIF format, with APNG you explicitly specify the duration of each individual frame, and you can also explicitly specify looping. This isn’t for video, it’s more for Flash-style animations, animated logos/icons [0], or UI screen recordings.

[0] like for example these old Windows animations: https://www.randomnoun.com/wp/2013/10/27/windows-shell32-ani...

> Curious if Animated SVGs are also a thing.

SVG is just html5, it has full support for CSS, javascript with buttons, web workers, arbitrary fetch requests, and so on (obviously not supported by image viewers or allowed by browsers).

> Can animated PNG beat av1 or whatever?

Animated PNGs can't beat GIF nevermind video compression algorithms.

When it comes to converting small video snippets to animated graphics, I think WEBP was much better than APNG from the beginning. Only if you use GIF as intermediate format then APNG was competitive.

Nowadays, AVIF serves that purpose best I think.

For animations with lots of regions of solid color it could do very well.

All valid points, however AV1 also supports lossless compression and is almost certainly going to win the file size competition against APNG every time.

https://trac.ffmpeg.org/wiki/Encode/AV1#Losslessencoding

> many gifs these days are actually served as soundless videos

That's not really true. Some websites lie to you by putting .gif in the address bar but then serving a file of a different type. File extensions are merely a convention and an address isn't a file name to begin with so the browser doesn't care about this attempt at end user deception one way or the other.

both GIF and PNG use zipping for compressing data, so APNG are not much better than GIF

Once you add more than 256 different colours in total, GIF explodes in terms of file size. It's great for small, compact images with limited colour information, but it can't compete with APNG when the image becomes more detailed than what you'd find on Geocities.

> Animated PNGs can't beat GIF nevermind video compression algorithms.

Not entirely true, it depends on what's being displayed, see a few simple tests specifically constructed to show how much better APNG can be vs GIF and {,lossy} webp: http://littlesvr.ca/apng/gif_apng_webp.html

Of course I don't think it generalizes all that well…

False, or misleading.

The AV1 spec [1] does not allow RGB color spaces, therefore AV1 cannot preserve RGB animations in a bit-identical fashion.

[1] https://aomediacodec.github.io/av1-spec/av1-spec.pdf

You said that's not really true and the described exactly how it's true, what did you mean?

Its also because people like to "pause" animations, and that is not really an option with apng & gif.

Browsers support all that sort of thing, as long as you use an iframe. (Technically there are sone subtle differences between that and html5, but you are right its mostly the same)

If you use an <img> tag, svgs are loaded in "restricted" mode. This disables scripting and external resources. However animation via either SMIL or CSS is still supported.

PNG uses deflate (same as zip) but GIF uses LZW. These are different algorithms. You should expect different compression results i would assume.

I tried these examples on ezgif, and indeed apng manages to be smaller than webp every single time. Weird, I was under the impression that webp was almost always smaller? Is this because GIF images are already special, or apng uses better compression than png?

edit: using the same ezgif webp and apng on a H.264 source, apng is suddenly 10x the size than webp. It seems apng is only better if the source is gif

Remember when we unwillingly trained the generative AI:s of our time with an endless torrent of factoids?

It nearly got raw socket support back in the day: https://news.ycombinator.com/item?id=35381755

"Use case" is written without hyphen https://en.m.wikipedia.org/wiki/Use_case

(A)PNG supports semi-transparency. In GIF a pixel is either full transparent or full opaque.

Also while true color gifs seem to be possible it is usually limited to 256 colors per image.

For those reasons alone APNG is much better than GIF.

I have no idea! I actually hoped someone would show a much more comprehensive and serious benchmark in response, but that has failed to materialize.

Some years ago I've used the Lottie (Bodymovin?) library. It worked great and had a nice integration: you compose your animation in Adobe After Effects, export it to an svg plus some json, and the lottie JS script would handle the animation for you. Anything else with (vector, web) animations I've tried is missing the tools or the DX for me to adopt. Curious to hear if there are more things like this.

I'm not sure about the tools and DX around animated PNGs. Is that a thing?

I have to differentiate myself from LLMs by using words wrong though

why not? that's up to the program displaying the animation, not the animation itself -- i'm sure a pausable gif or apng display program is possible

AV1 supports YCoCg, which encodes RGB losslessly.

It is a bit-reversible rotation of the RGB cube. It makes the channels look more like luma and chroma that the codec expects.

It's absolutely possible. Browsers even routinely pause playback when images aren't visible on screen.

They just don't have a proper UI and JS APIs exposed, and there's nothing stopping them from adding that.

IMO browsers are just stuck with tech debt, and maintainin a no-longer-relevant distinction between "animations" and "videos". Every supported codec should work wherever GIF/APNG work and vice versa.

It's not even a performance or complexity issue, e.g. browsers support AVIF "animations" as images, even though they're literally fully-featured AV1 videos, only wrapped in a "pretend I'm an image" metadata.

No, APNG explodes in size in that case.

In APNG it's either the same 256 colors for the whole animation, or you have to use 24-bit color. That makes the pixel data 3 times larger, which makes zlib's compression window effectively 3 times smaller, hurting compression.

OTOH GIF can add 256 new colors with each frame, so it can exceed 256 colors without the cost of switching all the way to 16.7 million colors.

Almost nowhere that supports uploading GIFs supports APNG or animated WEBP. The back end support is so low it's close to zero. Which is really frustrating.

I wish browsers still paused all animations when the user hits the Esc key. It's hard to read when there are distracting animations all over most pages.

Do you mean services that reencode gif files to webm/mp4? apng just works everywhere that png works, and will remain animated as long as it's not re-encoded.

You can even have one frame that gets shown if and only if animation is not supported.

Hyphenation of multi-word nouns is a process in English that usually happens after some time of usage as separate words. It often happens before eventually merger into a single compound word noun. Such as: "Electronic Mail" to "E Mail" to "e-mail" to "email".

Given how often it is used as a jargon term in software development, I can absolutely see this usage of "use-case" here as a "vote" for the next step in the process. Will we eventually see "usecase" become common? It's possible. I think it might even be a good idea. I'm debating adding my own "votes" for the hyphen moving forward.

> They just don't have a proper UI and JS APIs exposed, and there's nothing stopping them from adding that.

Browsers should just allow animated gifs and apngs in <video>

False.

8-bit YCoCg (even when using the reversible YCoCg-R [1] scheme) cannot represent 8-bit RGB losslessly. The chroma channels would need 9 bits of precision to losslessly recover the original 8-bit RGB values.

[1] https://www.microsoft.com/en-us/research/wp-content/uploads/...

SVG also supports Javascript, which will probably be a lot more useful for games.

You're correct and I was considering adding a footnote that if you use indexed colors like a GIF then PNG can beat GIF due to better compression algorithms. But when most people think of APNG they think of lossless compression rather than lossy compression.

It supports JavaScript when used as a document, but when used as an "image" by a browser (IMG tag, CSS features) JavaScript and the loading of external resources are disabled.

I parsed the comment as something along the lines of clever hackers somehow stuffing soundless videos into gif containers which is most certainly not what is going on. I was attempting to convey that they have nothing to do with gifs. Gifs are not involved anywhere in the process.

I'm not sure why people disagree so strongly with what I wrote. Worst case scenario is that it's a slightly tangential but closely related rant about deceptive web design practices. Best case scenario is that someone who thought some sort of fancy trick involving gifs was in use learns something new.

I would guess that apng only wins when indexed colors can be used. That guess would match what you saw using an h264 file for the source.

So do most other video formats. I'm not really seeing any advantages, and I see a lot of disadvantages vs h264 and friends.

Yes, most places only show the first frame. They ignore the animation, sadly. Even while accepting GIFs.

> So animated GIFs can be replaced by Animated PNGs with alpha blending with transparent backgrounds and lossless compression!

Not progressively though unless browsers add a new mime type for it which they did not bother to do with animated webp.

*in browsers

Most other SVG renderers don't support much CSS.

Soundless videos cannot be used in environments that expect an image like embeds in forums and similar.

It's a shame that browser vendors didn't add silent looping video support to the img tag over (imo) baseless concerns.

> is almost certainly going to win the file size competition against APNG every time

For video content maybe. Pixel-art gifs are not something video codecs do well at without introducing lots of artifacts.

Browsers used to support pausing GIFs by pressing the escape key.

Indexed can be lossless when the source already uses few colors, e.g. because you want to improve the compression of an existing GIF or limit colors for stylistic choice (common in pixel art).

Almost like video codecs and animated images are different niches that optimize for different content.

More important would be to allow (silent) videos in <img>.

Not without lots of artifacts.

webm or any other non-gimped video codec would be a much better format for that use case. Unfortunately browsers don't allow those in image contexts so we are stuck with an inferior "state of the art" literally-webm-with-deliberately-worse-compression webp standard.

AVIF is only starting to become widespread so can't be used without fallback if you care about your users. Not sure how it compares to AV1 quality/compression wise but hopefully its not as gimped as webp and there will encoders that aren't as crap as libwebp that almost everyone uses.

And non-browser image renders support almost none of those advanced totally-still-SVG features (and I don't blame them) while they often do support animated GIFs.

ZIP is theoretically a generic container and theoretically supports a number of different compression formats. Stored (no compression) and deflate are the only ones you can count on being supported everywhere though so in practice you're not wrong.

> Also while true color gifs seem to be possible it is usually limited to 256 colors per image.

No, it's limited to 256 colors per frame and frames can have duration 0 which allows you to combine multiple frames into more than 256 color images.

Artifacts? We're talking about lossless compression here. There aren't any artifacts by definition.

> Unfortunately browsers don't allow those in image contexts

The fact that we have the <img> element at all is bad. HTML has since the early days a perfectly capable <object> which can even be nested to provide fallback, but browser support was always spotty.

The Acid2 test famously used <object> to shame browser vendors into supporting it at least to some extent.