Upload collection formatOptions affect only the original image upload, not other generated sizes specified in the collection

[azivkovi]

Describe the Bug

export const Media: CollectionConfig = {
  slug: 'media',
  upload: {
    formatOptions: {
      format: 'jpeg',
      options: {
        quality: 75,
      },
    },
    imageSizes: [
      {
        name: 'thumbnail',
        width: 300,
      }
    ],
  },
// ...
}

When uploading a png to this collection, I expect it to be transformed to jpg and saved as such. This happens for the main image, but other sizes that are specified are generated with file extension of the image being uploaded, that being png in this case. I would expect the other sizes to be saved as jpg as well.

Example with png uploaded image:

Link to the code that reproduces this issue

https://github.com/azivkovi/payload-test.git

Reproduction Steps

1. Login to admin panel
2. Select Media collection
3. Upload an image with extension other than jpg (e.g. png)
4. Observe that the original image is now jpg, but other sizes remain with extension png

Which area(s) are affected? (Select all that apply)

Not sure

Environment Info

Node.js v22.11.0

Binaries:
  Node: 22.11.0
  npm: 10.8.2
  Yarn: N/A
  pnpm: 9.15.0
Relevant Packages:
  payload: 3.8.0
  next: 15.1.0
  @payloadcms/email-nodemailer: 3.8.0
  @payloadcms/graphql: 3.8.0
  @payloadcms/live-preview: 3.8.0
  @payloadcms/live-preview-react: 3.8.0
  @payloadcms/next/utilities: 3.8.0
  @payloadcms/payload-cloud: 3.8.0
  @payloadcms/plugin-form-builder: 3.8.0
  @payloadcms/plugin-nested-docs: 3.8.0
  @payloadcms/plugin-redirects: 3.8.0
  @payloadcms/plugin-search: 3.8.0
  @payloadcms/plugin-seo: 3.8.0
  @payloadcms/richtext-lexical: 3.8.0
  @payloadcms/translations: 3.8.0
  @payloadcms/ui/shared: 3.8.0
  react: 19.0.0
  react-dom: 19.0.0
Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Tue Nov 5 00:21:55 UTC 2024
  Available memory (MB): 3197

[PatrikKozak]

Hey @azivkovi - thanks for raising this!

The behavior you're seeing is actually expected. The formatOptions at the top level apply only to the original image, while each imageSize can define its own formatOptions.

That said, I agree it would make sense for imageSizes to inherit the top-level formatOptions by default if none are specified. However, changing that behavior would be a breaking change, so it's something we'll consider for future versions.

In the meantime, you can achieve what you're after by adding formatOptions to your imageSizes like this:

imageSizes: [
  {
    name: 'thumbnail',
    width: 300,
    formatOptions: {
      format: 'jpeg',
    },
  },
]

Going to close this for now.

[github-actions]

This issue has been automatically locked.
Please open a new issue if this issue persists with any additional detail.