Next.js Discord

Discord Forum

WebP & avif Images - don't work

Unanswered
Sutherman posted this in #help-forum
Open in Discord
SuthermanOP
I have this in my next.config.js:
/**
 * @type {import('next').NextConfig}
 */

const nextConfig = {
  reactStrictMode: true,
  distDir: ".next",
  output: 'standalone',
  images: {
    formats: ['image/webp','image/avif'], // Reihenfolge = Präferenz
  },
};

module.exports = nextConfig;

This should generate WebP and AVIF Images for Browser which support those File-Formats.
But I found that this doesn't work at all.

I've made sure, that the Image is insert via <Image>-Tag: 
hdiv className="relative">
                    <Image
                      className="mx-auto mb-14"
                      src={banner.image}
                      width={750}
                      height={390}
                      priority
                      fetchPriority="high"
                      sizes="(max-width: 640px) 100vw,
                             (max-width: 1024px) 80vw,
                             50vw"
                      style={{
                        maxWidth: "90%",
                        height: "auto",
                        border: "2px solid #fff",
                        borderRadius: "16px",
                        boxShadow: "0 12px 40px rgba(0,0,0,0.15)"
                      }}/>

                  </div>

But after Deploy, the image is still delivered as jpeg (see image 1)
Any Idea why?

6 Replies

Macao paper wasp
Did you make sure your browser is advertising it supports this image format? By checking the image request headers, you should see something like: Accept: image/avif,image/webp...
R.paco
You're using <Image /> and formats: ['image/webp', 'image/avif'] correctly ✅
If images still show as .jpg, it’s likely one of these:

### 🔍 Checklist:

1. Are you testing with next build && next start? (next dev skips optimization)
2. Browser must support and request webp/avif
3. Image must be local (/public/...) or from a trusted domain

---

### ✅ Example (local image):

import Image from "next/image"

export default function Hero() {
  return (
    <Image
      src="/images/suther.jpg"
      width={750}
      height={390}
      alt="Samuel Suther"
      priority
      className="mx-auto mb-14"
      style={{
        maxWidth: "90%",
        height: "auto",
        border: "2px solid #fff",
        borderRadius: "16px",
        boxShadow: "0 12px 40px rgba(0,0,0,0.15)"
      }}
    />
  )
}


Then run:

next build && next start


➡️ Open devtools → Network → check image Accept header
➡️ Should show .webp or .avif if the browser supports it

Let me know if you're hosting images externally or need to allow domains.
Rash
@Sutherman
@Rash
SuthermanOP
Hey @Rashworld
sorry for the delay...
@R.paco
1. I've uploded it to production, so it's a build
2. Browser should be able to handle webp/avif (is recent Brave browser Chromium 143.0.7499.192)
3. Image reference to /_next/image?url=....." in page sourcecode

This is the (partial) sourcecode of the pages/index.js: 
const Home = ({frontmatter}) => {
  const {banner, feature, services, workflow, call_to_action} = frontmatter;
  const {title} = config.site;

  return (
...
 <div className="relative">
                    <Image
                      className="mx-auto mb-14"
                      src={banner.image}
                      width={750}
                      height={390}
                      alt="Samuel Suther - Web & App Entwickler"
                      priority
                      fetchPriority="high"
                      sizes="(max-width: 640px) 100vw,
                             (max-width: 1024px) 80vw,
                             50vw"
                      style={{
                        maxWidth: "90%",
                        height: "auto",
                        border: "2px solid #fff",
                        borderRadius: "16px",
                        boxShadow: "0 12px 40px rgba(0,0,0,0.15)"
                      }}/>

                  </div>


and content/_index.md is:
banner:
  image: /images/suther.jpg
  button:
    enable: false
    label: "Kontakt aufnehmen"
    link: "/contact"


Dev-Tools:
Header > accept === image/avif,image/webp,image/apng,image/svg+xml,image/,/*;q=0.8

Images are at the same webspace.