4 ms·

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 th

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/Element/use https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/E...

xp84 1y ago
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 https://cdn-icons-gif.flaticon.com/6172/6172533.gif
- Sharlin 1y ago
  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.
  - xp84 1y ago
    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.
- supermatt 1y ago
  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.
- beejiu 1y ago
  GIFs scale quadratically with their resolution and they don't even support an alpha channel, which makes them inflexible.
  - xp84 1y ago
    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.

xp84 1y ago

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 https://cdn-icons-gif.flaticon.com/6172/6172533.gif

Sharlin 1y ago
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.
- xp84 1y ago
  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.
supermatt 1y ago
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.
beejiu 1y ago
GIFs scale quadratically with their resolution and they don't even support an alpha channel, which makes them inflexible.
- xp84 1y ago
  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.