Skip to content
Orino Docs

Images missing explicit dimensions (Nuxt)

What this means

Section titled “What this means”

Orino found raw <img> tags in .vue files in your Nuxt project that are missing width and height attributes. Without them, the browser cannot reserve the correct space before the image loads, causing layout shift (CLS). CLS is a Core Web Vitals metric that affects Google ranking.

How to fix it

Section titled “How to fix it”

Option 1: Migrate to <NuxtImg> (recommended)

<NuxtImg> from @nuxt/image requires width and height and applies them correctly in the output. Install the module if you have not already:

Terminal window
npm install @nuxt/image
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/image'],
})

Then replace raw <img> tags:

<!-- before -->
<img src="/images/product.jpg" alt="Product shot" />


<!-- after -->
<NuxtImg src="/images/product.jpg" alt="Product shot" width="800" height="600" />

<NuxtImg> is globally available after registering the module. No import needed in <script setup>.

Option 2: Add explicit dimensions to the raw <img> tag

If @nuxt/image is not an option, add width and height directly to the <img> tag:

<img src="/images/product.jpg" alt="Product shot" width="800" height="600" />

Add a global CSS rule to allow responsive scaling without losing the reserved space:

img {
  max-width: 100%;
  height: auto;
}

Verify the fix

Section titled “Verify the fix”

Re-run the audit:

Terminal window
npx orino audit https://yourdomain.com

The “Images missing explicit dimensions” check should pass. In the rendered HTML, <NuxtImg> outputs a standard <img> with explicit width and height attributes.

Section titled “Related fixes”