Images missing explicit dimensions (Next.js)

What this means

Orino found images in your Next.js project — either <Image> from next/image or raw <img> tags — missing width or height attributes. Without dimensions, the browser cannot reserve space before the image loads, so the layout shifts when the image arrives. This raises your CLS score and harms Core Web Vitals ranking.

How to fix it

`<Image>` from next/image

Next.js requires width and height on <Image> unless you use the fill prop. If you see a runtime error or this check fires, you are likely missing one or both.

For local images, use a static import. Next.js reads the dimensions from the file at build time — you do not need to provide them manually.

import Image from 'next/image'
import heroImage from '@/assets/hero.jpg'

// next/image infers width and height from the import
<Image src={heroImage} alt="Hero" />

For remote images, provide explicit dimensions:

import Image from 'next/image'

<Image
  src="https://cdn.example.com/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
/>

For images that fill their container, use fill with a positioned parent instead of fixed dimensions:

<div style={{ position: 'relative', width: '100%', height: '400px' }}>
  <Image
    src={heroImage}
    alt="Hero"
    fill
    style={{ objectFit: 'cover' }}
  />
</div>

Raw `<img>` tags

If you have raw <img> tags in your Next.js project, the better fix is to migrate to <Image>. If you must keep a raw <img>, add explicit width and height attributes.

<!-- before -->
<img src="/images/team.jpg" alt="Team photo" />

<!-- after -->
<img src="/images/team.jpg" alt="Team photo" width={800} height={500} />

See raw <img> tags in Next.js for the full migration guide.

Verify the fix

Re-run the audit:

npx orino audit

The “Images missing explicit dimensions” check should pass. In the browser, inspect the rendered <img> element — it should have explicit width and height attributes set by Next.js.