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:  `bun@1.1.17`
- Builder:          `-`
- User Config:      `devtools`, `css`, `modules`, `ssr`, `image`, `nitro`, `shadcn`
- Runtime Modules:  `@nuxtjs/tailwindcss@6.12.0`, `@nuxtjs/device@3.1.1`, `nuxt-icon@0.6.10`, `shadcn-nuxt@0.10.4`, `@nuxt/image@1.7.0`
- 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:  `bun@1.1.17`
- Builder:          `-`
- User Config:      `devtools`, `css`, `modules`, `ssr`, `image`, `nitro`, `shadcn`
- Runtime Modules:  `@nuxtjs/tailwindcss@6.12.0`, `@nuxtjs/device@3.1.1`, `nuxt-icon@0.6.10`, `shadcn-nuxt@0.10.4`, `@nuxt/image@1.7.0`
- 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:  `bun@1.1.17`
- Builder:          `-`
- User Config:      `devtools`, `css`, `modules`, `ssr`, `image`, `nitro`, `shadcn`
- Runtime Modules:  `@nuxtjs/tailwindcss@6.12.0`, `@nuxtjs/device@3.1.1`, `nuxt-icon@0.6.10`, `shadcn-nuxt@0.10.4`, `@nuxt/image@1.7.0`
- 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:  `bun@1.1.17`
- Builder:          `-`
- User Config:      `devtools`, `css`, `modules`, `ssr`, `image`, `nitro`, `shadcn`
- Runtime Modules:  `@nuxtjs/tailwindcss@6.12.0`, `@nuxtjs/device@3.1.1`, `nuxt-icon@0.6.10`, `shadcn-nuxt@0.10.4`, `@nuxt/image@1.7.0`
- Build Modules:    `-`

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

Nuxt Image not optimizing images

Similar Threads

Nuxt Image not optimizing images

Similar Threads

Similar Threads

Similar Threads