Skip to content
Orino Docs

Raw <img> tags (Next.js)

What this means

Section titled “What this means”

Orino found raw <img> tags in .tsx or .jsx files in your Next.js project. The next/image component provides automatic WebP and AVIF conversion, lazy loading with a blur placeholder, and enforced width/height to prevent layout shift. Raw <img> tags skip all of this and serve unoptimised images at their original file size and format.

How to fix it

Section titled “How to fix it”

Replace raw <img> tags with <Image> from next/image.

For local images, import the file directly. Next.js reads the dimensions at build time so you do not need to specify them.

import Image from 'next/image'
import heroImage from '@/assets/hero.jpg'


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


// after
<Image src={heroImage} alt="Hero" />

For remote images, provide explicit width and height. You must also add the remote hostname to remotePatterns in next.config.ts.

import Image from 'next/image'


// before
<img src="https://cdn.example.com/hero.jpg" alt="Hero" />


// after
<Image
  src="https://cdn.example.com/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
/>
next.config.ts
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'cdn.example.com',
      },
    ],
  },
}
export default nextConfig

For images that fill a container, use the fill prop instead of fixed dimensions. The parent element must have position: relative and an explicit height.

<div style={{ position: 'relative', height: '400px' }}>
  <Image src={heroImage} alt="Hero" fill style={{ objectFit: 'cover' }} />
</div>

Verify the fix

Section titled “Verify the fix”

Re-run the audit from your project directory:

Terminal window
npx orino audit

The “Raw <img> tags” check should pass. In the browser, inspect the rendered image — it should have a /_next/image?url=... src, confirming Next.js is serving an optimised version.

Section titled “Related fixes”