Images missing width and height attributes
What Is This Issue
This issue checks whether all image elements (<img> tags) on a webpage include explicit width and height attributes in the HTML code.
What passes
A passing implementation means that every content image has both width and height attributes with valid positive numeric values. This is considered passing when:
- All images have both
widthandheightattributes present - Both attributes contain valid numeric values greater than zero
- At least 90% of images have valid dimensions (when 5+ images exist on the page)
Example
An image tag written as <img src="photo.jpg" width="800" height="600" alt="Description"> would pass. However, <img src="photo.jpg" alt="Description"> (missing dimensions) or <img src="photo.jpg" width="0" height="0" alt="Description"> (invalid dimensions) would fail.
Why Is This Important
When images lack width and height attributes, it directly impacts:
User Experience
Missing dimensions cause Cumulative Layout Shift (CLS), a Core Web Vital metric. As images load, content jumps around the page, creating a poor user experience and frustrating visitors.
Rankings
Google uses Core Web Vitals as a ranking factor. High CLS scores can negatively impact search rankings.
Visual Stability
Browsers cannot reserve the correct amount of space for images before they download, causing surrounding text and elements to shift unexpectedly.
SEO Health Score Impact
Resolving this issue improves the overall SEO health score by optimizing page experience metrics. Sites that properly implement image dimensions typically see significant reductions in CLS scores and improved user engagement.
How XeoPix Detects This
XeoPix identifies this issue through the following logical steps:
1. HTML Parsing
The crawler fetches the page and parses the raw HTML code (without executing JavaScript).
2. Image Extraction
XeoPix identifies all <img> elements in the HTML that are part of the page content.
3. Dimension Validation
For each image, XeoPix checks:
- Whether both
widthandheightattributes are present - Whether both attributes contain valid positive numeric values
- Images missing one or both attributes are marked as “missing dimensions”
- Images with zero or invalid values are marked as “invalid dimensions”
4. Coverage Calculation
XeoPix calculates the percentage of images that have valid width and height attributes.
5. Issue Triggering
The issue is flagged when:
- Any image is missing width or height attributes
- Less than 90% of images have valid dimensions (for pages with 5+ images)
- Five or more images are missing dimensions (considered severe)
- Images have invalid or zero dimensions
How To Fix
1. Add dimensions to all images
Ensure every <img> tag includes both width and height attributes with correct values.
2. Generate dimensions automatically
Configure your CMS or build process to automatically capture and store image dimensions at upload time, then include them in the HTML output.
3. Update templates
Modify your website templates and components to always output width and height attributes when rendering images.
4. Maintain responsive design
Use CSS for responsive sizing (like max-width: 100%) while keeping the intrinsic HTML dimensions as the basis for aspect ratio calculation.
5. Validate changes
After making updates, re-crawl the page to confirm all images now have valid dimensions and CLS risk is minimized.
What We Store
Storage Level
Page Level
Database Table / Prisma Model
PageImageAnalysis
Stored Fields
| Field | Type | Description |
|---|---|---|
| imageWidthAttribute | Int? | Width attribute of the image |
| imageHeightAttribute | Int? | Height attribute of the image |
Detection Dependencies
- HTML Document
Examples
Example 1: Passing Implementation
Scenario: Product image with proper dimensions
Passing state:
<img src="product.jpg" width="800" height="600" alt="Blue running shoes" />Both width and height attributes are present with valid positive values.
Example 2: Failing Implementation - Missing Attributes
Scenario: Image without dimensions
Failing state:
<img src="photo.jpg" alt="Description" />Missing both width and height attributes. Causes layout shift when image loads.
Example 3: Failing Implementation - Invalid Values
Scenario: Image with zero dimensions
Failing state:
<img src="icon.png" width="0" height="0" alt="Icon" />Dimensions are present but invalid (zero values). Does not prevent layout shift.
Unit Test
Test File
xeopix-crawling-v2/__tests__/seo-audit-checks/imageAnalysis/issue-23-images-width-height.test.js
Purpose
This unit test validates that the image analysis correctly detects images that are missing explicit width and/or height attributes, which is important for Cumulative Layout Shift (CLS) performance.
Tested Function
runImageAnalysis(ctx) from toggleGroups/imageAnalysis.js
Issue Information
- Issue Number: 23
- Issue Code:
images_width_height - Toggle Group:
imageAnalysis
Test Scenarios
Positive Test Cases
| # | Scenario | Expected Result |
|---|---|---|
| 1 | All images have both width and height attributes (width="800" height="600") | No issue detected |
| 2 | HTML contains no <img> tags | No issue detected |
| 3 | Empty HTML string | No issue detected, no crash |
Negative Test Cases
| # | Scenario | Expected Result |
|---|---|---|
| 1 | Image is missing width attribute (only height present) | Issue detected with imageCount = 1 |
| 2 | Image is missing height attribute (only width present) | Issue detected with imageCount = 1 |
| 3 | Image is missing both width and height attributes | Issue detected with imageCount = 1 |
| 4 | Multiple images with mixed attribute presence: some with both, some missing width, some missing height, some missing both | Issue detected with imageCount = 4 (all flagged regardless of which dimension is missing) |
| 5 | Multiple images where some have both dimensions and some are missing attributes | Issue detected with imageCount = 3 (only images missing at least one dimension are counted) |
Boundary Cases
| # | Scenario | Expected Result |
|---|---|---|
| 1 | Invalid dimension values (width="invalid", height="abc") | Treated as having dimensions — no issue detected |
| 2 | Zero dimensions (width="0" height="0") | Treated as having dimensions — no issue detected |
Edge Cases
| # | Scenario | Expected Result |
|---|---|---|
| 1 | Empty HTML | Function does not throw; no issue detected |
| 2 | HTML with no <img> tags | No issue detected |
| 3 | Malformed HTML (unclosed <img> tag) | Function does not throw; no issue detected (malformed tag parsed as having dimensions) |
| 4 | Images with data-src attribute (lazy loading) and valid dimensions | No issue detected |
| 5 | Relative URL resolution for sample images (/images/photo.jpg) | Correctly resolved to absolute URL in sampleImages |
Cache Validation
| # | Scenario | Expected Result |
|---|---|---|
| 1 | Two consecutive calls with the same HTML | result1 === result2 (same object reference); ctx.cache['imageAnalysis'] is defined |
Expected Outcome
Pass
The issue should be reported when one or more images on the page are missing the width or height attribute (or both). All such images are counted in imageCount regardless of which specific attribute is missing.
Fail
The issue should not be reported when all images have both width and height attributes present (regardless of whether the values are valid numbers or zero), or when there are no images on the page.
Validation
The unit test verifies:
- Correct issue detection: Images missing
width,height, or both are correctly flagged - No false positives: Images with both attributes (valid, invalid, or zero values) are not flagged
- Payload validation:
issueCode,details.imageCount, anddetails.sampleImagescontain the correct data - URL resolution: Relative image URLs are resolved to absolute URLs using
ctx.pageUrl - Cache behaviour: Results are cached on
ctx.cache['imageAnalysis']and subsequent calls return the same cached result - Error handling: Empty HTML, malformed HTML, and missing attributes are handled gracefully without throwing
Related Production Files
| File | Role |
|---|---|
toggleGroups/imageAnalysis.js | Contains the runImageAnalysis() function under test |
issueCodes.js | Defines the IMAGES_WIDTH_HEIGHT issue code constant |
Coverage Summary
- 3 positive test cases covering images with valid dimensions and no-image scenarios
- 5 negative test cases covering missing width, missing height, missing both, and mixed scenarios with multiple images
- 2 boundary cases covering invalid and zero dimension values
- 5 edge cases covering empty HTML, malformed HTML, lazy loading, no images, and relative URL resolution
- 1 cache validation test ensuring idempotent behaviour
References
- Optimize Cumulative Layout Shift — web.dev
- Cumulative Layout Shift (CLS) — web.dev
- <img> element — MDN