Extremely high processor load when processing images using `ipx`

[dmitryggr]

Environment

• Operating System: Linux
• Node Version: v22.19.0
• Nuxt Version: 3.17.7
• Nitro Version: 2.12.5
• Package Manager: npm

Version

1.11.0

Description

When processing images using ipx on the server, the processor is subjected to an extremely high load.

Additional context

I attempted to utilize @nuxt/image to optimize image loading. I retained ipx as the provider. When I deploy my application to the server, the processor becomes heavily loaded when loading pages and sending requests for images. If I specify the format [“avif”, ‘webp’] in nuxt.config.ts, the wait time from the server can be around 10-15 seconds. If I leave only [“webp”], the time is reduced to 2-4 seconds (which is still a lot).

nuxt.config.ts:

  image: {
    domains: ['cdn.name.io'],
    format: ['avif', 'webp'],
    provider: 'ipx',
    ipx: {
      maxAge: 60 * 60 * 24 * 365,
    },
    screens: {
      xxs: 360,
      s: 391,
      xs: 528,
      sm: 768,
      md: 920,
      l: 1160,
      lm: 1280,
      lg: 1440,
      xl: 1617,
      xxl: 1833,
      xxxl: 2264,
    },
  }

If i switch to a custom provider (just take the image from the original link), the problem disappears.

providers/selfhost.ts:

import { joinURL } from 'ufo';
import type { ProviderGetImage } from '@nuxt/image';
import { createOperationsGenerator } from '#image';

const operationsGenerator = createOperationsGenerator();

export const getImage: ProviderGetImage = (
  src,
  { modifiers = {} } = {},
) => {
  const baseUrl = '';
  const operations = operationsGenerator(modifiers);
  return {
    url: joinURL(baseUrl, src + (operations ? '?' + operations : '')),
  };
};

In a locally running application, when requesting a page and processing images, the processor load increases from 7% to 15-20% (MacBook M3 Pro), but this is enough for the images to load instantly.