Hacker News new | past | comments | ask | show | jobs | submit login

Small technical nit: I love the dithered images and the retro feel, but their CSS should specify `image-rendering: pixelated` to make sure browsers don't interpolate the pixels.



Whoa, TIL. It actually makes quite a big difference. Nevertheless I don't actually think being pixelated is much of a stylistic choice.

Here [1] they explain how they use dithering to minimise their bandwidth and computational costs.

[1] - https://solar.lowtechmagazine.com/2018/09/how-to-build-a-low...


AVIF and WEBP formats give pretty good compression : https://squoosh.app/editor

* original colourful image : https://homebrewserver.club/images/lime2.png

* dithering/PNG on this site : 34 kB

* AVIF (quality 16 for similar "readability") : 21 kB

* WEBP (quality 16 for similar "readability") : 24 kB

But the "nice dithering style" is lost in the process, obviously.


Lossless compression of their 4 colours dithering PNG (34 kB) :

* AVIF : 69 kB (+100%)

* WEBP : 27 kB (-22%)


Except dithering is not great for modern compression algorithms, making the endeavour mostly performative.


Yeah, I reduced their file sizes in their examples by just setting jpeg compression levels to 7% and had actual grayscale


Wouldn't the correct css for the dithered image be `crisp-edges`? From the specification:

> The image must be scaled with an algorithm that preserves contrast and edges in the image, and which does not smooth colors or introduce blur to the image in the process. [...] This value is intended for pixel-art images, such as in browser games.


No, `crisp-edges` allows for algorithms[1] like HQ2X and 2xSaI, which would not work with the dithered images, whereas `pixelated` enforces nearest-neighbor scaling.

[1] https://en.wikipedia.org/wiki/Pixel-art_scaling_algorithms




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: