Skip to content
astro-doctor
Performancewarn by defaultastro-doctor/require-image-dimensions

require-image-dimensions

Require dimensions for public and remote astro:assets images.

Why

Astro can infer dimensions for imported images from src/, but it cannot analyze files served from public/ and needs dimensions or inferSize for remote images. Missing dimensions can cause layout shift while the image loads.

Examples

Incorrect

Public image without dimensions

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

Correct

Public image with dimensions

astro
---
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 />

Configuration

Override the default severity in your ESLint config:

javascripteslint.config.js
// eslint.config.js
import astroDoctorPlugin from '@santi020k/eslint-plugin-astro-doctor'

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

Or in your doctor.config.ts:

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

All rules

Edit this page on GitHub ↗