Image compression or quality

default discord avatar
jakehopking
12 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 😦

  • discord user avatar
    jmikrut
    Payload Team
    12 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
  • default discord avatar
    jakehopking
    12 months ago

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

  • default discord avatar
    jakehopking
    12 months ago

    Hey @jmikrut was this enhancement released?

  • discord user avatar
    jmikrut
    Payload Team
    12 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.

    👍

  • default discord avatar
    jakehopking
    12 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
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.