Check if your images have width and height set

SiteCurl looks at every <img> tag on your page and checks if it has both width and height attributes. If either is missing or empty, the image is flagged. The check shows how many images are missing dimensions and lists up to 5 example URLs.

These attributes tell the browser how much space to reserve before the image downloads. Without them, the browser does not know the image size until it arrives. When it does arrive, the browser recalculates the layout and shifts everything below the image down.

This check runs on every page in your scan. A full scan of 50 pages can catch hundreds of images missing dimensions.

Layout shift is one of the most frustrating things on the web. You start reading a paragraph, then an image above it finishes loading, and the text jumps down. You lose your place. You try to click a button, but it moves right as you tap. Google calls this Cumulative Layout Shift (CLS), and it is one of three Core Web Vitals that affect rankings.

The fix is simple: tell the browser the image size before it loads. When you add width="800" height="600" to an img tag, the browser calculates the aspect ratio (4:3 in this case) and reserves that space in the layout. When the image arrives, it fills the reserved space without moving anything else.

CSS can also set image sizes, but HTML attributes have a key advantage. They work before the CSS loads. If your stylesheet is on a CDN that is slow for one visit, the HTML attributes still reserve the right space. This is why both Google and browser vendors recommend setting dimensions in the HTML tag.

Modern CSS has a property called aspect-ratio that browsers auto-apply when they see width and height attributes. You do not need to calculate ratios yourself. Just set the attributes and let the browser do the math.

Cumulative Layout Shift is a Core Web Vital. Google measures it and uses it as a ranking signal. Pages with high CLS rank lower in mobile search. Missing image dimensions are the most common cause of layout shift on content-heavy pages.

Layout shift also hurts conversions. If a visitor tries to tap a button and the page jumps, they may tap the wrong thing or give up entirely. On mobile, where screen space is tight and layout shifts are more noticeable, this directly affects form completions and purchases.

Fixing missing dimensions is one of the easiest performance wins. There is no build tool to configure, no server to update. You add two attributes to each image tag and the problem is solved.

Blogs and content sites with inline images are the most affected. Each article may have 5-10 images. If none of them have dimensions, the page shifts multiple times as the reader scrolls and images load into view.

E-commerce product pages with grids of product images get hit twice: once from the layout shift itself, and again from the visual jank that makes the page look broken while loading.

Sites using a CMS where editors paste images without attributes need a bulk fix. WordPress, Shopify, and other platforms often let editors insert images without setting width and height. The fix may need a theme or template change to set defaults for all images.

Step 1: Find images missing dimensions. Run a SiteCurl scan. The image dimensions finding lists how many images are missing width or height and shows example URLs.

Step 2: Add width and height to each image. Use the image's actual pixel dimensions. Example: <img src="photo.jpg" width="800" height="600" alt="Description">. The browser uses these to calculate the aspect ratio and reserve space in the layout.

Step 3: Let CSS handle responsive sizing. After setting the HTML attributes, add CSS to make images flexible: img { max-width: 100%; height: auto; }. The HTML attributes give the browser the aspect ratio. The CSS makes the image scale to fit its container.

Step 4: Check your CMS or template. In WordPress, images uploaded through the media library usually get dimensions added automatically. If your theme strips them, check the image output in your template files. In Shopify, use the image_tag helper, which includes dimensions by default.

Step 5: Handle dynamic or user-uploaded images. If your site accepts image uploads, your backend should detect the dimensions when the image is uploaded and store them. Then your template can include the correct width and height when rendering the tag.

Setting dimensions that do not match the actual image. If you set width="800" on a 400px image, browsers still use the declared dimensions for layout. The image renders at its CSS size, but the aspect ratio calculation could be wrong. Use the actual image dimensions.

Using only width or only height. Both are required for the browser to calculate the aspect ratio. Setting only width leaves the browser guessing the height, and layout shift still happens.

Removing dimensions because they interfere with CSS. If your CSS sets a different size, the HTML attributes still provide the aspect ratio for layout reservation. Do not remove them. Let CSS override the rendered size while HTML provides the ratio.

Forgetting images added by JavaScript. If a script injects images into the page, those images need dimensions too. Check your JS components and ensure they set width and height when creating img elements.

After adding dimensions, run another SiteCurl scan. The finding should report zero images missing width/height. You can also check manually: right-click an image in your browser, select 'Inspect,' and verify that both width and height attributes are present in the HTML tag.

To measure layout shift, use Chrome's Lighthouse (in dev tools) and check the CLS score. A CLS under 0.1 is considered good. If it is higher, look for other causes beyond images, like ads or dynamically inserted content.

Adding width and height to image tags is one of the simplest fixes in web performance. It costs nothing, requires no tooling, and eliminates the most common cause of layout shift. Two attributes per image tag. That is it.