5 ms·

Lose the dithering and use a sane image format.

by TheDudeMan 5y ago

phoenixdblack 5y ago
I'm completely with you on that. WebP should be the smallest, best supported solution right now.
- kome 5y ago
  WebP is a terrible practice and and it has no real value vs jpg https://pagepipe.com/dont-use-webp-image-format/ https://pagepipe.com/dont-use-webp-image-format/ - just because endorsed by google doesn't mean it's good (i would even argue, the contrary is true)
  - jazzyjackson 5y ago
    > Cloudinary says we can reduce that image’s page weight from a 4.6k PNG to a 1.5k webP image. That saves 3.1k. In big letters, they tell us that is a 32-percent savings. I'm not a mathematician but...
    - unicornporn 5y ago
      If we're comparing lossy compression mode, WebP is close to equal to MozJPEG for higher res images. Check the 1500 px comparison: https://siipo.la/blog/is-webp-really-better-than-jpeg https://siipo.la/blog/is-webp-really-better-than-jpeg
  - shepherdjerred 5y ago
    This page says that webp produces smaller images…
  - vbezhenar 5y ago
    This article seems outdated. Webp supported on Safari. Also this article itself confirms that webp saves image size, just author for some reason thinks that it does not matter. Well, this page is not so fast to open for me, definitely not 0.5 second, more like 5 seconds, so I wouldn't be the one listening to his advices.
    - supermatt 5y ago
      > Well, this page is not so fast to open for me, definitely not 0.5 second, more like 5 seconds, so I wouldn't be the one listening to his advices. its hosted on a raspberry pi and is front page of HN...
      - wartijn_ 5y ago
        I'm pretty sure the parent poster is talking about the page that says you shouldn't use Webp, not about low-tech machazine. The former claims to load in 0.5 seconds, the latter doesn't.
        supermatt 5y ago
        doh! I hate it when i end up viewing threads out of context :/
    - lifthrasiir 5y ago
      > This article seems outdated. Amazingly enough the page seems to be updated very recently ("November 2021", which was not present back in March [1]). [1] https://web.archive.org/web/20210305192950/https://pagepipe.com/dont-use-webp-image-format/ https://web.archive.org/web/20210305192950/https://pagepipe....
  - supermatt 5y ago
    their argument is that filesize doesnt matter because images download in parallel... thats just idiotic. 10x 100MB images downloading in parallel is still going to take longer than 10x 1kB
- JustFinishedBSG 5y ago
  Just use AVIF with a JPEG fallback...
  - lifthrasiir 5y ago
    AVIF is still in process of adoption [1], while WebP is virtually everywhere and you can even ignore fallbacks if you don't support MSIE [2]. Also while AVIF supports lossless images, its lossless compression is known to be weak and can be even inferior to PNG, while the WebP lossless mode is a dedicated algorithm and almost guaranteed to be better than PNG. This is a reason why JPEG XL can be better than AVIF in the long term, where AVIF is just another intra-frame format extracted from video codecs while JPEG XL is explicitly built to support both use cases. [1] https://caniuse.com/avif https://caniuse.com/avif [2] https://caniuse.com/webp https://caniuse.com/webp
justinpage 5y ago
I disagree: keep it.
tomcooks 5y ago
What's not sane about dithering? It has been used for a long time in print
- philipkglass 5y ago
  The dithered images on the site are approximations of continuous tone images. But dithered images of this sort are inefficient approximations, so the page is actually wasting bytes compared to just using plain old JPEGs with appropriate size/quality settings.
- berkut 5y ago
  While "needed" to produce "nice" (acceptable) looking 4-level images, it's likely breaking the filtering and compression steps of PNG format compression, making the image larger...
  - lelanthran 5y ago
    Would using GIF help? Then a 4-level image would use only a single byte for each pixel, and the entire file can be compressed if necessary. For example, here is the comparison of the first image on their page (file sizes in bytes), converted to gif with 4-level: 25700 sps_close.gif 43415 sps_close.png [EDIT] Interestingly enough, converting their image to a 7-level (1 for alpha) gif image gives you double the colors while reducing the image size by 17,715 bytes (~17.2kB)
    - ReactiveJelly 5y ago
      In the general case you aren't going to beat a lossy compression specialized for photos (JPEG) with a lossless compression trying to compress something you've added noise to (PNG / GIF) when trying to compress a photo
      - lelanthran 5y ago
        What does the general case have to do with it? At the target visual quality I doubt that jpg offers any size saving over a gif.
rahen 5y ago
I find the use of dithering fairly ingenious, even though the result looks like a printed newspaper. Essentially the goal for him was to achieve the best possible energy efficiency (CPU, bandwidth) and he came up with this idea. I'm pretty sure WebP would be much more CPU intensive.
- mnw21cam 5y ago
  The problem with dithering is that it is added noise (read: entropy) that needs to be preserved in the image file, which can make the compressed image file bigger. You can actually achieve quite good results by just cranking down the quality on a jpeg. You'd have to go really low quality before it looked as bad as these dithered images. Also, jpeg supports greyscale, although you might find that keeping the colour in there really doesn't add much to the file size at all anyway, especially if you set an appropriate chroma subsampling ratio.
- ReactiveJelly 5y ago
  JPEG looks subjectively better at the same bitrate and is probably hardware-decoded on many platforms. Unfortunately I lost the link for the comparison.

