5 ms·

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 interp

by dvt 5y ago

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.

stjo 5y ago
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-lowtech-website/ https://solar.lowtechmagazine.com/2018/09/how-to-build-a-low...
- arc-in-space 5y ago
  Except dithering is not great for modern compression algorithms, making the endeavour mostly performative.
  - VyperCard 5y ago
    Yeah, I reduced their file sizes in their examples by just setting jpeg compression levels to 7% and had actual grayscale
- mlok 5y ago
  AVIF and WEBP formats give pretty good compression : https://squoosh.app/editor https://squoosh.app/editor * original colourful image : https://homebrewserver.club/images/lime2.png 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.
  - mlok 5y ago
    Lossless compression of their 4 colours dithering PNG (34 kB) : * AVIF : 69 kB (+100%) * WEBP : 27 kB (-22%)
elbasti 5y ago
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.
- dvt 5y ago
  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 https://en.wikipedia.org/wiki/Pixel-art_scaling_algorithms

by dvt 5y ago

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.

stjo 5y ago

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-lowtech-website/ https://solar.lowtechmagazine.com/2018/09/how-to-build-a-low...

arc-in-space 5y ago
Except dithering is not great for modern compression algorithms, making the endeavour mostly performative.
- VyperCard 5y ago
  Yeah, I reduced their file sizes in their examples by just setting jpeg compression levels to 7% and had actual grayscale
mlok 5y ago
AVIF and WEBP formats give pretty good compression : https://squoosh.app/editor https://squoosh.app/editor * original colourful image : https://homebrewserver.club/images/lime2.png 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.
- mlok 5y ago
  Lossless compression of their 4 colours dithering PNG (34 kB) : * AVIF : 69 kB (+100%) * WEBP : 27 kB (-22%)

elbasti 5y ago

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.

dvt 5y ago
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 https://en.wikipedia.org/wiki/Pixel-art_scaling_algorithms