Check if your images have width and height set

SiteCurl looks at each <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 sizes 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 each page in your scan. A full scan of 100 pages can catch hundreds of images missing sizes.

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 sizes 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 sizes are the most common cause of layout shift on content-heavy pages.

Layout shift also hurts conversions. If a user 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 sizes 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 sizes, 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 sizes. Run a SiteCurl scan. The image sizes 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 sizes. 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 often get sizes added on its own. If your theme strips them, check the image output in your template files. In Shopify, use the image_tag helper, which includes sizes by default.

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

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

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 sizes because they interfere with CSS. If your CSS sets a new 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 sizes too. Check your JS components and ensure they set width and height when creating img elements.

After adding sizes, 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 check 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 seen as good. If it is higher, look for other causes beyond images, like ads or on the fly 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.