` parent, we'll force our `![]()
` with attributes like CSS, lazy loading, ... **but, not for all tags in the blog post since we'll skip the first one.**
Indeed, the blog post introduction image should remains unchanged; we'll start to update the other images.
And here is the result of our own, self-made, `` component:
(image: A happy meerkat)
As you can see, the image is centered, has a hover effect, rounded corners, ... If you look at the HTML code, you'll see the `loading="lazy"` attribute.
That's pretty cool: our component is working! Let's build it.
We need to do several things so let's start with the first one: we need to create our `` component.
## 1. Creation of our Image component
Writing a component for Docusaurus is quite easy. You should create a new folder in the existing `src/components` one.
In this article, we'll create a `Image` component so let's create the `src/components/Image/index.tsx` file with this content:
**src/components/Image/index.tsx**
```typescript
/**
* 🖼️ Image Component
*
* A lightweight wrapper for rendering images in Docusaurus with base URL resolution.
* Ensures that image paths are correctly resolved relative to the site's base URL,
* making it ideal for static assets stored in the `static/img` directory.
*
* 🔍 Behavior:
* - Uses `useBaseUrl()` to resolve the image path
* - Applies scoped styling via CSS modules
* - Supports optional `alt` and `title` attributes for accessibility and tooltips
* - Enables lazy loading for performance optimization
*/
import type { JSX } from "react";
import styles from "./styles.module.css";
import useBaseUrl from "@docusaurus/useBaseUrl";
interface Props {
/** Path to the image (e.g. `/img/example.png`), or a `require()`d asset */
src: string | { default: string };
/** Tooltip text shown on hover */
title?: string;
/** Alternative text for accessibility (if missing, reuse the Title property) */
alt?: string;
}
export default function Image({ src, alt, title }: Props): JSX.Element {
const isAbsolutePath = typeof src === "string" && src.startsWith("/");
const resolvedUrl = useBaseUrl(isAbsolutePath ? src : undefined);
const imgSrc = (isAbsolutePath ? resolvedUrl : src) as string;
return (
);
}
```
Our `Image` component will ask three parameters but just the `img` one is required. We can pass too a title (`title`) and the alternate text (`alt`).
As you can easily understand, the `` component will just create a `div` where an `img` tag will be present.
Nothing fancy except we'll use some CSS for the look\&feel and the fact we'll force a [lazy loading](/blog/docusaurus-lazy-loading).
Please also create the `src/components/Image/styles.module.css` file:
**src/components/Image/styles.module.css**
```css
.container {
text-align: center;
padding: 10px;
background: rgb(255, 255, 255, 0.15);
border: 1px solid rgb(255, 255, 255, 0.3);
border-radius: 16px;
backdrop-filter: blur(10px) saturate(180%);
}
.container img {
border-radius: 12px;
box-shadow: 0 8px 20px rgb(0, 0, 0, 0.15);
transition:
transform 0.4s ease,
box-shadow 0.4s ease,
filter 0.4s ease;
}
.container img:hover {
transform: scale(1.05) translateY(-4px);
box-shadow: 0 12px 25px rgb(0, 0, 0, 0.25);
filter: brightness(1.05) saturate(1.1);
}
```
## 2. Tell Docusaurus about our component
Before being able to use the `` component, we should tell Docusaurus what to do when it'll see it.
Please also edit the `src/theme/MDXComponents.js` file (and if not present, please create it)
**src/theme/MDXComponents.js**
```javascript
import MDXComponents from "@theme-original/MDXComponents";
import Image from "@site/src/components/Image";
export default {
// Reusing the default mapping
...MDXComponents,
Image,
};
```
Everything is now in place.
## 3. Using the Image component
From now, in a blog post, instead of writing
```html
```
we can write
```html