Performance warn by default astro-doctor/use-astro-image

use-astro-image

Use <Image> from astro:assets instead of raw <img> tags.

Why

The built-in <Image> component automatically optimizes images (WebP/AVIF conversion, responsive srcset, lazy loading, explicit width/height to prevent layout shift). Plain <img> tags skip all of this.

Examples

✗ Incorrect

Raw <img> tag

---
---
<img src="/hero.png" alt="Hero image" />

✓ Correct

<Image> from astro:assets

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

Configuration

Override the default severity in your ESLint config:

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

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

Or in your doctor.config.ts:

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

All rules

Edit this page on GitHub ↗