require-image-dimensions

Why it matters

Astro can infer dimensions for imported images from src/, but it cannot analyze files served from public/ and needs dimensions or enabled inferSize for remote images. Aliased Image and Picture imports from astro:assets are recognized; unrelated components are ignored. Missing dimensions can cause layout shift while the image loads.

See the difference

---
import { Image } from 'astro:assets'
---
<Image src="/hero.png" alt="Hero image" />

---
import { Image } from 'astro:assets'
---
<Image src="/hero.png" alt="Hero image" width="1200" height="630" />

<Image src="https://cdn.example.com/hero.png" alt="Hero image" inferSize />

Configure this check

Override the default severity in your ESLint config:

import astroDoctorPlugin from '@santi020k/eslint-plugin-astro-doctor'

export default [
  astroDoctorPlugin.configs.recommended,
  {
    rules: {
      'astro-doctor/require-image-dimensions': 'error',
    },
  },
]

Or set the severity for CLI scans in doctor.config.ts:

export default {
  rules: {
    'astro-doctor/require-image-dimensions': 'error',
  },
}

Use 'error', 'warn', or 'off'. The configuration guide covers presets and per-file overrides.

Keep exploring performance

• no-client-load-overusePrefer client:idle or client:visible over client:load for interactive islands.
• use-astro-imageUse <Image> from astro:assets instead of raw <img> tags.
• no-blocking-scriptDisallow render-blocking <script src="..."> tags — add defer, async, or type="module".
• no-unprocessed-script-surprisesWarn when script attributes opt out of Astro script processing.

Browse every rule and project audit