Dcc Graph makes image blurry

Dash Python
1

I want to display an image to the user that allows them to easily zoom and pan. They should also be able to make a selection of the image, after which the screen automatically fits to that selection. This functionality is all built-in in the dcc.graph component, so I figured that would be my best bet. It all works fine, except the graph makes my image extremely blurry when zoomed out. Zooming in works fine and all details are visible, but the zoomed out image is not clear. Does anyone know what I can do?

import dash
from dash import html, dcc
import base64

app = dash.Dash(__name__)

# Encode image as Data URL
image_path = 'img.png'

encoded_image = base64.b64encode(open(image_path, 'rb').read()).decode('utf-8')

# # Define image data
image_data = [{
    'type': 'image',
    'source': f'data:image/png;base64,{encoded_image}',
    'x': 0,
    'y': 0,
    'width': 500,
    'height': 500,
}]

app.layout = html.Div([
    dcc.Graph(
        id='image-graph',
        figure={
            'data': image_data,
            'layout': {
                'xaxis': {'showticklabels': False, 'visible': False},
                'yaxis': {'showticklabels': False, 'visible': False},
            }
        },
        style={'width': '100%', 'height': '100%'}
    ),
], style={'width': '100%', 'height': '100vh'}, id='main')