Image compression or quality

[jakehopking]

Hi - is there documentation on how to pass options to sharp (I see there is an enhancement PR open for exposing full sharp options)?

It's mentioned here in the docs:

Behind the scenes, Payload relies on sharp to perform its image resizing. You can specify additional options for sharp to use while resizing your images.

☝️ How?

Currently (i.e. before the aforementioned PR is merged) is there an option to control the compression level?
My photos are shockingly poor post auto-resizing at the moment 😦

[jmikrut]

Hey @jakehopking - tomorrow the team and I are going to wrap up the PR that you're mentioning, and that's the move here.

Give us a bit and then you should be able to take advantage of that!

[jakehopking]

Thanks for taking the time to reply, and looking forward to the release 👍

[jakehopking]

Hey @jmikrut was this enhancement released?

[jmikrut]

Yes! You can now pass a full set of Sharp options to your upload configs! Docs are live!

https://payloadcms.com/docs/upload/overview

See resizeOptions and formatOptions.

👍

[jakehopking]

Super, thanks! Already implemented :)
Might be worth updating your docs to make it obvious that these same options can and should be applied to each resize rule. I initially thought that the formatOptions on the upload object would cascade down to all of imageSizes[] too. Only after comparing the generated sizes, did I notice that only the primary image was affected, and not the resized versions.

Added my approach in case it helps others searching for the same.

Create a list of options you will want to use on your images:

export const sharpFormatOptions = {
  defaultJPG: {
    formatOptions: {
      format: 'jpeg',
      options: {
        quality: 90,
      },
    },
  },
  optimisedWEBP: {
    ...
  }
} as const;

Then in your image sizes array, spread the relevant format options into the resize rules:

export const PhotoImageSizes = [
  {
    name: ImageSizeNames.original200,
    width: 2880,
    height: null,
    ...sharpFormatOptions.defaultJPG,
  },
  {
    name: ImageSizeNames.original100,
    width: 1440,
    height: null,
    ...sharpFormatOptions.defaultJPG,
  },
  ...
} as const;

Then use these inside your media collection, and remember to specify formatOptions on upload too:

import {
  ImageSizeNames,
  ImageSizes,
  MediaSlugs,
  sharpFormatOptions,
} from '../tokens';

const MediaPhotos: CollectionConfig = {
  slug: MediaSlugs.mediaPhotos,
  access: {
    read: (): boolean => true, // Everyone can read Media
  },
  admin: {
    useAsTitle: 'filename',
  },
  upload: {
    adminThumbnail: ImageSizeNames.thumbnail,
    imageSizes: [...ImageSizes.PhotoImageSizes],
    staticURL: '/media/photos',
    staticDir: 'media/photos',
    ...sharpFormatOptions.defaultJPG,
  },
  fields: [
    {
      name: 'alt',
      label: 'Alt Text',
      type: 'text',
      required: true,
    },
    categories,
    tags,
  ],
};