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 😦
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,
],
};
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.