5 ms·

A resonable icon format would be a vector file plus (at least optionally) 16 and 32px bitmap images. A 16x16 px icon is still common (eg toolbar buttons at desk

A resonable icon format would be a vector file plus (at least optionally) 16 and 32px bitmap images. A 16x16 px icon is still common (eg toolbar buttons at desktop resolutions lower than 4K) and as evident by the article there is no way of rasterizing a vector image to 16x16 and preserving anything but a blurry mess. At least not without using a very clever (AI could possibly do it) rasterizer. The 16x16 representation is often completely different from the vector or 64x64 version. If you draw a clock, the large version is 3D has numbers and 3 hands. The smaller versions is 2D, has 2 hands and no digits.

Findecanor 3y ago
HVIF supports having different shapes at different levels-of-detail in one file.
- alkonaut 3y ago
  The thing is that at 16x16 target res it's probably not worth having another vector representation: you can just as well store the raster at that resolution.
nox101 3y ago
> there is no way of rasterizing a vector image to 16x16 and preserving anything but a blurry mess. Deep learning suggests differently?
- 8n4vidtmkvmk 3y ago
  So instead of 5kB bitmap we'll do a 768B vector + a 5GB diffusion model, plus waste 20 seconds just to render it.
  - nox101 3y ago
    You got me on the model size but speed wise there are algos that run fast https://fastsdxl.ai/ https://fastsdxl.ai/
    - erhaetherth 3y ago
      Those are pretty fast but I suspect spending nearly any amount of time running some model to spit out an icon is too much time. I should be able to load a directory with 1000s or 10s of thousands of files extremely quickly.
LukeShu 3y ago
Many of us look at https://github.githubassets.com/favicons/favicon.svg https://github.githubassets.com/favicons/favicon.svg at 16x16 every day, and wouldn't call it a blurry mess.
- bobbylarrybobby 3y ago
  I think that's because our screens all have 2x pixel density, so the icon is actually a half-size 32x32 image.
foresto 3y ago
> At least not without using a very clever (AI could possibly do it) rasterizer. Or something like the hinting bytecode in certain TrueType fonts? https://en.wikipedia.org/wiki/Truetype#Hinting_language https://en.wikipedia.org/wiki/Truetype#Hinting_language
- alkonaut 3y ago
  Making it hints instead of a 16x16 raster could save some weight. But 16x16 isn't a lot of data. Saving half of it but having to do the kind of magic trickery that goes on in TrueType seems a bit excessive
wongarsu 3y ago
It might just be badly chosen example images, but the images in the article make a good case to me that even up to 64x64 bitmaps are superior. In the upscaled 32x32 computer icon the bitmap has a much better keyboard with defined keys, compared to the SVG and HVIF where it's a blurry mess. Similarly in the icon of the tape recorder the buttons (one of the key features of a tape recorder) are much more recognizable in the bitmaps from 16x16 up to 64x64 because the outlines are always a pixel wide, while in the vector they get lost in antialiasing on anything smaller than 128x128. Those might not be issues on more stylistic icons like many logos. The HN logo works fine as a single vector, same for the github icon or the wikipedia logo. But for more complex icons that depict real-world objects making vectors work over a range of scales is really hard

Findecanor 3y ago

HVIF supports having different shapes at different levels-of-detail in one file.

alkonaut 3y ago
The thing is that at 16x16 target res it's probably not worth having another vector representation: you can just as well store the raster at that resolution.

nox101 3y ago

> there is no way of rasterizing a vector image to 16x16 and preserving anything but a blurry mess. Deep learning suggests differently?

8n4vidtmkvmk 3y ago
So instead of 5kB bitmap we'll do a 768B vector + a 5GB diffusion model, plus waste 20 seconds just to render it.
- nox101 3y ago
  You got me on the model size but speed wise there are algos that run fast https://fastsdxl.ai/ https://fastsdxl.ai/
  - erhaetherth 3y ago
    Those are pretty fast but I suspect spending nearly any amount of time running some model to spit out an icon is too much time. I should be able to load a directory with 1000s or 10s of thousands of files extremely quickly.

LukeShu 3y ago

Many of us look at https://github.githubassets.com/favicons/favicon.svg https://github.githubassets.com/favicons/favicon.svg at 16x16 every day, and wouldn't call it a blurry mess.

bobbylarrybobby 3y ago
I think that's because our screens all have 2x pixel density, so the icon is actually a half-size 32x32 image.

foresto 3y ago

> At least not without using a very clever (AI could possibly do it) rasterizer. Or something like the hinting bytecode in certain TrueType fonts? https://en.wikipedia.org/wiki/Truetype#Hinting_language https://en.wikipedia.org/wiki/Truetype#Hinting_language

alkonaut 3y ago
Making it hints instead of a 16x16 raster could save some weight. But 16x16 isn't a lot of data. Saving half of it but having to do the kind of magic trickery that goes on in TrueType seems a bit excessive

wongarsu 3y ago

It might just be badly chosen example images, but the images in the article make a good case to me that even up to 64x64 bitmaps are superior. In the upscaled 32x32 computer icon the bitmap has a much better keyboard with defined keys, compared to the SVG and HVIF where it's a blurry mess. Similarly in the icon of the tape recorder the buttons (one of the key features of a tape recorder) are much more recognizable in the bitmaps from 16x16 up to 64x64 because the outlines are always a pixel wide, while in the vector they get lost in antialiasing on anything smaller than 128x128. Those might not be issues on more stylistic icons like many logos. The HN logo works fine as a single vector, same for the github icon or the wikipedia logo. But for more complex icons that depict real-world objects making vectors work over a range of scales is really hard