# Images without dimensions — Layout Shift ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056102227/f73fc093-d0d2-4629-a879-cfff464ef13e.png align="left") Source: Nidhinkumar If you don’t have time to read but want to know the crust of this post. Find the quick read 👇 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056104321/b44f904c-5fe6-4e95-9ca7-8fcb91d22fc6.gif align="left") A quick read of what we are going to look at today After days of hard work building a web application where you feel proud yourself that you have built something great until the fishy eye spots the change > “I was about to click it! but why did it move? 😠” Still, you are clueless about what we are talking about. Just look at the below example ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056106227/954bf532-69f0-4a53-9598-188d46b3ff3b.gif align="left") Spot the change Still couldn’t figure out what’s happening 🤔. Okay, let’s break the suspense. In the above example, an image is getting loaded in between the two texts. Oh, yes man we could see that in the picture what’s wrong with it. If that’s the question that strikes your mind right now then my answer is i haven’t completed my words yet. Just look at the below pic ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056108098/a523e1f0-db00-411d-b198-1ca701a1d05e.gif align="left") Spot the difference As I have said earlier an image is added in between the two texts (maybe it took some time to load the image that’s the glitch that we see in between the image and the text)- That’s what a user thinks🤔. 🙋 But the developer raises the question but I have set the layout like below ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056109814/c1bc675d-85ea-43a8-91be-a29470483865.png align="left") Layout block Then why does it behaves like this ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056111342/c1a6e6f7-3065-4599-b71d-a6c05d2534ce.png align="left") Layout shift Why there is a shift in the layout ❓ By the way that’s the topic, we are going to explore today 📄 > Layout Shift We will look into 1. What is Layout Shift 2. What is CLS a.k.a Cumulative Layout Shift 3. What is a good CLS Score 4. Layout shifts for images 5. How to fix Layout shift for images ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056112732/f32af9ed-19b7-405c-9bf4-5f0812017355.gif align="left") ### 1\. What is Layout shift? Layout shifts are defined by the Layout Instability API which reports the layout-shift entries any time an element that is visible within the viewport changes its start position between two frames such elements are called **unstable elements**. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056114644/0185ab29-7a13-4101-96bd-54ff3097f80d.gif align="left") A burst of layout shifts know as a **session window**, occurs when one or more layout shifts occur in rapid succession with less than 1 second between each shift and a maximum of 5 seconds for the total window duration. The largest burst is the session window with the maximum cumulative score of all layout shifts on that window ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056116019/74353f97-f977-4910-ac87-cbbb958e7072.gif align="left") ### 2\. What is CLS a.k.a Cumulative Layout Shift CLS is a measure of the largest burst of layout shift that occurs during the entire lifespan of a page. A layout shift occurs when a visible element changes its position from one rendered frame to another ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056117843/fe2b5900-d458-43f8-8b15-14b2085076ec.gif align="left") ### 3\. What is a good CLS Score To provide a good user experience, sites strive to have a CLS score of **0.1 or less**. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056119705/6c95fbf1-2247-4e21-86f3-d0da9f4d1856.gif align="left") CLS Score To ensure you are hitting this target for most of the users, a good threshold to measure is the **75th**[**percentile**](https://www.mathsisfun.com/data/percentiles.html) of page loads, segmented across mobile and desktop devices. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056121548/509e7050-b2f6-48dd-a4b4-664a2b82ef66.gif align="left") ### 4\. Layout shifts for images One of the easiest things we can do to reduce CLS is to ensure the width and height for the image tag explicitly. But hold on I have used CSS class where I have added the width and height for the image tag 👇 then why there is a shift ❓ ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056123376/f2c85112-abb2-4ad1-a4b4-46eb5fafc6b0.png align="left") HTML ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056124776/741c1973-ef54-4008-8dbf-467adc1f77e1.png align="left") 👉 Images that aren’t explicitly declared with **width** and **height** attributes are usually **resized using CSS** (either on the image or in the parent container itself) When this happens, the browser can only determine their dimensions and **allocate space** for them once it starts downloading the **unsized** image ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056126192/6ff1cb82-83ed-406e-b258-1cbf621d5482.gif align="left") Bad and Good CLS 👉 By Explicitly declaring `width` and `height` attributes we can ensure that the browser will calculate and reserve sufficient space for the images. This can minimize the main-threadwork, prevent large layout shifts and create a smooth experience for your visitors ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056127703/1aa264b2-b5bd-43b7-9693-485ee5fd19a2.gif align="left") ### 5\. How to fix Layout shift for images Simply specify both `width` and `height` for the image element explicitly which ensures correct spacing is used for images ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056129553/009c78b0-9e45-41f7-9f8c-0338639313a2.png align="left") The modern browsers will calculate the aspect ratio for the image automatically based on the width and height. ### Congratulations 🏆 You have learned what is Layout shift, What is Cumulative Layout Shift, and how to reduce layout shift for images Catch you up in a new post till then **Happy Learning!** ### Reference Links 🔖 [**Cumulative Layout Shift (CLS)** \*Updated Jun 1, 2021: The implementation of CLS has changed. To learn more about the reasons behind the change, check…\*web.dev](https://web.dev/cls/) [**PageSpeed Insights** \*Have specific, answerable questions about using PageSpeed Insights? Ask your question on Stack Overflow. For general…\*developers.google.com](https://developers.google.com/speed/pagespeed/insights/)