7 ms·

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

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.

qingcharles 1y ago
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.
- extraduder_ire 1y ago
  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.
  - qingcharles 1y ago
    Yes, most places only show the first frame. They ignore the animation, sadly. Even while accepting GIFs.
    - extraduder_ire 1y ago
      That's not the first frame, it's the fallback image that png decoders which are unaware of apng decode. It is never shown by compliant apng decoders. You can make it the first frame of the animation, or any other image you want. e.g. some text saying "APNG unsupported"
andsoitis 1y ago
> 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 https://www.w3schools.com/graphics/svg_animation.asp
- mattigames 1y ago
  Overshadowed by CSS animations for almost all use cases.
  - lawik 1y ago
    But animated gradient outlines on text is the only use-case I care about.
    - mattigames 1y ago
      "Use case" is written without hyphen https://en.m.wikipedia.org/wiki/Use_case https://en.m.wikipedia.org/wiki/Use_case
      - fkyoureadthedoc 1y ago
        I have to differentiate myself from LLMs by using words wrong though
      - WorldMaker 1y ago
        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.
  - account42 1y ago
    *in browsers Most other SVG renderers don't support much CSS.
- albert_e 1y ago
  Oh TIL - Thanks! This could possibly be used to build full fledged games like pong and breakout :)
riffraff 1y ago
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?
- josephg 1y ago
  I doubt it, given png is a lossless compression format. For video thats almost never what you want.
  - DidYaWipe 1y ago
    For animations with lots of regions of solid color it could do very well.
    - josephg 1y ago
      So do most other video formats. I'm not really seeing any advantages, and I see a lot of disadvantages vs h264 and friends.
      - account42 1y ago
        Not without lots of artifacts.
- layer8 1y ago
  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-animations/ https://www.randomnoun.com/wp/2013/10/27/windows-shell32-ani...
  - fc417fc802 1y ago
deleted 1y ago
[deleted]
jonhohle 1y ago
It seems crazy to think about, but I interviewed with a power company in 2003 that was building a web app with animated SVGs.
bmacho 1y ago
> 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).
- bawolff 1y ago
  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.
  - account42 1y ago
    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.
- vorgol 1y ago
  It nearly got raw socket support back in the day: https://news.ycombinator.com/item?id=35381755 https://news.ycombinator.com/item?id=35381755
chithanh 1y ago
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.
- account42 1y ago
  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.
  - chithanh 1y ago
    > 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.
jokoon 1y ago
both GIF and PNG use zipping for compressing data, so APNG are not much better than GIF
- bawolff 1y ago
  PNG uses deflate (same as zip) but GIF uses LZW. These are different algorithms. You should expect different compression results i would assume.
  - account42 1y ago
    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.
- 0points 1y ago
  Remember when we unwillingly trained the generative AI:s of our time with an endless torrent of factoids?
- Calzifer 1y ago
  (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.
  - account42 1y ago
    > 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.
theqwxas 1y ago
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?
account42 1y ago
> 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.

qingcharles 1y ago

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.

extraduder_ire 1y ago
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.
- qingcharles 1y ago
  Yes, most places only show the first frame. They ignore the animation, sadly. Even while accepting GIFs.
  - extraduder_ire 1y ago
    That's not the first frame, it's the fallback image that png decoders which are unaware of apng decode. It is never shown by compliant apng decoders. You can make it the first frame of the animation, or any other image you want. e.g. some text saying "APNG unsupported"

andsoitis 1y ago

> 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 https://www.w3schools.com/graphics/svg_animation.asp

mattigames 1y ago
Overshadowed by CSS animations for almost all use cases.
- lawik 1y ago
  But animated gradient outlines on text is the only use-case I care about.
  - mattigames 1y ago
    "Use case" is written without hyphen https://en.m.wikipedia.org/wiki/Use_case https://en.m.wikipedia.org/wiki/Use_case
    - fkyoureadthedoc 1y ago
      I have to differentiate myself from LLMs by using words wrong though
    - WorldMaker 1y ago
      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.
- account42 1y ago
  *in browsers Most other SVG renderers don't support much CSS.
albert_e 1y ago
Oh TIL - Thanks! This could possibly be used to build full fledged games like pong and breakout :)

riffraff 1y ago

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?

josephg 1y ago
I doubt it, given png is a lossless compression format. For video thats almost never what you want.
- DidYaWipe 1y ago
  For animations with lots of regions of solid color it could do very well.
  - josephg 1y ago
    So do most other video formats. I'm not really seeing any advantages, and I see a lot of disadvantages vs h264 and friends.
    - account42 1y ago
      Not without lots of artifacts.
layer8 1y ago
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-animations/ https://www.randomnoun.com/wp/2013/10/27/windows-shell32-ani...
- fc417fc802 1y ago

deleted 1y ago

[deleted]

jonhohle 1y ago

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

bmacho 1y ago

> 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).

bawolff 1y ago
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.
- account42 1y ago
  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.
vorgol 1y ago
It nearly got raw socket support back in the day: https://news.ycombinator.com/item?id=35381755 https://news.ycombinator.com/item?id=35381755

chithanh 1y ago

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.

account42 1y ago
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.
- chithanh 1y ago
  > 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.

jokoon 1y ago

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

bawolff 1y ago
PNG uses deflate (same as zip) but GIF uses LZW. These are different algorithms. You should expect different compression results i would assume.
- account42 1y ago
  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.
0points 1y ago
Remember when we unwillingly trained the generative AI:s of our time with an endless torrent of factoids?
Calzifer 1y ago
(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.
- account42 1y ago
  > 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.

theqwxas 1y ago

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?

account42 1y ago

> 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.