Skip to main content
Embed images with sizing, aspect ratio, and cropping.
<Image src="./photo.jpg" width="3in" height="2in" />

Props

PropTypeDescription
srcstringFile path or URL
widthMeasurementValueImage width
heightMeasurementValueImage height
altstringAlt text
classNamestringTailwind classes

Loading images

Local files

<Image src="./images/logo.png" width="2in" />
<Image src="/absolute/path/to/image.jpg" width="3in" />

Remote URLs

<Image src="https://example.com/photo.jpg" width="4in" />

Supported formats

  • PNG
  • JPEG
  • GIF (static)
  • BMP

Sizing

Units

<Image src="photo.jpg" width="3in" />        // Inches
<Image src="photo.jpg" width="5cm" />        // Centimeters
<Image src="photo.jpg" width="50mm" />       // Millimeters
<Image src="photo.jpg" width="200px" />      // Pixels
<Image src="photo.jpg" width="72pt" />       // Points
<Image src="photo.jpg" width={2} />          // Number = inches

Width only

Height calculated from original aspect ratio:
<Image src="photo.jpg" width="4in" />

Height only

Width calculated from original aspect ratio:
<Image src="photo.jpg" height="3in" />

Both

Explicit dimensions (may stretch):
<Image src="photo.jpg" width="4in" height="3in" />

No dimensions

Uses original image size:
<Image src="photo.jpg" />

Aspect ratio

Control aspect ratio with Tailwind classes:
// Square
<Image src="photo.jpg" width="2in" className="aspect-square" />

// 16:9 video
<Image src="photo.jpg" width="4in" className="aspect-video" />

// Custom ratio
<Image src="photo.jpg" width="3in" className="aspect-[4/3]" />
<Image src="photo.jpg" width="3in" className="aspect-[2/1]" />

Object fit

Control how image fills the space:

Cover (crop to fill)

<Image
  src="photo.jpg"
  width="2in"
  height="2in"
  className="object-cover"
/>
Crops image to fill dimensions. Maintains aspect ratio, removes overflow.

Contain (fit inside)

<Image
  src="photo.jpg"
  width="2in"
  height="2in"
  className="object-contain"
/>
Scales to fit within dimensions. May have empty space.

Default (stretch)

<Image src="photo.jpg" width="2in" height="2in" />
Stretches to fill. May distort image.

Common patterns

Logo in header

<Section>
  <Section.Header>
    <Paragraph>
      <Image src="./logo.png" width="1in" />
    </Paragraph>
  </Section.Header>
</Section>

Product image

<Paragraph className="text-center">
  <Image
    src="./product.jpg"
    width="4in"
    className="aspect-square object-cover"
    alt="Product photo"
  />
</Paragraph>

Thumbnail grid (in table)

<Table>
  <Tbody>
    <Tr>
      <Td className="p-2">
        <Image src="./img1.jpg" width="1.5in" className="aspect-square object-cover" />
      </Td>
      <Td className="p-2">
        <Image src="./img2.jpg" width="1.5in" className="aspect-square object-cover" />
      </Td>
      <Td className="p-2">
        <Image src="./img3.jpg" width="1.5in" className="aspect-square object-cover" />
      </Td>
    </Tr>
  </Tbody>
</Table>

Screenshot with border

<Paragraph className="text-center mt-4">
  <Image
    src="./screenshot.png"
    width="5in"
    alt="Application screenshot"
  />
</Paragraph>
<Paragraph className="text-center text-sm text-gray-500">
  Figure 1: Application dashboard
</Paragraph>

Limitations

  • Inline positioning only (no text wrapping)
  • No floating images
  • No rotation or transforms
  • No filters or effects
  • No SVG support
  • No animated GIFs (static frame only)