Image Explicit Dimensions
Every <img> element MUST carry explicit width and height attributes matching the image's intrinsic dimensions to prevent Cumulative Layout Shift (CLS) during page load.
$ aoe install @community/rule-image-explicit-dimensions Projection
Always in _index.xml · the agent never has to ask for this.
ImageExplicitDimensions [rule] v1.0.0
Every element MUST carry explicit width and height attributes matching the image's intrinsic dimensions to prevent Cumulative Layout Shift (CLS) during page load.
Loaded when retrieval picks the atom as adjacent / supporting.
ImageExplicitDimensions [rule] v1.0.0
Every element MUST carry explicit width and height attributes matching the image's intrinsic dimensions to prevent Cumulative Layout Shift (CLS) during page load.
Meta
- License: MIT AND Apache-2.0
- License Provenance: legacy-backfill
Severity
high
Exceptions
- CSS-controlled fluid images where width:100% is applied AND the container has a fixed aspect ratio via aspect-ratio property — dimensions still preferred for browser hint
Loaded when retrieval picks the atom as a focal / direct hit.
ImageExplicitDimensions [rule] v1.0.0
Every element MUST carry explicit width and height attributes matching the image's intrinsic dimensions to prevent Cumulative Layout Shift (CLS) during page load.
Meta
- License: MIT AND Apache-2.0
- License Provenance: legacy-backfill
Severity
high
Exceptions
- CSS-controlled fluid images where width:100% is applied AND the container has a fixed aspect ratio via aspect-ratio property — dimensions still preferred for browser hint
Examples
- Correct:

- Wrong:
— no dimensions, CLS guaranteed - Next.js: Use
component which enforces width/height by default
Relations
related: [@community/rule-image-optimization, @community/check-image-optimization]
Rationale
The browser calculates the aspect ratio from width/height before the image loads, reserving the correct space in the layout. Without these attributes, content below the image jumps once the image arrives — a Core Web Vitals violation.
Meta
- License: MIT AND Apache-2.0
- License Provenance: legacy-backfill
Severity
high
Exceptions
- CSS-controlled fluid images where width:100% is applied AND the container has a fixed aspect ratio via aspect-ratio property — dimensions still preferred for browser hint
Source
aoe-engine/examples/frontend-design/primes/compiled/@community/rule-image-explicit-dimensions/atom.yaml