Nuxt•2mo ago

Trying to get Nuxt Image ipx caching to work

It's taking a long time to optimise images on the server (default configuration rather than SSG). And the second time I access the image it's no quicker, which makes me think it's not using the cache but rather regenerating the image each time. The image source is _ipx/... so I know the optimizer is working, but how can I test whether the cache is being used? (I've added in the maxAge as suggested in this post, but it doesn't seem to have made a difference)

image: {
    // @ts-expect-error
    domains: [process.env.DRUPAL_URL],
    format: ['webp', 'png'],
    provider: 'ipx',
    ipx: {
      modifiers: {
        quality: 90
      },
      maxAge: 86400 //24h
    }
  },

image: {
    // @ts-expect-error
    domains: [process.env.DRUPAL_URL],
    format: ['webp', 'png'],
    provider: 'ipx',
    ipx: {
      modifiers: {
        quality: 90
      },
      maxAge: 86400 //24h
    }
  },

GitHub

Does NuxtImage with ipx cache the generated images on the server wh...

I'm a bit confused about how NuxtImage with ipx works, and I'm struggling to find answers in the documentation (https://image.nuxt.com/providers/ipx). How can we get an optimised image with...

4 Replies

kapa.ai•2mo ago

Hi @Octofuji. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I can offer some insights about Nuxt Image and IPX caching, but there isn't specific information about testing whether the cache is being used. However, I can provide some suggestions based on the available information. 1. Default Provider: The default provider for Nuxt Image is IPX, which is a self-hosted image optimizer. IPX Provider (https://image.nuxt.com/providers/ipx) 2. Caching in Nitro: Nuxt 3 uses Nitro as its server engine, which has built-in caching capabilities. While the knowledge sources don't specifically mention IPX caching, they do discuss Nitro caching. You might be able to leverage Nitro's caching features for your images. Caching in Nitro (https://www.youtube.com/watch?v=KN5e2Hh6uC0) 3. Configuration: Your configuration looks correct based on the available information. The maxAge setting you've added should theoretically help with caching, but as you've noted, it doesn't seem to be making a difference. 4. Testing Cache Usage: To test whether the cache is being used, you could try the following: a. Check the response headers of the image requests in your browser's developer tools. Look for cache-related headers like Cache-Control or ETag.
b. Monitor the server logs to see if the image processing is happening on subsequent requests.
c. Use server-side logging to track when image processing occurs. 5. Alternative Approaches: If you're still having issues with performance, you might want to consider: a. Using a static site generation approach, which pre-generates optimized images during build time. Static Images (https://image.nuxt.com/advanced/static-images)
b. Exploring other image providers that might offer better caching out of the box. Nuxt Image Providers (https://image.nuxt.com/get-started/providers) Unfortunately, the knowledge sources don't provide a direct method to test IPX caching or troubleshoot slow image optimization. If the problem persists, you might want to consider reaching out to the Nuxt community or filing an issue on the Nuxt Image GitHub repository for more specific guidance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@1152526931804307527> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

OctofujiOP•2mo ago

Doesn't the browser cache-control tell the browser how long to cache the image for? My question is about the IPX server.

OctofujiOP•2mo ago

The max age is 300. From reading this thread it seems that the default Nuxt/IPX setup doesn't have any server-side caching (i.e. optimisation requests are regenerated each time someone visits the site).

GitHub

ipx cache generated images locally · Issue #795 · nuxt/image

Hi, I wonder if there is an option to cache images generated by ipx locally. Right now, it seems that ipx will regenerate a set of images every time npm run generate is run, which can get very cumb...

Gaming

Programming

Trying to get Nuxt Image ipx caching to work

Did you find this page helpful?