Motion & Animation

responsive-image-optimization

Flag <img> elements missing loading, width/height, or srcset.

Detects <img> tags missing loading="lazy", explicit dimensions, or a srcset. These attributes protect Core Web Vitals (LCP, CLS) and mobile bandwidth — and AI agents routinely omit them.

Behavior

• Fixable: Yes — adds loading="lazy" and decoding="async".
• Suggestions: Yes.

Examples

Bad:

<img src="hero.jpg" alt="Hero" />

Good:

<img src="hero.jpg" alt="Hero" width="1200" height="630" loading="lazy" decoding="async" />

Related rules

• image-alt-textRequire meaningful alt text on every <img> element.
• responsive-requiredRequire responsive breakpoints on fixed-width layout containers.
• viewport-metaForbid disabling user scaling on the viewport meta tag.

Use it

Enable responsive-image-optimization in your eslint.config.js:

import deslint from '@deslint/eslint-plugin';

export default [
  {
    plugins: { deslint },
    rules: {
      'deslint/responsive-image-optimization': 'error',
    },
  },
];

Found a false positive? Report it on GitHub →

← Back to all rules