Imagine you're setting up chairs for an event, but you have no idea how large each chair is until it arrives. As the chairs start showing up—some tiny, some enormous—you'd need to constantly rearrange the entire seating layout. That's essentially what happens in your browser when it encounters unsized images.
Unsized images are simply images in your HTML that don't have explicit width and height attributes set. When the browser encounters an image without dimensions, it initially has no idea how much space to reserve for it. Only after the image downloads can the browser determine its dimensions and allocate the proper space—often causing surrounding content to suddenly shift to accommodate the newly-determined size.
When browsers load pages with unsized images, a frustrating sequence occurs:
These layout shifts create several serious problems for your visitors:
Google recognizes these issues as so important that they created a specific metric—Cumulative Layout Shift (CLS)—as one of their Core Web Vitals, directly impacting search rankings.
The good news is that preventing these layout shifts is surprisingly simple: just add width and height attributes to your image tags. For example:
<!-- Without dimensions (causes layout shifts) -->
<img src="product.jpg" alt="Our bestselling product">
<!-- With dimensions (prevents layout shifts) -->
<img src="product.jpg" width="800" height="600" alt="Our bestselling product">When you provide these attributes, the browser immediately knows how much space to reserve for the image, even before it downloads. This creates a stable layout from the start, with no surprises or shifts as images load.
Specifying image dimensions used to be standard practice in the early days of the web. With the rise of responsive design, many developers stopped adding width and height attributes, thinking they weren't compatible with flexible layouts. Modern browsers have solved this problem, making image dimensions important again for performance and user experience.
One common reason developers skip width and height attributes is concern about responsive design. After all, in responsive layouts, images often need to scale based on the viewport size, so fixed pixel dimensions seem incompatible.
However, modern browsers are smarter than you might think. They use the width and height attributes to calculate the image's aspect ratio, not to rigidly set its displayed size. This aspect ratio information is then used to reserve the correct amount of space, even when CSS causes the image to display at different dimensions.
This means you can have both properly sized images AND responsive layouts with this approach:
<!-- In your HTML, include the dimensions -->
<img src="hero.jpg" width="1200" height="800" alt="Hero image">
<!-- In your CSS, make it responsive -->
img {
max-width: 100%;
height: auto;
}With this combination, the browser will:
Identifying and addressing unsized images on your website involves a few steps:
When reviewing your website for unsized images, pay special attention to:
Every image in your HTML should include these fundamental attributes.
Simple fix: Add width and height attributes to all <img> tags in your HTML, using the image's natural dimensions (the actual pixel dimensions of the image file).
You need both HTML attributes and proper CSS for the best results.
Simple fix: After adding width and height attributes, use CSS like `max-width: 100%; height: auto;` to ensure images scale properly while maintaining their aspect ratio.
For browsers that support it, the aspect-ratio property provides another way to maintain image proportions.
Simple fix: For added stability, you can explicitly set the aspect ratio in CSS: `aspect-ratio: width / height;` (for example, `aspect-ratio: 16 / 9;` for widescreen images).
Background images also need dimensions to prevent layout shifts.
Simple fix: For elements with background images, set explicit dimensions or use aspect-ratio in your CSS to ensure they maintain their space before the image loads.
Content management systems often strip out width and height attributes.
Simple fix: For WordPress, plugins like Smush or Perfmatters can automatically add width and height attributes to images. For other CMSes, look for similar plugins or implement server-side processing.
Some image formats inherently support better dimension handling.
Simple fix: Consider using modern formats like WebP or AVIF, which not only provide better compression but also maintain clear intrinsic dimensions that browsers can detect more efficiently.
Images loaded via JavaScript often miss dimension attributes.
Simple fix: When adding images dynamically with JavaScript, make sure to set the width and height attributes before adding the image to the DOM: `img.width = 800; img.height = 600;`
What's happening: Your content management system or rich text editor is stripping width and height attributes when content is saved.
Simple solution: Look for CMS settings that preserve HTML attributes, use plugins that restore dimensions, or implement server-side processing that adds dimensions to images before sending HTML to browsers.
What's happening: You're using <picture> elements or srcset attributes for responsive images but aren't sure how to handle dimensions across different image versions.
Simple solution: Add width and height attributes to the fallback <img> tag within your <picture> element, based on the dimensions of the 1x image. Browsers will calculate the correct aspect ratio even when loading alternate sources.
What's happening: Users can upload images to your site, and you don't know their dimensions in advance to set the attributes.
Simple solution: Process uploads server-side to extract dimensions and either add them to the HTML or store them in your database for when the image is displayed. Alternatively, use client-side JavaScript to update dimensions after the image loads for the first time.
What's happening: You're displaying images like product photos that naturally have different aspect ratios, making it hard to standardize dimensions.
Simple solution: Consider a consistent container approach where images are contained within fixed-ratio boxes (using object-fit: contain or cover) to maintain layout stability while accommodating varying image proportions.
Adding dimensions to your images impacts several key performance metrics:
| Performance Metric | How Properly Sized Images Help |
|---|---|
| Cumulative Layout Shift (CLS) | Directly improves CLS by preventing content shifts as images load |
| Largest Contentful Paint (LCP) | Can improve LCP by allowing browsers to better prioritize important images and reserve their space correctly |
| First Contentful Paint (FCP) | Helps the browser create a more accurate initial layout faster, potentially improving FCP |
| User Experience Metrics | Reduces frustration from misclicks and lost reading position, improving engagement metrics |
| SEO Rankings | Better CLS scores positively impact Core Web Vitals and potentially improve search rankings |
Of these, the most significant impact is on Cumulative Layout Shift (CLS), which directly measures the visual stability of your page—making proper image sizing one of the most effective ways to improve this crucial metric.
Companies that have implemented proper image sizing have seen meaningful improvements in both performance metrics and business outcomes:
These examples demonstrate that the simple act of adding width and height attributes to images can have a surprisingly significant impact on how users experience your website and whether they accomplish their goals.
The humble width and height attributes might seem like minor technical details, but they're actually powerful tools for creating a professional, stable website experience. By taking the small step of specifying dimensions for all your images, you're making a big statement about your commitment to user experience.
Think of image dimensions as reserved seating at an event. When seats are clearly marked and reserved, everyone knows exactly where to go, the venue can properly plan the layout, and there's no confusion or last-minute shuffling. This creates a smooth, organized experience that reflects well on the organizers.
The beauty of this optimization is its simplicity. Unlike many performance improvements that require complex technical solutions, adding width and height attributes is straightforward and can be implemented quickly. It's truly one of the best return-on-investment opportunities in web performance optimization.
By ensuring all your images are properly sized, you're not just improving technical metrics—you're creating a more stable, professional, and trustworthy experience that keeps visitors engaged with your content instead of being distracted by a jumpy, shifting layout.
Greadme's easy-to-use tools can help you identify unsized images on your website and provide simple, step-by-step instructions to add proper dimensions—even if you're not technically minded.
Stabilize Your Layout Today