Hacker News Reader

Comment by b2ccb2 | Hacker News Reader

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

[2] https://ece.uwaterloo.ca/~z70wang/publications/msssim.pdf

[3] https://github.com/danielgtaylor/jpeg-archive

[4] http://krisdedecker.typepad.com/.a/6a00e0099229e88833022ad3b...

View on HN

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/ -- at least this does not need JS.

Those are compression techniques, they do not require js, nor a different client and work with the jpeg standard.

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.

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-...

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

Reply on news.ycombinator.com