Skip to content
Orino Docs

Raw <img> tags (Nuxt)

What this means

Section titled “What this means”

Orino found raw <img> tags in .vue files in your Nuxt project. Nuxt’s <NuxtImg> component (from @nuxt/image) provides automatic WebP and AVIF conversion, responsive srcset generation, lazy loading, and enforced dimensions to prevent CLS. Raw <img> tags serve the original unoptimised file.

How to fix it

Section titled “How to fix it”

Install @nuxt/image if you have not already, then register it in nuxt.config.ts.

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

Replace raw <img> tags with <NuxtImg>. The component is globally available after registering the module — no import needed.

<!-- before -->
<img src="/images/hero.jpg" alt="Hero" />


<!-- after -->
<NuxtImg src="/images/hero.jpg" alt="Hero" width="1200" height="600" />

For images that should be lazy-loaded (below the fold), <NuxtImg> lazy-loads by default. For the hero or LCP image, disable this:

<NuxtImg
  src="/images/hero.jpg"
  alt="Hero"
  width="1200"
  height="600"
  fetchpriority="high"
  preload
/>

For responsive images that need different sizes on different screens, use <NuxtPicture> which generates a <picture> element with multiple sources:

<NuxtPicture
  src="/images/hero.jpg"
  alt="Hero"
  :width="1200"
  :height="600"
  sizes="sm:100vw md:50vw lg:1200px"
/>

Verify the fix

Section titled “Verify the fix”

Re-run the audit:

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

The “Raw <img> tags” check should pass. In the rendered HTML, <NuxtImg> outputs a standard <img> with an optimised /_ipx/ URL.

Section titled “Related fixes”