---
title: Image Handling in Docusaurus
date: "2025-04-02"
author: "Birgit Pauli-Haack"
url: "https://icodeforapurpose.com/image-handling-in-docusaurus/"
categories: ["Docusaurus"]
---

For the Playground documentation, I needed to have more control over the sizes of images. It was a bit tricky because it required a React approach rather than a Markdown approch.

![](https://icodeforapurpose.com/wp-content/uploads/2025/04/Screenshot-2025-04-02-at-13.55.15.png)

![](https://icodeforapurpose.com/wp-content/uploads/2025/04/Screenshot-2025-04-02-at-13.58.23.png)

Markdown renders the image in the orignal size.

```
![Site Explorer Snapshot](./_assets/installed-adventurer-theme.png)
```

The image is located in the _assets folder relative to the *.md file.

## Display an  Image with a reduced width

The code to display the same image with width=400.

```
import Image from '@theme/IdealImage';
import Adventurer from '@site/static/img/adventurer-theme.png';

```

The image is displayed via a React component ()

**In short: **

- Move the image in */packages/docs/site/static/img* folder
- Imports a special image component from Docusaurus
- Imports a specific image file
- Displays that image with a maximum width of 400 pixels using the special Docusaurus image component

**In detail: **

The first line **imports a special Image component** from Docusaurus’s theme system. The ‘@theme’ path is specific to Docusaurus and indicates it’s using a component provided by the framework. ‘IdealImage’ is a component that handles images with features like lazy loading and responsive sizing.

The second line **imports the actual image file.** The ‘@site’ path is another Docusaurus-specific path that points to your website’s root directory. The rest of the path shows where the image file is located – in the static/img folder, and it’s named “installed-adventurer-theme.png”.

Note if you want to display image with different width, the image file needs to be located in the folder `/packages/docs/site/static/img `

![](https://icodeforapurpose.com/wp-content/uploads/2025/04/Screenshot-2025-04-02-at-14.08.30.png)

The third line  creates a div (container) with a maximum width of 400 pixels, and inside it, it renders the Image component.

The `img={Adventurer}` part passes the imported image as a prop to the Image component.

The double curly braces `{{...}}` are used because in JSX (React’s syntax), a single set of curly braces `{...}` is used to embed JavaScript expressions, and inside that, we’re defining a JavaScript object which itself uses curly braces.  

The [Docusaurus’s IdealImage](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-ideal-image) component displays optimized image with  lazy loading (images only load when scrolled into view) and responsive sizing.

*Huge “Thank You” to the JavaScript teacher and code-archiologist, [JuanMa Garrido](https://juanma.codes/about/) and my special friend [Claude.ai.](https://claude.ai.) *

### Like this:
Like Loading…