Image

Prose UI converts your images into NextJs images with all their benefits, like prevention of layout shift.

Use simple Markdown syntax if you don't need to resize, align, or add a caption on it.

![Abstract art](/img/demo-image.png)

Images with external URLs

External images are converted into simple img tags because the dimensions of the image are not known in advance.

![Photo of Saturn from Cassini orbiter](https://upload.wikimedia.org/wikipedia/commons/c/c7/Saturn_during_Equinox.jpg)

Image dimensions

To set image dimensions, use the width and height properties on the Image component. The values for width and height are in pixels.

If you set only the width, Prose UI will calculate the height automatically to maintain the image's proportions. The same applies if you set only the height.

The example below sets the width of the image to 400 pixels. The height will be automatically calculated to preserve the image's aspect ratio.

<Image width={400} src="/img/demo-image-03.png" alt="Abstract art"/>

Alignment and caption

Use the Frame component to control alignment and add captions to images. Below are examples of different alignments:

<Frame align="left" caption="Left aligned image">
   <Image width={200} src="/img/demo-image-01.png" alt="Abstract art"/>
</Frame>
<Frame align="center" caption="Center aligned image">
   <Image width={200} src="/img/demo-image-01.png" alt="Abstract art"/>
</Frame>
<Frame align="right" caption="Right aligned image">
   <Image width={200} src="/img/demo-image-03.png" alt="Abstract art"/>
</Frame>

Inline images

By default, images added using Markdown syntax or the Image component are inline and will appear inside a paragraph tag unless wrapped in a Frame.

Here's an example <Image src="/img/demo-inline-image.svg" width={100} alt="Abstract art" /> of a resized inline image within a paragraph.

Here's an example of a resized inline image within a paragraph.

Here's an example ![Alt text](/img/demo-inline-image.svg) of a Markdown image within a paragraph.

Here's an example of a Markdown image within a paragraph.