NuxtImg optimization props not applied when deploying using with Cloudflare

[tahirmahmudzade]

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:

1. Set up a Nuxt 3 application using the NuxtImg component to display images with optimization props.
2. Configure the application to deploy to Cloudflare Pages via Nuxthub.
3. Use wrangler dev to preview the production build locally before committing and pushing the changes.
4. Access the deployed application on Cloudflare Pages.
5. Observe that images are served in their original sizes without any optimizations applied.

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:

• Nuxt Version: ^3.13.2
• Nuxt Image Version: ^1.8.1
• Deployment Target: Cloudflare Pages via Nuxthub
• Preview Tool: Wrangler (used for wrangler dev to preview the production build)

Here is the relevant code

<template>
  <div class="container mx-auto px-4 py-8">
    <div class="category-section">
      <h2 class="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4 text-center">
        {{ t('Categories') }}
      </h2>
      <div class="flex overflow-x-auto space-x-4 pb-4">
        <NuxtLink
          v-for="category in categories"
          :to="`/categories/${category.name.toLowerCase().trim()}`"
          :key="t(category.name)"
          class="bg-gray-200 dark:bg-gray-800 flex-none w-36 flex flex-col items-center p-4 rounded-lg shadow-md"
        >
          <NuxtImg
            :src="`/img/categories/${category.img!}`"
            :alt="category.name"
            :nonce="nonce"
            loading="lazy"
            format="webp"
            :height="144"
            :width="112"
            fit="cover"
            placeholder="/img/categories/default-category.webp"
            @error="event => handleImageError(event, 'category')"
          />
          <p class="text-gray-900 dark:text-gray-100 font-semibold text-center mt-4">
            {{ t(category.name) }}
          </p>
        </NuxtLink>
      </div>
    </div>
  </div>
</template>

nuxt.config.ts

export default defineNuxtConfig({
extends: ['@nuxt/ui-pro'],
  modules: [
    '@nuxt/ui',
    '@nuxt/image',
    '@nuxthub/core',
    '@nuxt/icon',
    'nuxt-auth-utils',
    'nuxt-typed-router',
    '@pinia/nuxt',
    'pinia-plugin-persistedstate/nuxt',
    '@vueuse/nuxt',
    'nuxt-security',
    '@nuxtjs/i18n',
  ],

image: { dir: 'public', format: ['webp'], domains: ['schmalify.com'], cloudflare: { baseURL: 'https://schmalify.com' } },
})

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

[phi0411141]

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

• You can pay, use cloudflare image service (NuxtImage provider cloudflare)
• Optimize the images yourself and use normal img tag
• Build as preset static (no server/worker)
• Build using preset static, then copy the _ipx folder to public, build again in preset cloudflare_pages (just a workaround, not sure it works 100%)

[Baroshem]

Hey guys,

Thanks @phi0411141 for sharing more context about this issue and how it can be solved.

Does this answer your question @tahirmahmudzade ? :)

[tahirmahmudzade]

Hey guys,

Thanks @phi0411141 for sharing more context about this issue and how it can be solved.

Does this answer your question @tahirmahmudzade ? :)

Sorry for the late reply, been busy lately 😮‍💨 @phi0411141 Thank you so much for your help, i ended up using manual optimization for the images