Rendering of images in dash/plotly

Dash Python
1

I am making an app to aid pixel label leveling for a segmentation task by having the user easily edit the suggestion from a partially trained CNN. The idea of using dash for this is taken from this example:

https://dash-image-processing.plot.ly/

This use the image as a background, similar to the examples here: https://plot.ly/python/images/

My issue is that the image renders by default with smoothing of the pixels, but I want the pixels to be sharp. I’ve tried adding a .css file in my assets folder with " image-rendering: pixelated;", but it doesn’t help. Any suggestions on how to help? Code from https://plot.ly/python/images/ with something to make the images show with sharp pixels would be great.

1 Like
2

Turned out this can be fixed either by css or simply adding

style = {‘image-rendering’: ‘pixelated’})
to the Div containing the graph.

1 Like
3

Hi! I seem to be having the same issue… I have been adding a logo to a plotly express graph and it comes out super blurry each time… However, I am working out of a jupyternotebook and do not now anything about assets folders or using CSS. Do you know how / if I can do the same thing within jupyter notebook? THank you!!!