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!

Can you share the png file?

Sure, here it is.

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)

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

The second image is pixelated.

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

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

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.

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

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)

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.

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

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

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 (https://executive-education.minesparis.psl.eu/) to be https://executive-education.minesparis.psl.eu/wp-content/themes/psl/images/logo-header.svg

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

with st.sidebar:
    st.markdown('''
    <img src="https://executive-education.minesparis.psl.eu/wp-content/themes/psl/images/logo-header.svg">
    ''', 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!