Like what we’re doing? Star us on GitHub!

Image compression or quality

jakehopking
6 months ago
1 1

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
    Payload Team
    6 months ago

    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!

    4 replies
  • jakehopking
    6 months ago

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

  • jakehopking
    6 months ago

    Hey @jmikrut was this enhancement released?

  • jmikrut
    Payload Team
    6 months ago

    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
    6 months ago

    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,
      ],
    };
Open the post
Continue the discussion in GitHub
Can't find what you're looking for?
Get help straight from the Payload team with an Enterprise License.Learn More