Any plans to add a fit="crop" parameter to the image component?

[sboerrigter]

Hi all,

I was wondering if there are any plans for adding a fit=crop property to the image component that crops images to the desired size. Other fit properties such as fill could also be useful. For more context see: https://docs.imgix.com/apis/rendering/size/fit#crop.

Are there any plans to add this feature to Next.js or will this use case always require a 3rd party loader such as Imgix or Cloudinary?

[g-elwell]

You can achieve the a similar visual effect as crop by styling the image via CSS and using object-fit: cover.

The image won't actually be cropped so you're not saving on file size, but if you're looking to fit an image into a different aspect-ratio container then this may help you out.

[Sandstedt]

I would also want this feature. And "cropping" images with CSS is not something we wanna do, bad for performance to ship data that is not used.

Our use case:
We uses WordPress as our headless CMS, so the original images comes from there. The editor uploads whatever image they want, and we don't wanna upscale the images, again, for performance reasons.

With a crop option in next image, we could set specific image-ratios to be used in different components, based on one original source file. But currently we need to generate multiple cropped imaged in our backend (WordPress) instead. And to get these images, we try to get the largest file to use, ex: data.image.sizes["square-3840"]. But the problem is, that if the editor has upload an image that is smaller then that, WordPress doesn't return that size, so when trying to grab it, it's undefined. So then we need to add extra fallbacks to get another smaller file, like:

<Image
        src={data.image.sizes["square-3840"] || data.image.sizes["square-1080"]}
        ...
 />

But with a crop option, we could instead use the original, uncompressed raw file, and create crops from that, like this:

<Image
       src={data.image.url}
       crop={{ ratio: "1/1", position: "center" }}
       ...
/>

And then we could add more features, like crop position based on face or object detection (biiig feature) like Imgix has.

[nagman]

CSS cropping isn't a solution, because one big issue is the size attribute with the layout="fill" property.
When you have components like cards where the ratio is predefined, like this one :

Here, my original image is a 16/9 image, but I display it in a 4/5 ratio.
As my sizes says something like 200px, it will downsize my image to 200x112.
But I need a minimal height of 250px.
So my image will be blurry.
In order to overcome this, I need to do a cross-multiplication to get the actual width I need for the height to be 250px (250*16/9 = 444px).
A bit complicated.
Furthermore, I'll have half of the image's data unused.

[chrispeterson3]

Bump, this is a great idea. I hope someone sees this.

[matepaiva]

Any news on that?

[ptim]

👍

Terminology varies, so "crop" may take different meanings… In particular, a requirement for our CMS is to be able to select a particular region of an original image, before it is optimised (possibly different from OP's requirement, but the most relevant thread I could find).

Imgix "rect"

The rect parameter selects a sub-region of the source image to use for processing before applying other resize operations.

The value for rect is four integers or relative values representing the starting coordinates of x and y and the width and height, all separated by commas.

Cloudflare "trim"

An object with four properties {left, top, right, bottom} that specify a number of pixels to cut off on each side. Allows removal of borders or cutting out a specific fragment of an image. Trimming is performed before resizing or rotation. Takes dpr into account.

Example Next/Image Loader

ImageMagick "Offsets in geometry"

(eg, via the Apache module DIMS)

…we specify a region of size 100x200 to be located at the xy–coordinates x=10, y=20
-region '100x200+10+20'

[chrispeterson3]

I resolved this by actually implementing Imgix for now 👍

[khuezy]

Consider using https://images.weserv.nl/docs/crop.html#smart-crop as your image optimizer.

[Sandstedt]

Maybe would be possible to add support for Sharp's resize API? docs: https://sharp.pixelplumbing.com/api-resize#resize

I know that the M1 chip can't run Sharp so next.js added another image handling library, but Sharp is much faster on a regular Linux server, so maybe could be optional properties for dev's using the Sharp?

[nagman]

M1 can run sharp now: https://sharp.pixelplumbing.com/install#apple-m1

[Sandstedt]

Nice! Then please can we go back to that Sharp as a default again? (if that's not already the case :D)

[Sandstedt]

Have been using this small plugin now as a middlelayer for Strapi - next.js/image. Seems to work just fine as a workaround:
https://github.com/strapi-community/strapi-plugin-local-image-sharp. Maybe can be an inspiration for someone else too.

Ex usage here: https://gist.github.com/Sandstedt/bbde2b9626600706f2e013b6fa3ca6d8

[droganov]

Just in case, we use imgproxy instead of next/image, which is not adding features

[carro-maxime]

I've been working on my images optimization yesterday and i really think this is something that we need.

The issue

When using the sizes prop of the next/image component to optimize image sizes, the image optimizer only scale it down instead of cropping to the right aspect ratio.

As a consequence :

• Unused image data. Loading performance.
• Images could be pixelated as stated above (Any plans to add a fit="crop" parameter to the image component? #18701 (reply in thread)) with the following use case : Original image has an aspect ratio higher than the desired space (ex : Original image in landscape need to be displayed in portrait). Using sizes, the landscape image width will match the asked viewport width poportion. Then CSS object-fit: cover will stretch it.

I actually don't know if i should open an issue instead.

Proposed solution

I don't think we need a new option for this.
Given the [width and height props] documentation :

This property is used to infer the correct aspect ratio used by browsers to reserve space for the image and avoid layout shift during loading.

So these two options should be enough to determine the correct needed aspect ratio.

We could send the desired height or aspect ratio to the image optimizer so it would take it into account when resizing with Sharp.

Options

As per the comment above, we could also add an option for the direction of the crop by using sharp.position option of Sharp's resize.
But i don't know if many people needs this one.

I tested a first implementation on my dev and it seems to work well.
Could you guys confirm if this is needed for everyone before i open a PR ?