PNG image loses quality when width is reduced

🎈 Using Streamlit
1

Hey guys,

I’m having the same issue as described in this topic: I have a PNG image that I need to appear smaller (it’s a logo basically), but when I reduce its width it loses quality and appear as if is was a low res image.

Here’s how I’m displaying the image:

Code snippet:

st.sidebar.image("logo_mines.png", output_format = "PNG", width = 200)

Here’s what it looks like in full width:

image
image998×604 40 KB

And here’s what it looks like when width is set to 200:

image
image998×604 41.8 KB

Any ideas on where the issue might come from? :thinking:
Thanks a lot!

2

Can you share the png file?

3

Sure, here it is.

4

Looks all right from my side.

import streamlit as st

url = "https://raw.githubusercontent.com/julielerudulier/streamlit/main/logo_mines.png"
st.sidebar.image(url, output_format="PNG")
st.sidebar.image(url, output_format="PNG", width=200)

test
test805×919 76.3 KB

5

You’re right, it looks fine on your end, hmm…
Here’s what it looks like on my side if I do the same:

image
image1050×70 15.9 KB

image

The second image is pixelated.

6

Maybe related: the second image in the picture you posted is more than 400 pixels wide.

7

Right! That’s just because of the size of the screenshot though. The (low res) image on my app is 200 pixels wide:

image
image1920×517 102 KB

8

We can only see the screenshot, not the app, so it is better if the resolutions match. It would be even better if you can deploy a public app in streamlit cloud showing the issue.

9

Sure, my app has already been deployed. You can access it here.

10

There seems to be an issue where the rendering is different depending on whether you use a local path or a URL. Try this:

url = "https://raw.githubusercontent.com/julielerudulier/streamlit/main/logo_mines.png"
st.image("logo_mines.png", output_format="PNG", width=200)
st.image(url, output_format="PNG", width=200)

app
app677×666 56 KB

In the first case, an scaled-down version of the image is served from the application itself. The second image is served as is from github and the scaling is left to the browser.

11

Hey I’m having the same exact issue, is there a way to get this to work properly without having to use a URL?