sizes and responsive srcset

[richardvanbergen]

I'm interested in leveraging nextjs's responsive sizes on the frontend and I thought that I could maybe use the sizes property on images within payload.

Unfortunately the sizes property seems pretty heavily geared toward thumbnails which means I might have to make my own implementation.

Do you think it'd be difficult to extend the sizes functionality to allow for resizing that maintains the image aspect ratio?

[jmikrut]

Hey Richard —

Unfortunately the sizes property seems pretty heavily geared toward thumbnails which means I might have to make my own implementation.

I am not 100% following here. You can specify any size(s) you want and Payload will auto-resize, including specifying exact aspect ratios. Here is an example for how to do that:

const Media = {
  slug: 'media',
  access: {
    read: () => true, // Everyone can read Media
  },
  admin: {
    useAsTitle: 'filename',
  },
  upload: {
    adminThumbnail: 'card',
    imageSizes: [
      {
        name: 'card',
        width: 640,
        height: 480,
      },
      {
        name: 'portrait',
        width: 768,
        height: 1024,
      },
      {
        name: 'square',
        width: 1200,
        height: 1200,
      },
      {
        name: 'feature',
        width: 1024,
        height: 576,
      },
    ],
  },
  fields: [
    {
      name: 'alt',
      label: 'Alt Text',
      type: 'text',
      required: true,
    },
  ],
};

export default Media;

Do you mean that if you were to upload, say, a 4x5 image, you would want it to crop down to smaller sizes, but always retain its original ratio? Soo, you'd have no way of knowing what the predefined sizes would be at config-level?

If this is the case, we can extend our config typing to allow null or undefined for either width or height... which will then maintain aspect ratio. See the Sharp docs here:

https://sharp.pixelplumbing.com/api-resize#parameters

If my second assumption is correct, this would be a quick change for us. One that we should likely do anyway, actually.

What do you think?

[Ontopic]

Nice idea on the null!

[richardvanbergen]

If this is the case, we can extend our config typing to allow null or undefined for either width or height... which will then maintain aspect ratio. See the Sharp docs here:

Yes that was exactly what I was thinking only I articulated it very poorly. We would also need to save the result of the resize operation so we have the resultant width and height saved.

If you could do that you would save me a whole heap of work. 😁

[jmikrut]

This was added and works great! Will be released shortly in 0.9.2.

#271

[blueMountain007]

For the image if I don't want to crop, just want to get the default width and height, how to achieve。
#1068

[notflip]

I wonder, what's the point of defining these image sizes, when we can resize on the fly with next/image?

[thomasschwinn]

when you work on a bigger project and host on vercel, you'll very likely hit the max images and pay extra for it, and next/image doesn't crop
you'll also maybe want to control your srcset by yourself