Hacker News Reader

Comment by jakubmazanec | Hacker News Reader

GIFs don't scale well (including 2x version is not enough); with CSS (and SVG) you get crisp graphics at any scale. And of course you can use asset SVG files that are cached [1].

[1] https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/E...

View on HN

Citation needed for 'GIFs don't scale well' (in terms of dimensions. They certainly don't scale well when abused as idiotic versions of videos.)

Is this the frontend developer's version of "Postgres doesn't scale. Mongo is Webscale"?

Here's a 640x640 GIF. Scales just fine for me, to half-size or to 100px. I'm using a "Retina" screen. https://cdn-icons-gif.flaticon.com/6172/6172533.gif

That GIF weighs one third of a megabyte. You could literally fit a fully featured bespoke 2D/3D rendering engine in the same space. Now, it could probably be optimized, but an aPNG would likely be vastly smaller. And these days aPNG is even reasonably widely supported! That said, an animated SVG would likely be the best option.

What is your point? The random first GIF I found is enormous in pixel size and many frames, thus large in filesize, but a few dancing green blobs would be tiny. You don't need that one's 640px size to scale, and 2x will work perfectly fine.

I’m looking at that on an iPhone, and if I scale (in either direction, pinch or zoom) it I can see a semitransparent halo around it, I would assume from the antialiasing.

So that certainly isn’t scaling well for me.

GIFs scale quadratically with their resolution and they don't even support an alpha channel, which makes them inflexible.

You really don't need an alpha channel for some tiny lineart thing such as the article's example. A single color would even be perfectly sufficient to make an attractive 'dancing bars' animation to indicate "sound is happening." That's my point. Some overpaid "UX designer" decided something wildly complex was needed here, and they're wrong.

In the broader sense, especially in the 'flat design' era where we don't use gradients or complex backgrounds anywhere, a 256-color GIF with its 1-bit alpha (plain transparency) will work perfectly fine to do an animated flat non-3d, non-photorealistic icon that wiggles or whatever, on a background that is almost certainly a plain flat color, and not complex enough to need 16 million shades of transparency.

Reply on news.ycombinator.com