How to Reduce Image Size in VS Code Jupyter Notebook Display without Altering figsize or dpi?

[Mingzefei]

Problem Description:

I am currently using a Jupyter Notebook inside VS Code to generate plots using matplotlib. The final plots must adhere to specific figsize and dpi settings for journal submission, so I cannot alter these parameters. However, when displaying the figures in VS Code, they appear excessively large, occupying the full width of the output cell. My goal is to reduce the visual size of the image in the VS Code output cell without affecting the actual dimensions of the saved figure.

Currently, the images generated by matplotlib are rendered to take up the entire width of the cell (as seen in the screenshots), but I would like them to be rendered at half of that size.

Example Code:

Here’s an example of the general code structure I’m using:

import matplotlib.pyplot as plt
import pandas as pd

# Creating a sample dataset
data = {
    "X": [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0],
    "Y": [0.01, 0.04, 0.09, 0.16, 0.25, 0.36, 0.49, 0.64, 0.81, 1.00]
}

df = pd.DataFrame(data)

# Plotting the data
plt.figure(figsize=(6, 4), dpi=300)
plt.plot(df["X"], df["Y"], '-o')
plt.xlabel("X-axis Label")
plt.ylabel("Y-axis Label")
plt.show()

What I've Tried So Far:

Using CSS/HTML scaling in the notebook: I tried injecting custom CSS through IPython.display.display() and HTML() to modify the height of the images in the output cell.

display(HTML("<style>div.output_area img{height: 50%;}</style>"))

but it doesn't work for me.

Does anyone have a workaround or solution for reducing the display size of images in VS Code Jupyter Notebook without altering the figure’s actual dimensions?

Thank you for your help!

[DonJayamanne]

Closing in favour of #16092