Suggest an editImprove this articleRefine the answer for “Why is it important to specify dimensions (width, height) for images?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**The `width` and `height` attributes** on an image tell the browser the picture's dimensions in advance, so it reserves space for it in the layout before the file even loads. **Key point:** without them the page "jumps" (layout shift) as pictures finish loading, which worsens CLS (Cumulative Layout Shift) and the user experience.Shown above the full answer for quick recall.Answer (EN)ImageSpecifying the `width` and `height` attributes on images matters not only for appearance, but also for **loading speed**, **layout stability**, and **correct page rendering**. Here is what actually happens when the dimensions **are** specified and when they **are not**. --- ### 1. Without specified dimensions When the browser sees: ```html <img src="photo.jpg" alt="Photo"> ``` it **does not know in advance** how much space the picture will need. It starts loading the file, but for now **does not reserve space in the layout**. As a result: - first the text and other elements load; - then, when the image arrives, the page "jumps" (shifts downward); - the user sees a visual jump (the so-called **layout shift**). --- ### 2. With specified dimensions ```html <img src="photo.jpg" alt="Photo" width="400" height="300"> ``` Now the browser **immediately knows** that the picture will take up 400x300 pixels, and **reserves space for it in advance**, even if the image has not loaded yet. As a result: - the page **does not jump while loading**; - text, buttons, and interface elements stay in place; - the browser can render the layout faster. --- ### 3. Why this matters for performance 1. **Fewer layout recalculations**: the browser does not recompute element positioning on every image load. 2. **CLS (Cumulative Layout Shift) is reduced**: this is a page stability metric in Google PageSpeed. The fewer content shifts, the better the SEO and user experience. 3. **The browser can load the page in parallel**: it knows where the image will be and does not wait for its dimensions. --- ### 4. Dimensions can be set via CSS If the layout is responsive, it is better to use CSS: ```css img { width: 100%; height: auto; } ``` or through HTML + CSS: ```html <img src="photo.jpg" alt="Photo" width="800" height="600" style="max-width: 100%; height: auto;"> ``` This way the browser still knows the original proportions, and CSS adapts them to the screen width. --- ### 5. How the browser uses this data - While parsing HTML, it knows the original **aspect ratio** (width:height). - If the image loads later, it has already **reserved a block of the required size**. - Even with `loading="lazy"`, the content does not "jump". --- ### Summary: | Reason | Why dimensions are needed | |---|---| | Layout | Reserve space for the image | | Speed | Speed up the page's first render | | UX | Eliminate visual "jumps" | | SEO | Improve the CLS metric in Google PageSpeed | | Responsiveness | Allow proportions to be preserved when the screen size changes | --- **In simple terms:** If you do not specify `width` and `height`, the page will "jump" while the pictures finish loading. If you do, the browser will reserve space in advance, and the site will look **stable, fast, and professional.**For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.