7 ms·

Gnome developer creates new animated image format

88 points by tbrock 12y ago

nobullet 12y ago
Cool :) SVG that contains frames and instructions to transition between the frames after given durations. This could be even animations embedded into the main HTML page.
mohamedattahri 12y ago
B64 images animated with SVG. JPEG, PNG, 24bits, 8bits, you pick what works best for you. This is brilliant. Not rendering on Safari 8 though.
- lnanek2 12y ago
  Commenters reported not working well on Firefox either.
  - seba_dos1 12y ago
    It's just a bit heavy on Firefox compared to GIFs, but works.
  - psgbg 12y ago
    My bleeding edge 33.0 display them but has some issues. For example if you scroll, they may freeze, if you scroll again sometimes work again sometimes not. Sometimes they freeze at the end. But it's exciting.
  - deleted 12y ago
    [deleted]
- program 12y ago
  Safari 8 has no problems with "image/svg+xml". It renders the "image" if you open the link: http://funny.computer/cloud/XNG/distance.xng http://funny.computer/cloud/XNG/distance.xng For getting the xng on the page just replace the <img> with an <embed>.
  - mohamedattahri 12y ago
    Would have been very cool if it could have worked on all browsers using a simple img tag.
  - Razengan 12y ago
    Safari 8 on Yosemite here, and it animated that link for me.
quink 12y ago
This is completely terrible. This completely disregards anything motion estimation. Every single frame is encoded from scratch and that means a huge amount of space is wasted. And because of how JPEG works if even a single pixel is different in a macroblock you're throwing away most of the compressibility. Even GIF, GIF has the option of overlaying the previous GIF, which is how it's possible to get more than 256 colours in a GIF, among other net little tricks. GIF with even a small measure of dithering makes more sense than this, in all honesty. "GIFs, but better"? That's only because you're a) not using GIFs right and b) GIFs are terrible, but there's worse for the majority of use cases. This is one example. It also means that the browser has to load every single frame of this. If you've got a minute long video with 15 frames per second, that's 900 JPEG images in base64 hopping around in memory. Which do you think a tablet would be better at? Playing a minute of H.264, hardware accelerated and all, or shuffling through 900 JPEG images, 15 a second for at least a minute? How about 60 fps and 15 seconds? MPEG has been invented for a reason. Motion estimation is a good thing and has been built into everything since the 90s. Including virtually all mobile browsers, through whatever codec. Sorry, but this at best solves only a UI problem. Something like gifv is a much, much better solution. Also, unless you have the JPEG quantiser set to a wasteful 100, you're going to see the maroblock boundaries sitting around there and cutting lines into the picture, each frame differently depending on the quantiser level. I wouldn't even call it a neat little hack - just check out the memory usage. And don't even get me started on the name - XNG. Using canvas with JavaScript to render something akin to simple MPEG - that would be cool, amazing, brilliant. Finding a way to optimise dithering patterns within a GIF to minimise frame sizes would be absolutely fascinating. This is terrible. This is not a format problem. Hell, storing a movie in three different actual formats next to each other to get browser support for everything would waste less space than a single file of this. This is a UI problem at worst. If you want to use SVG for animations, go nuts. By all means. But never use it for anything like what I'm seeing here - actual videos instead of animations. The only use I can see for XNG that leaves it at least an order of magnitude as good as something else is if each frame shares almost nothing in common with the previous frame and is a full actual picture. But even then MPEG-1 with every frame a keyframe would do about just as well. gfycat and gifv are perfectly fine and superior on almost every level (apart from maybe the UI on esoteric devices x y or z that also somehow have a fast processor and a lot of RAM) than this. tl;dr: 60% CPU usage and a memory leak pushing my Chrome past a GB and that's just the start of it.
dimitar 12y ago
Isn't this like imgurs gifv?
- nacs 12y ago
  "gifv" is just an mpeg4 file that imgur serves a fallback gif for based on browser headers (mediacrush, gfycat have been doing the same thing for a while). The "xng" here is a series of images animated/wrapped in SVG.
userbinator 12y ago
SVG with base64 embedded JPEGs for each frame. This is not a "new animated image format", it's just using the capabilities of something that existed before. In other words, it's basically MJPEG in an inefficient text-based container. Many browsers can already play back MJPEG streams (common with IP cameras), so I do not see the point of this other than as an "it can be done" exercise. Also worth noting that animated SVG (vector format) is usually bigger than the equivalent SWF file - despite all the hate Flash gets (after the Adobe acquisition was when it seemed to get worse), I think it's a great compact vector animation format. You can also put MJPEG inside a SWF, so they're on equal footing with respect to that.
- Tloewald 12y ago
  And it works in fewer places than h264 video tags.
yarrel 12y ago
Does it rely on systemd?
- psgbg 12y ago
  In spanish(at least in argentina) we say "El que se quema con leche ve una vaca y llora" Someone who has burnt with milk sees a cow and cry... It means, if you had a bad experience with something, sometimes you extend your unease to things slightly related with your original experiences.
  - shk 12y ago
    In hindi also there is a simliar saying "Dudh ka jala chach bhi phoonk phoonk kar peeta ha" meaning Someone who is burnt with milk is very careful while drinking buttermilk as well.
    - psgbg 12y ago
      Culture convergence, awesome!
