Issue 23

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 width and height attributes 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.

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.

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.

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.

PixyScan 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

PixyScan identifies all <img> elements in the HTML that are part of the page content.

3. Dimension Validation

For each image, PixyScan checks:

• Whether both width and height attributes 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

PixyScan 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