Nuxt•2y ago

Nuxt Image not optimizing images

Using

<NuxtPicture>

<NuxtPicture>

does not optimize images, and for some images when using developer tools to observe the network requests shows that the image files are bigger than the actual images. I have also noticed that svg files do not work, I get various errors saying the files cannot be found, but after removing the

.svg

.svg

extension, the images load properly.

Image configuration in

nuxt.config.ts

nuxt.config.ts

image: {
    quality: 90,
    formats: ['webp', 'avif', 'jpeg'],
    provider: 'ipx',
  }

image: {
    quality: 90,
    formats: ['webp', 'avif', 'jpeg'],
    provider: 'ipx',
  }

I am using Bun instead of Node and using the default

ipx

ipx

provider

bunx nuxi info

bunx nuxi info

- Operating System: `Linux`
- Node Version:     `v22.3.0`
- Nuxt Version:     `3.12.2`
- CLI Version:      `3.12.0`
- Nitro Version:    `2.9.7`
- Package Manager:  `[email protected]`
- Builder:          `-`
- User Config:      `devtools`, `css`, `modules`, `ssr`, `image`, `nitro`, `shadcn`
- Runtime Modules:  `@nuxtjs/[email protected]`, `@nuxtjs/[email protected]`, `[email protected]`, `[email protected]`, `@nuxt/[email protected]`
- Build Modules:    `-`

- Operating System: `Linux`
- Node Version:     `v22.3.0`
- Nuxt Version:     `3.12.2`
- CLI Version:      `3.12.0`
- Nitro Version:    `2.9.7`
- Package Manager:  `[email protected]`
- Builder:          `-`
- User Config:      `devtools`, `css`, `modules`, `ssr`, `image`, `nitro`, `shadcn`
- Runtime Modules:  `@nuxtjs/[email protected]`, `@nuxtjs/[email protected]`, `[email protected]`, `[email protected]`, `@nuxt/[email protected]`
- Build Modules:    `-`

The size of the image that is loaded in the screenshot is 18.3MB

Nuxt Image not optimizing images

Using

<NuxtPicture>

<NuxtPicture>

.svg

.svg

extension, the images load properly.

Image configuration in

nuxt.config.ts

nuxt.config.ts

image: {
    quality: 90,
    formats: ['webp', 'avif', 'jpeg'],
    provider: 'ipx',
  }

image: {
    quality: 90,
    formats: ['webp', 'avif', 'jpeg'],
    provider: 'ipx',
  }

I am using Bun instead of Node and using the default

ipx

ipx

provider

bunx nuxi info

bunx nuxi info

- Operating System: `Linux`
- Node Version:     `v22.3.0`
- Nuxt Version:     `3.12.2`
- CLI Version:      `3.12.0`
- Nitro Version:    `2.9.7`
- Package Manager:  `[email protected]`
- Builder:          `-`
- User Config:      `devtools`, `css`, `modules`, `ssr`, `image`, `nitro`, `shadcn`
- Runtime Modules:  `@nuxtjs/[email protected]`, `@nuxtjs/[email protected]`, `[email protected]`, `[email protected]`, `@nuxt/[email protected]`
- Build Modules:    `-`

- Operating System: `Linux`
- Node Version:     `v22.3.0`
- Nuxt Version:     `3.12.2`
- CLI Version:      `3.12.0`
- Nitro Version:    `2.9.7`
- Package Manager:  `[email protected]`
- Builder:          `-`
- User Config:      `devtools`, `css`, `modules`, `ssr`, `image`, `nitro`, `shadcn`
- Runtime Modules:  `@nuxtjs/[email protected]`, `@nuxtjs/[email protected]`, `[email protected]`, `[email protected]`, `@nuxt/[email protected]`
- Build Modules:    `-`

The size of the image that is loaded in the screenshot is 18.3MB

Nuxt Image not optimizing images

Nuxt Image not optimizing images

Similar Threads