Open tahirmahmudzade opened 2 weeks ago
NuxtImg with preset cloudflare_pages
will not do any optimization and leave the link as-is due to cloudflare worker not supporting sharp
(as it requires multi-threads), you probably can choose one bellow
cloudflare
)static
(no server/worker)static
, then copy the _ipx folder to public, build again in preset cloudflare_pages
(just a workaround, not sure it works 100%)
Describe the bug
When using the NuxtImg component in a Nuxt 3 application, image optimization works correctly during local development. However, when deploying the application to Cloudflare Pages using nuxthub, the images are served without any optimization. The NuxtImg component’s props (such as format, height, width, and fit) are not applied in production, resulting in large image sizes and dimensions. I'm testing before deploying using
wrangler dev
and the optimizations done by NuxtImg are not working.To Reproduce
Steps to reproduce the behavior:
wrangler dev
to preview the production build locally before committing and pushing the changes.Expected behavior The NuxtImg component should apply the specified optimization props in the production environment, just as it does during local development. Images should be served in the optimized formats and sizes specified, resulting in reduced file sizes and dimensions.
Screenshots local dev:
wrangler dev:
Here is the relevant code
nuxt.config.ts
Problem Details: • In local development (npm run dev), the NuxtImg component optimizes images as expected. For example, a category image originally sized at 5.7 MB with dimensions of 4000x4000 pixels is optimized down to 13 KB with dimensions of approximately 224x224 pixels. • When building and previewing the production build using
wrangler dev
, or deploying to Cloudflare Pages via Nuxthub, the images are served in their original sizes (5.7 MB and 4000x4000 pixels). The optimization props specified in the NuxtImg component are not applied. • I am not able to use Cloudflare Image Resizing services and prefer to handle image optimization at the Nuxt level.@danielroe @pi0 @farnabaz