3 ms·

The dithering is nice for some images but it takes some details on graphs etc.. The example image given can be re-compressed using techniques like structural s

by b2ccb2 8y ago

The dithering is nice for some images but it takes some details on graphs etc.. The example image given can be re-compressed using techniques like structural similarity (SSIM)[1] or Multi-scale structural similarity (2003 Paper)[2]. Using jpeg-archive[3] I resized the example image from the blog[4] with decent results: /tmp ls -1sh *.jpg *.png | sort -nr 740K 6a00e0099229e88833022ad3b23825200b-750wi.png 100K 6a00e0099229e88833022ad3b23825200b-750wi.jpg 64K small-fry.jpg 56K mpe.jpg 24K ms-ssim.jpg [1] https://en.wikipedia.org/wiki/Structural_similarity https://en.wikipedia.org/wiki/Structural_similarity [2] https://ece.uwaterloo.ca/~z70wang/publications/msssim.pdf https://ece.uwaterloo.ca/~z70wang/publications/msssim.pdf [3] https://github.com/danielgtaylor/jpeg-archive https://github.com/danielgtaylor/jpeg-archive [4] http://krisdedecker.typepad.com/.a/6a00e0099229e88833022ad3b23825200b-750wi http://krisdedecker.typepad.com/.a/6a00e0099229e88833022ad3b...

ktpsns 8y ago
If I understand you correctly, you propose a image format which should provide a better quality for less file size. However, to implement an in-browser client-side reader, one probably needs a javascript library, and this will blow up the size again [Side note: Actually I am surprised the site uses JavaScript at all, being that static]. Another proposal for image compression is to fall back on SVG, c.f. https://jmperezperez.com/svg-placeholders/ https://jmperezperez.com/svg-placeholders/ -- at least this does not need JS.
- b2ccb2 8y ago
  Those are compression techniques, they do not require js, nor a different client and work with the jpeg standard.
  - claudiulodro 8y ago
    To implement the improvements you suggest on this site (which appears to be a static site), the best way would be to have your proposed image compression as part of the static site preprocessor, correct? Just trying to understand how it would be implemented, as this site is an interesting idea but the dithered images would likely not have mass-appeal.
    - wolfgang42 8y ago
      Yes, you'd just run all of the images through jpeg-recompress (from the GitHub repo linked above). They're already doing something like this to dither, so it's just a question of swapping out which command to run. Incidentally, even where PNG is appropriate (images with crisp edges, such as text and icons) you can frequently get a large size savings by applying zopflipng, which uses an alternative GZIP compression algorithm to get a higher-efficiency compression, at the cost of greater CPU use for encoding.[1] [1]: https://blog.codinghorror.com/zopfli-optimization-literally-free-bandwidth/ https://blog.codinghorror.com/zopfli-optimization-literally-...
gwern 8y ago
What kind of compression do you get if you make a (colorized) copy of the dithered version and then use lossy compression on it?

by b2ccb2 8y ago

ktpsns 8y ago

If I understand you correctly, you propose a image format which should provide a better quality for less file size. However, to implement an in-browser client-side reader, one probably needs a javascript library, and this will blow up the size again [Side note: Actually I am surprised the site uses JavaScript at all, being that static]. Another proposal for image compression is to fall back on SVG, c.f. https://jmperezperez.com/svg-placeholders/ https://jmperezperez.com/svg-placeholders/ -- at least this does not need JS.

b2ccb2 8y ago
Those are compression techniques, they do not require js, nor a different client and work with the jpeg standard.
- claudiulodro 8y ago
  To implement the improvements you suggest on this site (which appears to be a static site), the best way would be to have your proposed image compression as part of the static site preprocessor, correct? Just trying to understand how it would be implemented, as this site is an interesting idea but the dithered images would likely not have mass-appeal.
  - wolfgang42 8y ago
    Yes, you'd just run all of the images through jpeg-recompress (from the GitHub repo linked above). They're already doing something like this to dither, so it's just a question of swapping out which command to run. Incidentally, even where PNG is appropriate (images with crisp edges, such as text and icons) you can frequently get a large size savings by applying zopflipng, which uses an alternative GZIP compression algorithm to get a higher-efficiency compression, at the cost of greater CPU use for encoding.[1] [1]: https://blog.codinghorror.com/zopfli-optimization-literally-free-bandwidth/ https://blog.codinghorror.com/zopfli-optimization-literally-...

gwern 8y ago

What kind of compression do you get if you make a (colorized) copy of the dithered version and then use lossy compression on it?