Nuxt•16mo ago

Nuxt Image does not optimize my images

hey guys, does anyone know why nuxt image doesn't optimize my images?
I added the module as per documentation and this is my config:

 ssr: false,
  nitro: {
    static: true,
  },
image: {
    strapi: {},
    format: ["webp", "avif", "png", "jpeg", "jpg", "svg"],
    domains: [`${process.env.NUXT_STRAPI_URL}`], // For Strapi-hosted images
    provider: "ipx", // For client-side optimization
  }

 ssr: false,
  nitro: {
    static: true,
  },
image: {
    strapi: {},
    format: ["webp", "avif", "png", "jpeg", "jpg", "svg"],
    domains: [`${process.env.NUXT_STRAPI_URL}`], // For Strapi-hosted images
    provider: "ipx", // For client-side optimization
  }

 ssr: false,
  nitro: {
    static: true,
  },
image: {
    strapi: {},
    format: ["webp", "avif", "png", "jpeg", "jpg", "svg"],
    domains: [`${process.env.NUXT_STRAPI_URL}`], // For Strapi-hosted images
    provider: "ipx", // For client-side optimization
  }

 ssr: false,
  nitro: {
    static: true,
  },
image: {
    strapi: {},
    format: ["webp", "avif", "png", "jpeg", "jpg", "svg"],
    domains: [`${process.env.NUXT_STRAPI_URL}`], // For Strapi-hosted images
    provider: "ipx", // For client-side optimization
  }

 <NuxtImg
      :src="getStrapiMedia(`${data.hero_image.data.attributes.url}`)"
      :alt="data.hero_image.data.attributes.alternativeText"
      class="w-full max-w-[339px] sm:max-w-[500px] md:max-w-[1080px] rounded-t-xl rounded-tr-xl"
    />

 <NuxtImg
      :src="getStrapiMedia(`${data.hero_image.data.attributes.url}`)"
      :alt="data.hero_image.data.attributes.alternativeText"
      class="w-full max-w-[339px] sm:max-w-[500px] md:max-w-[1080px] rounded-t-xl rounded-tr-xl"
    />

 <NuxtImg
      :src="getStrapiMedia(`${data.hero_image.data.attributes.url}`)"
      :alt="data.hero_image.data.attributes.alternativeText"
      class="w-full max-w-[339px] sm:max-w-[500px] md:max-w-[1080px] rounded-t-xl rounded-tr-xl"
    />

 <NuxtImg
      :src="getStrapiMedia(`${data.hero_image.data.attributes.url}`)"
      :alt="data.hero_image.data.attributes.alternativeText"
      class="w-full max-w-[339px] sm:max-w-[500px] md:max-w-[1080px] rounded-t-xl rounded-tr-xl"
    />

getStrapiMedia

getStrapiMedia

getStrapiMedia

getStrapiMedia returns the full url of the requested media (basically it appends the correct url in the value given if necessary.

during the

nuxt generate --prerender

nuxt generate --prerender

nuxt generate --prerender

nuxt generate --prerender process there aren't any images been generated in the

.output

.output

.output

.output folder (optimized images I mean) and the images showing at the user are the same as they are in the CMS. Most images are

.svg

.svg

.svg

.svg and they can be

2 MB

2 MB

2 MB

2 MB worth of size which I do not want that.

Any clues why they don't get optimized during the generate process?

danielroe•9/17/24, 8:16 AM

that's not yet supported (downloading images from a cms during generation)

george.x.rOP•9/17/24, 8:25 AM

@danielroe thank you! does that mean nuxt image only optimizes images that are located in the public folder?

danielroe•9/17/24, 8:32 AM

yes. it's responsible for the other providers to handle generating a url that is optimised via the url

george.x.rOP•9/17/24, 8:45 AM

so there is no way to optimize images retrieved from Strapi? they must be already optimized when uploaded there?

Ggeorge.x.r so there is no way to optimize images retrieved from Strapi? they must be alread...

Cue•9/17/24, 11:09 AM

Let Strapi handle the optimization. Check out the market, lots of plugins.

CCue Let Strapi handle the optimization. Check out the market, lots of plugins.

george.x.rOP•9/17/24, 11:09 AM

yeah I thought the nuxt-imagenuxt-image plugin would handle that

Nerijus•10/16/24, 5:52 AM

We have kind of opposite problem, we use our customer provider to generate correct urls for images, however during SSG, images are beind donwloaded and it killed external image provider. How can we ensure that it doesn't try to download images during SSG?

danielroe•10/16/24, 10:29 AM

Are your image URLs local? e.g. /some/url/some/url rather than https://cdn.myapi.com/some/urlhttps://cdn.myapi.com/some/url?

Nuxt Image does not optimize my images

Similar Threads

Similar Threads

Similar Threads