PNG image loses quality when width is reduced

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!

1 Like