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)