PNG compression level

[john-at-satlantic]

Saved PNG images appear to have JPEG-like artifacts in Microsoft Paint and Microsoft Image Viewer. Probably due to those programs having trouble with compressed PNG.

The artifacts should go away if the compression level is reduced to 0 or 1.

[john-at-satlantic]

Attached is screenshot of a saved file: on the left in Irfanview, on the right in Microsoft Photo Viewer.

[etpinard]

Is that something we can do using browser-side canvas.toDataURL?

I found https://www.npmjs.com/package/canvas-png-compression but it seems like a half/hacky solution.

---

In the meantime, I'll recommend using

Plotly.toImage(gd, { scale: /* something greater than 1 */))

added in #1979 to scale up your exports.

[john-at-satlantic]

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
describes quality option only available for jpeg and webp. Otherwise quality = 0.92, which may be below the threshold of what I was hoping to achieve.

It is worthwhile trying the scale option.

[etpinard]

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
describes quality option only available for jpeg and webp

Nice find. Thanks for the link!

---

I can't guarantee we'll come up with a solution to this ticket. But thanks for pointing this out.

[alexcjohnson]

My impression was PNGs use lossless compression so if your viewer can comprehend the image at all, it will get it perfectly correct, right? PNG compression really just seems to be an optimization process potentially trading file size for CPU cycles, but without changing the outcome.

I wonder if the difference here is just how these different applications choose to display scaled-up pixels. Applications meant for editing (Paint, and seems like this has spilled over into MS Photo Viewer) might opt to show each pixel as a brick of constant color, while applications tuned more for viewing (Irfanview) smooth this out and may even try to infer subpixel information from neighboring pixels.

If that's the case, this issue is not within the purview of plotly.js at all. If not, can you give an example of another application that performs better when compared at the same zoom level in Irfanview vs MSPV?

[alexcjohnson]

@john-at-satlantic feel free to reopen if ^^ does not capture what's happening here.