[SOLVED] Setting the dimensions on the image doesn't help to remove the CLS

Setting the dimensions on the image doesn't help to remove the CLS

I'm experiencing Cumulative Layout Shift (CLS) issues with images in my Nuxt 3 project using Tailwind CSS. Despite implementing aspect ratio containers and proper image dimensions, my pictures still cause layout shifts during loading.

Images flicker during page load

Layout shifts occur even with aspect ratio and explicit dimensions

Both desktop and mobile versions exhibit this behavior

<div class="relative max-w-[605px]">
  <!-- Desktop Image -->
  <div class="hidden md:block w-full max-w-[605px] aspect-[1222/1008]">
    <NuxtImg 
      src="/terminal.webp" 
      width="1222"
      height="1008"
      class="w-full h-full object-contain"
    />
  </div>
  
  <!-- Mobile Image -->
  <div class="block md:hidden aspect-[696/704]">
    <NuxtImg 
      src="/terminal-mobile.webp"
      width="696"
      height="704"
      class="w-full h-full object-contain"
    />
  </div>
</div>

Space isn't reserved for images before they load, making the content shift. Is there a missing CSS containment property or a Nuxt-specific hydration behavior causing this? I've read many guides but found no advice except setting dimensions. Using Nuxt 3.17.1 with @nuxt/image 1.10.0. Thank you

Solution

You're mostly on right path but use Use a relative container along with aspect-ratio & background placeholder please.

<div class="relative w-full max-w-[605px] aspect-[1222/1008] overflow-hidden">
  <NuxtImg 
    src="/terminal.webp" 
    width="1222"
    height="1008"
    class="absolute inset-0 w-full h-full object-contain"
    placeholder="blur"
  />
</div>


<div class="relative w-full aspect-[696/704] overflow-hidden md:hidden">
  <NuxtImg 
    src="/terminal-mobile.webp"
    width="696"
    height="704"
    class="absolute inset-0 w-full h-full object-contain"
    placeholder="blur"
  />
</div>