MediaItem

Optimized image component with responsive srcset generation and Contentstack image transformation.

Props

Prop	Type	Required	Default	Description
`src`	`string`	Yes	-	Image source URL
`alt`	`string`	Yes	-	Alt text for accessibility
`width`	`number`	Yes	-	Base width of the image
`ratio`	`number`	Yes	-	Aspect ratio (width/height)
`fit`	`string`	No	`'crop'`	Image fit mode for Contentstack
`widths`	`number[]`	No	`[320, 640, 960, 1280, 1600, 1440]`	Array of widths for srcset
`sizes`	`string`	No	`'100vw'`	CSS sizes attribute (shorthand supported)
`...props`	`ImgHTMLAttributes`	No	-	Standard img HTML attributes

Sizes Shorthand

The sizes prop supports a shorthand format that gets parsed into proper CSS:

"100vw, lg:50vw" → "(min-width: 1024px) 50vw, 100vw"

Supported breakpoints: xs, sm, md, lg, xl, 2xl

Usage

1import MediaItem from '@/components/atoms/MediaItem';
2
3<MediaItem
4  src="/images/hero.jpg"
5  alt="Hero image"
6  width={800}
7  ratio={16/9}
8  sizes="100vw, lg:50vw"
9/>

import MediaItem from '@/components/atoms/MediaItem';

<MediaItem
  src="/images/hero.jpg"
  alt="Hero image"
  width={800}
  ratio={16/9}
  sizes="100vw, lg:50vw"
/>

Features

Responsive images: Generates srcset with multiple widths
Contentstack optimization: Adds transformation parameters (width, height, quality, format)
Aspect ratio: Calculates height from width and ratio
Format optimization: Uses AVIF and progressive JPEG
Sizes parsing: Converts shorthand sizes to CSS media queries

Image Transformation

Images are optimized via Contentstack with these parameters:

width: Image width
height: Calculated from ratio
quality: 90
auto: avif (AVIF format)
format: pjpg (progressive JPEG)
fit: crop (or custom)

Notes

Uses standard <img> element (not Next.js Image)
Height is automatically calculated from width and ratio
Uses useMemo for performance optimization
Supports all standard img HTML attributes