14 ms·
Chromium: Add support for Animated PNG
- hogrammer 10y agoAnd bring back the <blink> tag, too!
- Scaevolus 10y agoI've been waiting for this for 9 years :-) A nice feature of APNG (and GIF) versus the more modern CSS/SVG animations is the CPU efficiency. It's really easy to accidentally waste a ton of battery life by adding a tiny spinning gear to a page. It varies depending on the browser and whether the GPU is used for compositing, but it's much easier to optimize blitting a rectangle each frame versus blitting a rotation of some complex vector shape on top of the page.
- erikpukinskis 10y agoThis is true, if you animate CSS properties that trigger reflows you can seriously harm battery usage. I try to stick to only animating the transform property, which should perform better than a raster format, since it doesn't require any new data per frame
- scarlac 10y agoI had the same approach as this. But not all animations can be made using the transform property, and even if you avoid reflows you can still have a lot of CPU usage with simple animations. In our case, we were moving a gradient inside a div. You wouldn't think this uses a lot of CPU, but if you have enough of them, it becomes a problem - there is apparently a lot of CPU processing involved in re-rendering regardless of reflow. Using the translateZ(0) trick did not eliminate the issue.
- erikpukinskis 10y agoIn my experience, you really need to work with designers who are willing to consider the technical impacts of design choices within the browser. You need to be able to say, this animation style causes strangeness and performance impacts... are their other designs that don't have the same technical needs and still achieve our product goals? The coder needs to be willing to understand the design constraints and the designer needs to be willing to understand the code constraints and both people need to take joy in finding solutions that tick every box. If you have a "throw the designs over the wall" workflow, CSS will never work, you have to go to iOS or Unity or something like that where you have minute control over every detail. On some level, this becomes an identity issue... are you Mercedes, or Apple, who will marshal incredible resources to control every detail of a production, or are you a Craigslist, or Bikini Kill, who will sacrifice any and every technical consideration to maintain laser focus on a singular goal. Put another way, are you the conqueror who flattens an entire ecosystem to build your perfect palace, or a craftsperson who takes a small amount of material each day, and makes something beautiful within the constraints?
- nwah1 10y agoDoesn't this just mean that SVG implementations are poorly optimized, and don't make proper use of the GPU?
- scythe 10y agoSVG is much more powerful than APNG and optimizing SVG for cases already handled by APNG is probably not a priority.
- alwillis 10y agoUpdated graphics benchmarks, including SVG: http://browserbench.org/MotionMark/about.html http://browserbench.org/MotionMark/about.html
- alwillis 10y agoUpdated graphics benchmarks, including SVG: http://browserbench.org/MotionMark/about.html http://browserbench.org/MotionMark/about.html
- jacobolus 10y agoAnimated GIFs often burn huge amounts of CPU on my machine. A page full of GIFs can bring a modern computer to its knees. (This is one reason many image sharing sites convert uploated GIFs to proper video files, mp4 or webm or whatever.) I’ve never quite understood why implementations of GIF viewers in web browsers were so bad. In many cases it seems like they could cache every frame in GPU memory somewhere and very cheaply loop them. Caveat: I haven’t studied this in any detail, and am not an expert on image/video formats.
- Keverw 10y agoI've noticed that gifs are made into videos too. I wonder if apng's will be efficient. I would think a small animated image like a .gif would be more optimized than a full on video file but I guess not.
- ehsankia 10y agoOnce you understand how videos are encoded, it's pretty obvious why gif (and apng) are not and will never be as small as videos. Videos use temporal data. You have one key frame (where the whole image is stored) and the following frames are encoded as delta (difference) from the previous frame. So a still video could basically be the size of a single image. Animated images aren't that smart, they're just a bunch of images, so you're storing every single frame.
- tyingq 10y agoIt's not quite that stark. You can have the non changing background solely in the first frame, and have subsequent frames (smaller frames even, placed at offsets) composed solely of "sprite like" things that overlay. And there are tools like imagemagick that can optimize existing animated gifs in that way. It is crude, but it's more than just a plain sequence of unrelated full size frames .
- dlubarov 10y ago> Animated images aren't that smart, they're just a bunch of images, so you're storing every single frame. GIF89a has a sort of limited delta encoding via the "do not dispose" option. If you write a frame with "do not dispose" and then write a frame with some transparent pixels, the transparent pixels will retain the colors from the previous frame. It's rather primitive but it's better than nothing.
- paxcoder 10y agoSo Firefox, Safari and now Chrome. Provided image hosting sites start accepting APNG this may finally mean the end of GIF. Why now though?
- drdaeman 10y agoThere's actually a tendency for "GIF" to become a generic term for any small animated pictures, rather than what it used to mean. I saw it many times that "GIFs" were used to denote what actually were small MPEG4 short clips. Made me cringe internally.
- jeroenhd 10y agoImgur converts most moving images into mp4 and webm, serving the optimal file to the browser the visitor is using. I think this is part of the reason why people use the word "GIF" for any moving media these days as imgur is a very popular medium.
- DaiPlusPlus 10y agoGIF also has the connotation of the animation or video being short (under 30 seconds), often subtler animation, and without audio - whereas "video" implies more a traditional multimedia presentation.
- tinus_hn 10y agoWhatsApp also supports 'gifs' that I think are just short videos with no support for sound that play inline. Kind of what Vine tried to do.
- btym 10y agoTwitter does the same thing.
- jeroenhd 10y agoI assume Google wants to push their own image format (animated webp) instead of supporting an old format nobody has been using for years. This is good news though; finally we can start to abandon the cruddy old GIF format and move to something more modern.
- callesgg 10y agoWhat about interframe compression?
- maxst 10y agoSupported http://littlesvr.ca/apng/inter-frame.html http://littlesvr.ca/apng/inter-frame.html
- therealmarv 10y agoThanks for this link. Also a good test case for Chrome Canary (59)
- Scaevolus 10y agoYes. Each frame can specify a region of the overall image, usually just the bounding box of the changed pixels. There are a few options for retention: APNG_DISPOSE_OP_NONE: no disposal is done on this frame before rendering the next; the contents of the output buffer are left as is. APNG_DISPOSE_OP_BACKGROUND: the frame's region of the output buffer is to be cleared to fully transparent black before rendering the next frame. APNG_DISPOSE_OP_PREVIOUS: the frame's region of the output buffer is to be reverted to the previous contents before rendering the next frame.
- habitue 10y agoBenefits of apng vs. video?
- pornel 10y agoHard to find any. It's a primitive format ignoring 20 years of video compression research. It tries to be replacement for GIF by repeating its mistakes: it has very basic inter-frame compression, lacks motion vectors, doesn't guarantee keyframes, RGB-only, and frame decoding isn't parallelizable. In 8-bit mode it supports even fewer colors than GIF (GIF can combine frames to achieve thousands of colors), and in 24-bit mode it's larger than GIF. For full-motion video it requires 10x-15x more data than VP9 to be decompressed by the CPU, and there's no hardware acceleration. https://kornel.ski/efficient-gifs https://kornel.ski/efficient-gifs There's false dichotomy between "animations" and "videos", mostly due to historical reasons and that older codecs (and AWebP) used 4:2:0 subsampling which made them blurry. VP9 supports alpha, 4:4:4 mode, and it's cheaper to decode (it's more complex, but using 10x less data offsets that), so it'd be best to forget that GIF and APNG ever existed.
- deleted 10y ago[deleted]
- skybrian 10y agoI wouldn't say it's a false dichotomy. Technical limitations result in different cultural and artistic usages. Twitter's arbitrary 140 character limit resulted in a distinct culture. And it seems like not being allowed to embed images at all on Hacker News is part of this site's distinct culture. And similarly with gifs. The question is whether you can move to a modern format (for better battery life) without also removing the limitations that resulted in a genre that's not just embedding an arbitrary video in a page.
- j3097736 10y agoAnimations can be easily edited with an image editor and most people probably don't want to spend time playing around with ffmpeg flags.
- caio1982 10y agoCould anyone more familiar with the field explain why is this better than the now-forgotten-well-i-guess MNG?
- nayuki 10y agoIt is said that the MNG decoder uses a few hundred kilobytes of code whereas APNG reuses more code from the PNG library. APNG is sort of a hack where the first frame is a normal PNG and subsequent frames are hidden in custom chunks. https://en.wikipedia.org/wiki/APNG https://en.wikipedia.org/wiki/APNG https://en.wikipedia.org/wiki/Multiple-image_Network_Graphics https://en.wikipedia.org/wiki/Multiple-image_Network_Graphic...
- striking 10y agoIt's not that the first frame is a normal PNG and that the rest of the frames are hidden. That's close, but it's not exact. PNGs are stored as files with multiple kinds of chunks inside. The relevant one here is the IDAT chunk, which holds image data. Most PNGs have just one IDAT, but APNGs carry multiple (one for each frame). Readers that don't care about animating will simply display the first IDAT and stop reading there. So it's a bunch of PNGs, coalesced into one, with some frame timing data. And the code for reading them is tiny if you already have a PNG library, because you display them like you would a regular PNG, but making sure to read out every IDAT, at the speed denoted by the acTL and fcTL chunks.
- TwoBit 10y agoHopefully there's some delta compression between the frames. Or something other than a dumb array of independent images.
- Dylan16807 10y agoThere's no true inter-frame compression, but frames layer on top of each other by default. Unchanged areas can be transparent.
- pjscott 10y agoIn case anybody is wondering how to roll out server-side support for this with a fallback to GIF: they've added "image/apng" to the Accept header for image requests. It's now "image/webp,image/apng,image/,/*;q=0.8". Sites like Imgur could start serving APNG images today.
- MichaelApproved 10y ago> Sites like Imgur could start serving APNG images today I think there'd be a problem when customers copy/paste an image from the site into another application that doesn't support APNG. Seems like a common use-case that would cause a lot of customer confusion.
- __float 10y agoHow is this worse than the "gifv" that Imgur introduced?
- RKearney 10y agogifv isn't a new file format at all. It's simply an mp4 video with gifv as the extension.
- tedunangst 10y agoHappened to me with a webp (on another site). And of course it had a .png extension because that was the original URL. After finally figuring it out, I had to go back and visit with another browser to get the right format.
- quasarj 10y agoFucking finally! I've been following this bug for at least 5 years. 5 years ago, when it was first proposed, this could have been a big deal. Not sure these days.. but I sure would love to see GIFs disappear..
- ksec 10y agoAPNG started in 2004, I am not sure why it took so long, 13 years before it is landed in Webkit and Blink / Chromium. The fight with MNG only lasted few years. PNG rejected the APNG proposal multiple times ( Why ? ) This is 2017, and when we look forward to 2020, we still dont have anything to replace gif, jpeg, apng, png. With Video we went from MPEG-1, MPEG-2, MPEG-4 ( Divx, Xvid, Rmvb, WMV, VP8 era ) H.264/AV to H.265/HEVC. Our Screen went from Low Res to 4K. Surely all these browser Vendor can sit down and at least talk about this. How about supporting bpg for a start? And lastly, I was naively thinking having APNG now would means x years before it is roll out to large number of consumers. But to my surprise even Chrome has a very high usage in China, 60% and growing. China is historically a region of IE6, I remember IE was still 40 - 50% in 2013 or 2014. You could now start to use APNG and soon have 60%+ of your users seeing it. Amazing.
- EGreg 10y agowebp still doesn't show up in iOS Safari! Too bad, I can't put simple vimeo previews that work on all web browsers as a result.
- gpvos 10y ago> PNG rejected the APNG proposal multiple times ( Why ? ) Because it is not a still image, and therefore should have a different file signature, MIME type, and file name extension. It is simply out of scope for PNG. When designing PNG as a replacement for GIF, they very deliberately and decidedly dropped the animation feature. Implementing APNG as an extension of PNG confuses categories that should not be confused.
- maxst 10y ago> When designing PNG as a replacement for GIF, they very deliberately and decidedly dropped the animation feature. The goal was to replace GIFs. And look what happened: "GIF" became synonymous with "animation".
- gpvos 10y agoThe main goal was to create a patent-free replacement for GIF, with a number of improvements for its main uses. GIF animation was not used much at that moment.
- Sephr 10y agoWhy? I thought animated WebP was superior in every aspect.
- londons_explore 10y agoIt is, but WebP has lots of politics involved since it is closely related to WebM, and there are staunch non-supporters of that. I would hazard a guess this is getting implemented now to try to make WebP look worse.
- haldean 10y agoWhy would Google implement something in their own browser to make their own image format look worse?
- usernam 10y agoWhen testing APNG for a local project last year which involved only Firefox, I was trying to save some space and have better color support using APNG. I found it to be quite buggy, slow, and even occasionally leading to crashes. I switched to webp. APNG was never given enough love, despite being a very useful format.
- wildpeaks 10y agoI'd be curious to know why they chose APNG over MNG.
- janus24 10y agoIf Edge follow we can almost use APNG in production http://caniuse.com/#feat=apng http://caniuse.com/#feat=apng
- mindcrime 10y agoSounds good, but I think they should add MathML support before this. It strikes me as absurd that Chrome doesn't yet support MathML. :-(
- samk117 10y agobeen waiting for this FOREVER
- mdf 10y agoAPNG is great, but animated FLIFs[1] would be even better. Looks like many of their former todos have been completed, and from the remaining ones, only three are related to the file format per se. Hopefully these, too, get completed in time. Although, seems like getting support for new file formats in browsers takes time... [1] http://flif.info/animation.html http://flif.info/animation.html
- tropo 10y agoI'd like all formats for both IMG and VIDEO tags. The gif animations are really video. They play in IMG tags; they are silent and do not have video controls. Put them in VIDEO tags and they ought to get video controls. Putting a proper video format in an IMG tag should work like an animated gif does: silent, without video controls. A plain image is a 1-frame video. It should work in a VIDEO tag, just to keep things consistent and orthogonal and all. A 1-frame video is an image; it should work with an IMG tag.