Hacker News Reader

Comment by panstromek | Hacker News Reader

Yes, you're right to be worried. It's really not great fit for micro interactions (`like/unlike` buttons etc.). If you're animating a spinner, then that animation will probably take more resources and be more fragile than the thing you're showing the spinner for.

GIF is still probably worse, though, I wouldn't do that. Your best bet is to try to do what I hinted and want to try at some point: extract frames from the animation as svg, put it into a sprite img (and run svgo on it) and then animate that sprite with background-position or css transform.

Extracting the frames can be done with puppeteer, there's a tool for that https://github.com/transitive-bullshit/puppeteer-lottie, it can output video or gif, but I'm not sure if it can do the whole sprite thing, yet. You might need to do that manually.

[edit]: I'm assuming you talk about the web. Mobile lottie might be different and maybe fine, but I don't have experience with that.

View on HN

Thanks for the ideas. This is indeed the web. The Lottie stuff in question is a couple of decorative, 100x100 animated line art drawings.

When I dug into the Figma file, they were extractable as 450kb, 640x640 animated GIFs.

I ran one of those through some website called ezgif which converted it to a 100x100 animated webp image at 64kb. Think it's lossy but quality looks acceptable for our purposes. Gimp didn't seem to be able to resize an animated GIF properly.

This seems like a roundabout way to get where we want to be, but a 64kb animated webp seems like a much better situation than embedding the Lottie player js.

Why is GIF worse (I'm not a frontend developer, so I'm genuinely curious)?

GIF is a format from the 1980s that has not changed or improved one bit since. It's limited to a 256-color palette per frame, which on top of looking bad, will massively bloat your file size as a common strategy to make it look less bad is to re-select a new palette each frame. It's massively worse than a modern lossless (or perceptually lossless) video codec and there are no real benefits to it except backwards compatibility on account of the whole "unchanged in 40 years" bit.

Most sites and platforms silently swap out uploaded GIFs for re-encoded MP4s with no loss in quality due to how awful GIF is as a format. Telegram reports saving 95% on storing GIFs by doing that instead.

https://telegram.org/blog/gif-revolution

GIF animations will autoplay where video embeds often will not esp on mobile. For a looping low color vector animation it might not be too bad.

Video embeds can be made to autoplay, browsers typically don't block them if the video is muted, and JS can be used to nudge them along if they do.

With the automatic conversion of GIFs into video, this also isn't a property that can be relied on for GIF as an end-user. See Xitter, where their buggy scroll position detection takes over playing and pausing GIFs.

Reply on news.ycombinator.com