sergers 12y ago
For once chrome android didn't hang loading animations.
mahouse 12y ago
Horrible title for this article.
eps 12y ago
None of the examples renders. Mobile Safari.
- nacs 12y ago
  Worked on my iPhone 5s with iOS 8
- UrMomReadsHN 12y ago
  No go on Dolphin Browser on Android as well.
striking 12y ago
It's interesting and shows how extensible web platforms are. However, it's also a horrific misuse of SVG that slowed my web browser to a halt. The concept is fascinating but it's far from useful at this point.
leo_santagada 12y ago
mpeg4 as used by twitter, imgur giphy and many others are using is way better... I really don't see the point besides being a cool hack.
Pxtl 12y ago
There is exactly one reason animated gif still lives, and that's the simplicity and universality of the img tag. If this can run in all modern browsers in an img tag, it's useful. If it can't, it's not. How do I load an h.264 video in markdown? bbcode? Filtered html? I can't. But anything that lives in an img tag? That just works.
TheDong 12y ago
webm is a better format for animated images. So is webp. The author talks about lacking support for apng, but ironically apng has better support than his hack and is a superior format in every respects. Any animation form that a) just uses a still image form (jpg) and b) base64 encodes the data is destined to be terrible. SVG support is also not significantly better than apng... in fact, taking arbitrary photo viewing applications I'd bet that animated svg would fall far below apng in support. Calling this a new format is also very charitable since je did no work on improving the actual image compression algorithms. Google's WEBP/WEBM are examples of a new format that truly is pushing the boundaries. This, not so much.
- sandGorgon 12y ago
  there is also the apngasm kickstarter project (already funded) that is building tools for legacy browsers to work with apng ... including pure javascript based graceful degradation. https://www.kickstarter.com/projects/374397522/apngasm-foss-animated-png-tools-and-apng-standardi https://www.kickstarter.com/projects/374397522/apngasm-foss-...
- AlyssaRowan 12y ago
  Agreed - use WebM. You're seeing support for it already in the "imageboards" like 4chan. It's much better compressed than any dirty hack like this. I always appreciate seeing the odd dirty hack, though!
maxst 12y ago
Can't we just agree on: 1. APNG for low-color/lossless content. 2. MP4/WebM for video-like content. 3. ??? 4. No more GIFs = Profit.
atemerev 12y ago
Wow, what a hack! I love it. Despite all its shortcomings, it's hard to ignore the fact it works, right out of the box.

88 points by tbrock 12y ago

Cool :) SVG that contains frames and instructions to transition between the frames after given durations. This could be even animations embedded into the main HTML page.

mohamedattahri 12y ago

B64 images animated with SVG. JPEG, PNG, 24bits, 8bits, you pick what works best for you. This is brilliant. Not rendering on Safari 8 though.

lnanek2 12y ago
Commenters reported not working well on Firefox either.
- seba_dos1 12y ago
  It's just a bit heavy on Firefox compared to GIFs, but works.
- psgbg 12y ago
  My bleeding edge 33.0 display them but has some issues. For example if you scroll, they may freeze, if you scroll again sometimes work again sometimes not. Sometimes they freeze at the end. But it's exciting.
- deleted 12y ago
  [deleted]
program 12y ago
Safari 8 has no problems with "image/svg+xml". It renders the "image" if you open the link: http://funny.computer/cloud/XNG/distance.xng http://funny.computer/cloud/XNG/distance.xng For getting the xng on the page just replace the <img> with an <embed>.
- mohamedattahri 12y ago
  Would have been very cool if it could have worked on all browsers using a simple img tag.
- Razengan 12y ago
  Safari 8 on Yosemite here, and it animated that link for me.

quink 12y ago

This is completely terrible. This completely disregards anything motion estimation. Every single frame is encoded from scratch and that means a huge amount of space is wasted. And because of how JPEG works if even a single pixel is different in a macroblock you're throwing away most of the compressibility. Even GIF, GIF has the option of overlaying the previous GIF, which is how it's possible to get more than 256 colours in a GIF, among other net little tricks. GIF with even a small measure of dithering makes more sense than this, in all honesty. "GIFs, but better"? That's only because you're a) not using GIFs right and b) GIFs are terrible, but there's worse for the majority of use cases. This is one example. It also means that the browser has to load every single frame of this. If you've got a minute long video with 15 frames per second, that's 900 JPEG images in base64 hopping around in memory. Which do you think a tablet would be better at? Playing a minute of H.264, hardware accelerated and all, or shuffling through 900 JPEG images, 15 a second for at least a minute? How about 60 fps and 15 seconds? MPEG has been invented for a reason. Motion estimation is a good thing and has been built into everything since the 90s. Including virtually all mobile browsers, through whatever codec. Sorry, but this at best solves only a UI problem. Something like gifv is a much, much better solution. Also, unless you have the JPEG quantiser set to a wasteful 100, you're going to see the maroblock boundaries sitting around there and cutting lines into the picture, each frame differently depending on the quantiser level. I wouldn't even call it a neat little hack - just check out the memory usage. And don't even get me started on the name - XNG. Using canvas with JavaScript to render something akin to simple MPEG - that would be cool, amazing, brilliant. Finding a way to optimise dithering patterns within a GIF to minimise frame sizes would be absolutely fascinating. This is terrible. This is not a format problem. Hell, storing a movie in three different actual formats next to each other to get browser support for everything would waste less space than a single file of this. This is a UI problem at worst. If you want to use SVG for animations, go nuts. By all means. But never use it for anything like what I'm seeing here - actual videos instead of animations. The only use I can see for XNG that leaves it at least an order of magnitude as good as something else is if each frame shares almost nothing in common with the previous frame and is a full actual picture. But even then MPEG-1 with every frame a keyframe would do about just as well. gfycat and gifv are perfectly fine and superior on almost every level (apart from maybe the UI on esoteric devices x y or z that also somehow have a fast processor and a lot of RAM) than this. tl;dr: 60% CPU usage and a memory leak pushing my Chrome past a GB and that's just the start of it.