Lose the dithering and use a sane image format.

phoenixdblack 5y ago

I'm completely with you on that. WebP should be the smallest, best supported solution right now.

kome 5y ago
WebP is a terrible practice and and it has no real value vs jpg https://pagepipe.com/dont-use-webp-image-format/ https://pagepipe.com/dont-use-webp-image-format/ - just because endorsed by google doesn't mean it's good (i would even argue, the contrary is true)
- jazzyjackson 5y ago
  > Cloudinary says we can reduce that image’s page weight from a 4.6k PNG to a 1.5k webP image. That saves 3.1k. In big letters, they tell us that is a 32-percent savings. I'm not a mathematician but...
  - unicornporn 5y ago
    If we're comparing lossy compression mode, WebP is close to equal to MozJPEG for higher res images. Check the 1500 px comparison: https://siipo.la/blog/is-webp-really-better-than-jpeg https://siipo.la/blog/is-webp-really-better-than-jpeg
- shepherdjerred 5y ago
  This page says that webp produces smaller images…
- vbezhenar 5y ago
  This article seems outdated. Webp supported on Safari. Also this article itself confirms that webp saves image size, just author for some reason thinks that it does not matter. Well, this page is not so fast to open for me, definitely not 0.5 second, more like 5 seconds, so I wouldn't be the one listening to his advices.
  - supermatt 5y ago
    > Well, this page is not so fast to open for me, definitely not 0.5 second, more like 5 seconds, so I wouldn't be the one listening to his advices. its hosted on a raspberry pi and is front page of HN...
    - wartijn_ 5y ago
      I'm pretty sure the parent poster is talking about the page that says you shouldn't use Webp, not about low-tech machazine. The former claims to load in 0.5 seconds, the latter doesn't.
      - supermatt 5y ago
        doh! I hate it when i end up viewing threads out of context :/
  - lifthrasiir 5y ago
    > This article seems outdated. Amazingly enough the page seems to be updated very recently ("November 2021", which was not present back in March [1]). [1] https://web.archive.org/web/20210305192950/https://pagepipe.com/dont-use-webp-image-format/ https://web.archive.org/web/20210305192950/https://pagepipe....
- supermatt 5y ago
  their argument is that filesize doesnt matter because images download in parallel... thats just idiotic. 10x 100MB images downloading in parallel is still going to take longer than 10x 1kB
JustFinishedBSG 5y ago
Just use AVIF with a JPEG fallback...
- lifthrasiir 5y ago
  AVIF is still in process of adoption [1], while WebP is virtually everywhere and you can even ignore fallbacks if you don't support MSIE [2]. Also while AVIF supports lossless images, its lossless compression is known to be weak and can be even inferior to PNG, while the WebP lossless mode is a dedicated algorithm and almost guaranteed to be better than PNG. This is a reason why JPEG XL can be better than AVIF in the long term, where AVIF is just another intra-frame format extracted from video codecs while JPEG XL is explicitly built to support both use cases. [1] https://caniuse.com/avif https://caniuse.com/avif [2] https://caniuse.com/webp https://caniuse.com/webp

justinpage 5y ago

I disagree: keep it.

tomcooks 5y ago

What's not sane about dithering? It has been used for a long time in print

philipkglass 5y ago
The dithered images on the site are approximations of continuous tone images. But dithered images of this sort are inefficient approximations, so the page is actually wasting bytes compared to just using plain old JPEGs with appropriate size/quality settings.
berkut 5y ago
While "needed" to produce "nice" (acceptable) looking 4-level images, it's likely breaking the filtering and compression steps of PNG format compression, making the image larger...
- lelanthran 5y ago
  Would using GIF help? Then a 4-level image would use only a single byte for each pixel, and the entire file can be compressed if necessary. For example, here is the comparison of the first image on their page (file sizes in bytes), converted to gif with 4-level: 25700 sps_close.gif 43415 sps_close.png [EDIT] Interestingly enough, converting their image to a 7-level (1 for alpha) gif image gives you double the colors while reducing the image size by 17,715 bytes (~17.2kB)
  - ReactiveJelly 5y ago
    In the general case you aren't going to beat a lossy compression specialized for photos (JPEG) with a lossless compression trying to compress something you've added noise to (PNG / GIF) when trying to compress a photo
    - lelanthran 5y ago
      What does the general case have to do with it? At the target visual quality I doubt that jpg offers any size saving over a gif.

rahen 5y ago

I find the use of dithering fairly ingenious, even though the result looks like a printed newspaper. Essentially the goal for him was to achieve the best possible energy efficiency (CPU, bandwidth) and he came up with this idea. I'm pretty sure WebP would be much more CPU intensive.

mnw21cam 5y ago
The problem with dithering is that it is added noise (read: entropy) that needs to be preserved in the image file, which can make the compressed image file bigger. You can actually achieve quite good results by just cranking down the quality on a jpeg. You'd have to go really low quality before it looked as bad as these dithered images. Also, jpeg supports greyscale, although you might find that keeping the colour in there really doesn't add much to the file size at all anyway, especially if you set an appropriate chroma subsampling ratio.
ReactiveJelly 5y ago
JPEG looks subjectively better at the same bitrate and is probably hardware-decoded on many platforms. Unfortunately I lost the link for the comparison.