Hacker News Reader

Comment by crazygringo | Hacker News Reader

Optimizing for hinting has been rendered pointless by the fact that people zoom around on mobile devices.

You can no longer expect bitmap pixels to map to device pixels in any reasonable way. (Heck, just turn your desktop browser zoom to 90% or 110%.)

There was a time for hinting, but it's long gone.

View on HN

I don't understand what exactly zooming has to do with hinting. Fonts use hinting to great effect, and they're specifically designed to be displayed at different sizes and resolutions.

Hinting makes all vector drawings (including fonts) look better; but zooming means that bitmaps don't have an advantage, since a PNG will be no better than an unhinted SVG.

That's not true at all. Firstly, any PNG would have a limited resolution, requiring massive file sizes to be indistinguishable from an SVG. Secondly, browsers don't scale bitmaps with perfectly alias-free filtering, which means you get artifacts when scaling down and blurryness when scaling up.

Not to say, if you (easily on such devices) zoom to max zoom on a hi-res display, the resulting image is 8times zoomed in comparison to normal desktop PC image. And for same quality (sharpness), you wouldn't only need 8times larger PNG for this, but 8x8=64times larger PNG.

PNGs will not scale with pixel count, especially for rendered vector art. The memory footprint will scale though.

I meant, if you need perfect sharpness for the zoomed image, you need to supply bigger PNGs, otherwise they're blurred

Tloewald is saying that if you save vector art at an 8x scale PNG, it will not be 64 times larger. Most pixels in vector art are in contiguous blocks of either solid colors or linear gradients. After prefiltering, both cases reduce to a single value followed by a run of zeroes, which DEFLATE will compress extremely well.

So the only size increase really comes from the edges. In practice, this means that an 8x size increase will often only increase the file size by around 10x.

Modded down for making accurate statements? Awesome.

As an experiment, I took two vector art files I had, one very simple (a flat icon design) and the other very complex (a texture for a 3d model with lots of drop shadows and non-linear gradients).

The SVGs in question were 6kB and 568kB in size, respectively.

At 25% size (around 256x256px) the PNGs were 13kB and 30kB respectively.

At 100% size (around 1024x1024px) they were 60kB and 266kB respectively.

I scaled the complex image to 200% (2048x2048) just out of curiosity, and it became 841kB, roughly 28x the size of the smallest, which uses 1/64 as many pixels. It is interesting that the complex image seems to approach size growing with area at the high end of resolution. Of course, this is a sample of 2.

Reply on news.ycombinator.com