dimitar 12y ago

Isn't this like imgurs gifv?

nacs 12y ago
"gifv" is just an mpeg4 file that imgur serves a fallback gif for based on browser headers (mediacrush, gfycat have been doing the same thing for a while). The "xng" here is a series of images animated/wrapped in SVG.

userbinator 12y ago

SVG with base64 embedded JPEGs for each frame. This is not a "new animated image format", it's just using the capabilities of something that existed before. In other words, it's basically MJPEG in an inefficient text-based container. Many browsers can already play back MJPEG streams (common with IP cameras), so I do not see the point of this other than as an "it can be done" exercise. Also worth noting that animated SVG (vector format) is usually bigger than the equivalent SWF file - despite all the hate Flash gets (after the Adobe acquisition was when it seemed to get worse), I think it's a great compact vector animation format. You can also put MJPEG inside a SWF, so they're on equal footing with respect to that.

Tloewald 12y ago
And it works in fewer places than h264 video tags.

yarrel 12y ago

Does it rely on systemd?

psgbg 12y ago
In spanish(at least in argentina) we say "El que se quema con leche ve una vaca y llora" Someone who has burnt with milk sees a cow and cry... It means, if you had a bad experience with something, sometimes you extend your unease to things slightly related with your original experiences.
- shk 12y ago
  In hindi also there is a simliar saying "Dudh ka jala chach bhi phoonk phoonk kar peeta ha" meaning Someone who is burnt with milk is very careful while drinking buttermilk as well.
  - psgbg 12y ago
    Culture convergence, awesome!

sergers 12y ago

For once chrome android didn't hang loading animations.

mahouse 12y ago

Horrible title for this article.

eps 12y ago

None of the examples renders. Mobile Safari.

nacs 12y ago
Worked on my iPhone 5s with iOS 8
UrMomReadsHN 12y ago
No go on Dolphin Browser on Android as well.

striking 12y ago

It's interesting and shows how extensible web platforms are. However, it's also a horrific misuse of SVG that slowed my web browser to a halt. The concept is fascinating but it's far from useful at this point.

leo_santagada 12y ago

mpeg4 as used by twitter, imgur giphy and many others are using is way better... I really don't see the point besides being a cool hack.

Pxtl 12y ago

There is exactly one reason animated gif still lives, and that's the simplicity and universality of the img tag. If this can run in all modern browsers in an img tag, it's useful. If it can't, it's not. How do I load an h.264 video in markdown? bbcode? Filtered html? I can't. But anything that lives in an img tag? That just works.

TheDong 12y ago

webm is a better format for animated images. So is webp. The author talks about lacking support for apng, but ironically apng has better support than his hack and is a superior format in every respects. Any animation form that a) just uses a still image form (jpg) and b) base64 encodes the data is destined to be terrible. SVG support is also not significantly better than apng... in fact, taking arbitrary photo viewing applications I'd bet that animated svg would fall far below apng in support. Calling this a new format is also very charitable since je did no work on improving the actual image compression algorithms. Google's WEBP/WEBM are examples of a new format that truly is pushing the boundaries. This, not so much.

sandGorgon 12y ago
there is also the apngasm kickstarter project (already funded) that is building tools for legacy browsers to work with apng ... including pure javascript based graceful degradation. https://www.kickstarter.com/projects/374397522/apngasm-foss-animated-png-tools-and-apng-standardi https://www.kickstarter.com/projects/374397522/apngasm-foss-...
AlyssaRowan 12y ago
Agreed - use WebM. You're seeing support for it already in the "imageboards" like 4chan. It's much better compressed than any dirty hack like this. I always appreciate seeing the odd dirty hack, though!

maxst 12y ago

Can't we just agree on: 1. APNG for low-color/lossless content. 2. MP4/WebM for video-like content. 3. ??? 4. No more GIFs = Profit.

atemerev 12y ago

Wow, what a hack! I love it. Despite all its shortcomings, it's hard to ignore the fact it works, right out of the box.