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.
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
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!
Thanks for taking the time to reply, and looking forward to the release
Hey @jmikrut was this enhancement released?
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
.
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,
],
};