Low quality of 'download plot as png' in browser

Hi,
I plot a lot of graphs as .html files, every once in a while however, I need to save a plot as a png file. The .html files are stored locally so I want to use the ‘download plot as png’ option in the browser. However, this returns only very small, low quality .pngs. I am aware of the export feature of plotly online. I cannot use this feature though since the plot needs to be saved in my account. For community users the plot size is restricted to ~500 kB and all my plots are larger.

Is there any workaround for this?

Thanks!

1 Like

You can try calling Plotly.toImage and setting a larger width and height.

How would I do that from within the browser or do I have to set this from somewhere else?

1 Like

Thank you, it took me a second to understand.

Just in case to s/o runs into the same problem:

You have to set the ‘width’ and ‘height’ attributes to be able to save a plot of a given resolution from within the browser.
My assumption was that the saved .html file was scale-less since it always perfectly fit my browser window size.

Hi etienne,

the plot won’t change correctly. The plot is getting bigger but the text in it won’t change.

Has there been a solution to this? Is this a known issue? It was working perfectly for me but suddently the in-browser image save (a huge timesaver) started saving very low quality images.

@antrg Could you please have a look at the last comment. Thanks.

@archmoj I’m not quite sure what the problem is here. Is there a Codepen demonstrating the issue?

@SHxKM could you please provide an example?

The issue is with HiDPI screens. Plotly.toImage doesn’t take the so called ‘scale factor’ into account and so the images look blurry on high pixel density (Retina) screens.

I’m also seeing this on my 2015 MacBookPro11,4, which has a 2k HiDPI screen. Both the text and graphics within the PNG are blurry. It’d be a nice productivity boost to have this feature corrected from within the browser. While the image quality isn’t terrible, we like our presentations to look sharp. If this forum scales my example image down, it’s likely that you won’t even notice the degradation in quality.

Just for reference, I ended up using the html2canvas library which does support window.devicePixelRatio

Not sure if this is still a problem, but if I understand your issue correctly you can customise the “Download Plot Button” via the plotting configuration. More specifically by increasing the ‘scale’ field under ‘toImageButtonOptions’ it downloads png with greater resolution (tested in the browser in a jupyter notebook - kernel python3.9, on macOS Big Sur). For me setting the ‘scale’ field to 20 did the trick.
For details on how to change the plotting config in python (must be similar directly in js) see Configuration | Python | Plotly

Thanks, this should work in JS as well
https://plotly.com/javascript/configuration-options/#customize-download-plot-options
but the issue is as @ slfan2013 pointed out that increasing the scale increases only the size of the graph, not of any text associated with it (labels, values along the axes etc)