Image visualization: Blurred pixels in st_folium() VS crisp in folium_static()

🧩 Custom Components streamlit-folium
1

Hello Streamlit Community,

Intro:
I’m working on a project where I visualize image data using the st_folium library in Streamlit.

Problem:
I’ve encountered an issue with the sharpness of the image pixels when using st_folium(). The image appears blurred/aliased, and it seems like the pixelated parameter isn’t affecting the output as expected. This issue persists whether I set pixelization=False or pixelization=True.

My investigation:
Interestingly, when I use folium_static() for the same task, the images are rendered as expected: sharp/crisp pixels with pixelization=True, and aliased pixel corners with pixelization=False.

I’ve created a minimal example Streamlit app below, which visualizes the same image file using both st_folium() and folium_static(), with a switch to toggle the pixelation setting.
You can se that st_folium image is always blurred/aliased.

I’d appreciate any insights or suggestions to resolve this issue.

The link to the GitHub repo with the app code to replicate the issue quickly:

Thank you!

PS.
Copying ‘issue replicating code’ here as well:

import streamlit as st
import folium
from streamlit_folium import st_folium, folium_static
import folium.raster_layers

st.set_page_config(
        layout = "wide",
        initial_sidebar_state="collapsed")


# Function to create a folium map with an image overlay
def create_map(pixelated):
    map_ = folium.Map(location=[0, 0], zoom_start=2)
    image = folium.raster_layers.ImageOverlay(
        image='data/temp/img_layer.tiff',
        bounds=[[-90, -180], [90, 180]],
        pixelated=pixelated,
        name="Raster Layer"
    )
    image.add_to(map_)
    return map_


pixelated = st.checkbox("Pixelated Parameter", value=True)

# Layout with two columns
import streamlit as st
import folium
from streamlit_folium import st_folium, folium_static
import folium.raster_layers

st.set_page_config(
        layout = "wide",
        initial_sidebar_state="collapsed")

# URL of the image hosted on GitHub or other cloud service
image_url = 'https://raw.githubusercontent.com/andmsx/folium_issue/main/img_layer.tiff'


# Function to create a folium map with an image overlay
def create_map(pixelated):
    map_ = folium.Map(location=[0, 0], zoom_start=2)
    image = folium.raster_layers.ImageOverlay(
        image = image_url,
        bounds=[[-90, -180], [90, 180]],
        pixelated=pixelated,
        name="Raster Layer"
    )
    image.add_to(map_)
    return map_


pixelated = st.checkbox("Pixelated Parameter", value=True)

# Layout with two columns
col1, col2 = st.columns([1, 1], gap="medium")

# Column 1: st_folium
with col1:
    st.write("st_folium visualization")
    map1 = create_map(pixelated=pixelated)
    st_folium(map1, use_container_width=True, height=600)

# Column 2: folium_static
with col2:
    st.write("folium_static visualization")
    map2 = create_map(pixelated=pixelated)
    folium_static(map2, height=600)