Images Have Width/Height Attributes

Issue No: 23

Category: Image Analysis

Issue type: Issue

Priority: IMPORTANT

Description

This audit verifies that image elements include explicit width and height attributes in HTML so browsers can reserve layout space before image download. Missing intrinsic dimensions increase cumulative layout shift (CLS) risk.

How do we capture it

1. Fetch the final page URL using HTTP GET and store status code, final URL, and raw HTML response.
2. Parse raw HTML without JavaScript execution.
3. Extract all <img> elements that are part of page content (exclude data URIs smaller than configured threshold and tracking pixels if configured).
4. For each image, capture src, srcset, width, height, loading, style, and class attributes.
5. Mark each image as valid-dimensioned only when both width and height attributes exist and are positive numeric values.
6. Mark image as missing-dimensions when one or both attributes are absent, non-numeric, or zero.
7. Calculate page-level totals and coverage ratio from detected images.
8. Persist a sample list of image URLs missing dimensions for diagnostics.
9. Flag issue when missing-dimension counts exceed configured thresholds.
10. Store fetch/parse errors so reports can distinguish real failures from capture anomalies.

Constraint: The crawler evaluates raw HTML only. CSS-rendered sizing and JavaScript-injected dimensions are not treated as compliant for this audit.

What to store

Field	Type	Comment
total_images_detected	INT DEFAULT 0	Total count of <img> elements analyzed on the page.
images_with_width_height	INT DEFAULT 0	Count of images having both valid width and height attributes.
images_missing_width_height	INT DEFAULT 0	Count of images missing one or both required intrinsic dimensions.
images_with_invalid_dimensions	INT DEFAULT 0	Count of images where width/height exists but value is zero or invalid.
images_dimension_coverage_ratio	DECIMAL(5,2)	Percentage of images with valid width and height attributes.
has_images_missing_dimensions	BOOLEAN DEFAULT FALSE	True when at least one image lacks valid width and height attributes.
missing_dimension_image_urls	TEXT[]	Diagnostic list of image URLs missing valid intrinsic dimensions.
invalid_dimension_image_urls	TEXT[]	Diagnostic list of image URLs with invalid or zero dimensions.
dimension_issue_triggered	BOOLEAN DEFAULT FALSE	Final boolean indicating this issue is triggered.
trigger_reason	TEXT	Primary reason code for issue trigger.
capture_error_detail	TEXT	Capture/parsing errors for troubleshooting.

Condition for trigger

Trigger this issue when meaningful image content is missing explicit intrinsic dimensions.

• Trigger Rule 1: Missing Width/Height Exists

  • Target Field: dimension_issue_triggered
  • Evaluation Logic: images_missing_width_height > 0
  • Severity: WARNING
  • Diagnostic Message: "One or more images are missing width/height attributes, which can cause layout shift."

• Trigger Rule 2: Low Dimension Coverage

  • Target Field: dimension_issue_triggered
  • Evaluation Logic: images_dimension_coverage_ratio < 90.00 AND total_images_detected >= 5
  • Severity: WARNING
  • Diagnostic Message: "Image dimension coverage is below recommended threshold; CLS risk is elevated."

• Trigger Rule 3: Severe Missing Dimensions

  • Target Field: dimension_issue_triggered
  • Evaluation Logic: images_missing_width_height >= 5
  • Severity: CRITICAL
  • Diagnostic Message: "Many images are missing width/height attributes, likely causing noticeable layout instability."

• Trigger Rule 4: Final Issue State

  • Target Field: dimension_issue_triggered
  • Evaluation Logic: dimension_issue_triggered = TRUE
  • Severity: WARNING
  • Diagnostic Message: "Images without intrinsic dimensions were detected and should be fixed to prevent layout shift."

Sources

• web.dev: Optimize Cumulative Layout Shift: https://web.dev/articles/optimize-cls
• web.dev: Cumulative Layout Shift (CLS): https://web.dev/articles/cls
• MDN: <img> element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
• HTML Living Standard: Embedded content (img): https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element

Long description

When image dimensions are absent in HTML, browsers cannot allocate stable layout boxes before image bytes are downloaded. As images load, surrounding content shifts, producing poor visual stability and degraded user experience.

Providing both width and height attributes gives the browser intrinsic ratio information early, allowing it to reserve layout space and reduce CLS. This is especially important for image-heavy templates, product grids, and article bodies.

Common failure scenarios checked by the crawler:

• CMS outputs <img> tags without width/height.
• One dimension is present but the other is missing.
• Dimension values are zero, invalid, or non-numeric.
• Template migration removed intrinsic dimensions from reusable components.
• Responsive image usage relies only on CSS sizing without HTML intrinsic values.

How to Fix

1. Ensure every content image includes both width and height attributes in HTML.
2. Generate intrinsic dimensions at upload or build time and persist them with media metadata.
3. Update templates/components so image render helpers always emit valid dimensions.
4. Keep responsive behavior via CSS while still preserving intrinsic HTML dimensions.
5. Re-crawl and confirm high dimension coverage and zero missing-dimension URLs.