PNG image loses quality when width is reduced

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:

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

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

1 Like

Can you share the png file?

1 Like

Sure, here it is.

1 Like

Looks all right from my side.

import streamlit as st

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

1 Like

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


The second image is pixelated.

1 Like

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

1 Like

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

1 Like

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.

1 Like

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

1 Like

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 = ""
st.image("logo_mines.png", output_format="PNG", width=200)
st.image(url, output_format="PNG", width=200)

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.

1 Like

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

1 Like

I have the same issue. Any help? Is it possible to get this to work with a local file? :slight_smile:

1 Like

Hi @Julie_GA

For a super crisp resolution, you can use the SVG version of the image. The image SVG URL was found on the website ( to be

Here’s a simple way to display this via st.markdown and HTML:

with st.sidebar:
    <img src="">
    ''', unsafe_allow_html=True)

As it’s a vector image it does not pixelate when zoomed in:

If you’d like to use a local SVG image, you can implement what is mentioned in this post (Display SVG).

Hope this helps!

1 Like

This is a major bug in a very commonly used function.
I hope they are prioritising this fix.

1 Like