WordPress And The Image Width Attribute Reality

HTML image elements have width and height attributes. The attributes serve specific purposes: telling the browser how much space to reserve before the image loads, supporting the aspect ratio that prevents layout shift.

The specifics of how these attributes work affect rendering. Misunderstanding them produces broken responsive behavior.

The aspect ratio reservation

Modern browsers use the width and height attributes to calculate aspect ratio. The reserved space matches the image's proportions.

When the image loads, it fills the reserved space without causing layout shift. Cumulative Layout Shift improves.

The reservation works whether the displayed image is the same size as the attribute or different. The aspect ratio is what matters.

The CSS scaling

CSS can override the HTML attributes for display:

img { max-width: 100%; height: auto; }

The image scales to its container's width; the height adjusts to preserve aspect ratio.

The HTML attributes still provide the aspect ratio reservation even though the actual display size is different.

The common mistakes

Removing the attributes "because CSS handles it." The CSS handles display sizing but not aspect ratio reservation. Without the attributes, CLS issues return.

Setting attributes to wrong values. If the attributes don't match the actual image proportions, the reservation is wrong; the image squishes or stretches.

Using percentage values. The attributes should be pixel values, not percentages. The browser uses them for ratio calculation.

The WordPress handling

WordPress automatically includes width and height attributes on images inserted via the editor. The attributes match the original image dimensions.

For images inserted through other methods (theme templates, custom code), verify the attributes are included.

The responsive images consideration

Responsive images use srcset to provide multiple resolutions. The width and height attributes typically reference the default image; the actual served image may be a different size.

The aspect ratio remains constant across all srcset variants. The attributes work correctly because they encode the ratio.

The honest framing

Image width and height attributes are simple mechanically but consequential. The discipline of always including them prevents CLS issues that are otherwise common.

For sites with CLS issues, the audit usually finds image elements missing the attributes. The fix is adding them.