Image compression or quality

jakehopking

6 months ago

1 1

• Selected Answer
  

  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,
    ],
  };