PNG image loses quality when width is reduced

[Julie_GA]

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?
Thanks a lot!

[blackary]

Can you share the png file?

[Julie_GA]

Sure, here it is.

[Goyo]

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)

[Julie_GA]

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.

[Goyo]

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

[Julie_GA]

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

[Goyo]

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.

[Julie_GA]

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

[Goyo]

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.

[chiaramc]

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

[DominiquePaul]

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

[dataprofessor]

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!

[coolshades]

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