# Why cropping images on product\_image?

**URL:** https://discuss.tryton.org/t/why-cropping-images-on-product-image/6131
**Category:** Ideas
**Created:** [May 8, 2023, 11:24am UTC](https://discuss.tryton.org/t/why-cropping-images-on-product-image/6131 "2023-05-08T11:24:20Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![acaubet](https://discuss-cdn.tryton.org/user_avatar/discuss.tryton.org/acaubet/32/1493_2.png) [@acaubet](https://discuss.tryton.org/u/acaubet)
#### Post date: [May 8, 2023, 11:24am UTC](https://discuss.tryton.org/t/why-cropping-images-on-product-image/6131/1 "2023-05-08T11:24:20Z")

</div>

Why product\_image is [cropping the images](https://foss.heptapod.net/tryton/tryton/-/blob/b96579a49fa33288c9a10c71746c9dd51aada49c/modules/product_image/product.py#L183)?  
I do not see any case where this could be a feature as default behavior. All products and images are diverse width and height.  
Tryton always should contain the true data of the company, not an altered cropped version.  
If the problem is that in a website it should be rendered in equal dimensions, it can be addressed with css or with some method on images that generate a cache with custom dimensions.

Also, this behavior is not documented on docs:

```auto
The images are stored as `JPEGs <https://en.wikipedia.org/wiki/JPEG>`_ format
and with a maximal horizontal and vertical size of 2048 pixels.

```

I propose to remove the crop and use `size` of the `_resize` as width to return image based on a ratio from the original.

---

<div class="post-metadata">

### Author: ![acaubet](https://discuss-cdn.tryton.org/user_avatar/discuss.tryton.org/acaubet/32/1493_2.png) [@acaubet](https://discuss.tryton.org/u/acaubet)
#### Post date: [May 8, 2023, 1:40pm UTC](https://discuss.tryton.org/t/why-cropping-images-on-product-image/6131/2 "2023-05-08T13:40:59Z")

</div>

I’m wondering also if the 2048 max restriction is correct as required or should be only a default value allowing to be deactivated. For example, for high detailed images like blueprint plans. So why limiting to 2048 if screen market is growing on usage of more pixels (4k screens on most industrial - engineering laptops)?

---

<div class="post-metadata">

### Author: ![ced](https://discuss-cdn.tryton.org/user_avatar/discuss.tryton.org/ced/32/1237_2.png) [@ced](https://discuss.tryton.org/u/ced)
#### Post date: [May 8, 2023, 2:37pm UTC](https://discuss.tryton.org/t/why-cropping-images-on-product-image/6131/3 "2023-05-08T14:37:20Z")

</div>

> [@acaubet](#):
>
> Why product\_image is [cropping the images](https://foss.heptapod.net/tryton/tryton/-/blob/b96579a49fa33288c9a10c71746c9dd51aada49c/modules/product_image/product.py#L183)?

To standardize format. And the square format is the most common because it is the more flexible for designer.

> [@acaubet](#):
>
> If the problem is that in a website it should be rendered in equal dimensions, it can be addressed with css or with some method on images that generate a cache with custom dimensions.

Because this will make the website perform very badly.

> [@acaubet](#):
>
> I’m wondering also if the 2048 max restriction is correct as required or should be only a default value allowing to be deactivated.

I have seen any webshop platform allowing more.

> [@acaubet](#):
>
> For example, for high detailed images like blueprint plans.

It makes no sense to store blueprint plans as JPG image.

> [@acaubet](#):
>
> 4k screens on most industrial - engineering laptops

But more of the ecommerce is done on mobile.

---

<div class="post-metadata">

### Author: ![acaubet](https://discuss-cdn.tryton.org/user_avatar/discuss.tryton.org/acaubet/32/1493_2.png) [@acaubet](https://discuss.tryton.org/u/acaubet)
#### Post date: [May 8, 2023, 3:01pm UTC](https://discuss.tryton.org/t/why-cropping-images-on-product-image/6131/4 "2023-05-08T15:01:24Z")

</div>

Thanks for your answer, but most of the responses provided are assuming product\_image is only used for ecommerce/webshop.  
There also can be internal tooling platforms where this big images are needed, and as the name suggest, this module should be valid for product and not only for ecommerce usages.

> [@ced](#):
>
> To standardize format. And the square format is the most common because it is the more flexible for designer.

What about books? Sofas? Films? They have their own ratio. Try to upload a book cover as image and you will see that most times (depending on the book), the title and author is half cropped. A shop for jewelry, It’s not normal to crop the same for a ring photo and a necklace on the center of the image. The necklace most important part is on the bottom.  
I can understand the standardize need but I think the best is to find some solution to cover all use cases, so:  
**I propose to allow some image configuration to toggle cropping and if so, define the ratio or size desired.**  
Normally for the designer, the box where the image goes is standard and they have to find the best way to display it depending on the use case.

for example,

- Instagram post grid is square but when you open the image is in another ratio.
- Pinterest grid is equal in width but flexible in height

> [@ced](#):
>
> Because this will make the website perform very badly.

But it’s leaving great usage cases for the product\_image outside.

---

<div class="post-metadata">

### Author: ![ced](https://discuss-cdn.tryton.org/user_avatar/discuss.tryton.org/ced/32/1237_2.png) [@ced](https://discuss.tryton.org/u/ced)
#### Post date: [May 8, 2023, 3:16pm UTC](https://discuss.tryton.org/t/why-cropping-images-on-product-image/6131/5 "2023-05-08T15:16:40Z")

</div>

The point is standardisation. If you do not want that, use something else.

---

<div class="post-metadata">

### Author: ![acaubet](https://discuss-cdn.tryton.org/user_avatar/discuss.tryton.org/acaubet/32/1493_2.png) [@acaubet](https://discuss.tryton.org/u/acaubet)
#### Post date: [May 8, 2023, 3:30pm UTC](https://discuss.tryton.org/t/why-cropping-images-on-product-image/6131/6 "2023-05-08T15:30:22Z")

</div>

You are reducing the functionality of a module to a simple cropping function. What about the thumbnails, the cache and resizes also.

I want this standardisation sometimes, If I sell books I want to display in the ecommerce all the book cover, take a look on any book ecommerce, so the original size should be maintained. I love the resize option to optimize for web but maintaining the ratio.

Why are you against of making the module more generic and available for more use cases, while maintain the same functions?  
This also makes the company have the same photos on the company disk (original) and on Tryton.

---

<div class="post-metadata">

### Author: ![pokoli](https://discuss-cdn.tryton.org/user_avatar/discuss.tryton.org/pokoli/32/22_2.png) [@pokoli](https://discuss.tryton.org/u/pokoli)
#### Post date: [May 8, 2023, 3:56pm UTC](https://discuss.tryton.org/t/why-cropping-images-on-product-image/6131/7 "2023-05-08T15:56:26Z")

</div>

> [@ced](#):
>
> If you do not want that, use something else.

Then why not making it configurable?

---

<div class="post-metadata">

### Author: ![ced](https://discuss-cdn.tryton.org/user_avatar/discuss.tryton.org/ced/32/1237_2.png) [@ced](https://discuss.tryton.org/u/ced)
#### Post date: [May 8, 2023, 9:16pm UTC](https://discuss.tryton.org/t/why-cropping-images-on-product-image/6131/8 "2023-05-08T21:16:52Z")

</div>

> [@acaubet](#):
>
> If I sell books I want to display in the ecommerce all the book cover, take a look on any book ecommerce

Yes they all use a square design.

> [@acaubet](#):
>
> Why are you against of making the module more generic and available for more use cases, while maintain the same functions?

Because a square is the only format for which a requested size is unambiguous.

---

<div class="post-metadata">

### Author: ![pokoli](https://discuss-cdn.tryton.org/user_avatar/discuss.tryton.org/pokoli/32/22_2.png) [@pokoli](https://discuss.tryton.org/u/pokoli)
#### Post date: [May 9, 2023, 6:56am UTC](https://discuss.tryton.org/t/why-cropping-images-on-product-image/6131/9 "2023-05-09T06:56:46Z")

</div>

> [@ced](#):
>
> > [@acaubet](#):
> >
> > If I sell books I want to display in the ecommerce all the book cover, take a look on any book ecommerce
> 
> Yes they all use a square design.

Just checked a random [amazon book page](https://www.amazon.com/Tell-Your-Life-Story-Mom/dp/1952568099/ref=zg_sccl_2/131-7339699-5109240?pd_rd_w=pwqKO&content-id=amzn1.sym.193afb92-0c19-4833-86f8-850b5ba40291&pf_rd_p=193afb92-0c19-4833-86f8-850b5ba40291&pf_rd_r=8C7W0NW66MAH0WFRXR0A&pd_rd_wg=Jx7MM&pd_rd_r=280df6b1-7605-4e63-9a7a-adcc5ef62314&pd_rd_i=1952568099&psc=1), and it does not use a square design:

 ![imatge](https://discuss-cdn.tryton.org/uploads/default/original/2X/7/76041222e086e531623c7e5814856de8893cb5d5.png)

Event you can see that the miniatures on the page are shown in squared size which crops the content of the text.

---

<div class="post-metadata">

### Author: ![acaubet](https://discuss-cdn.tryton.org/user_avatar/discuss.tryton.org/acaubet/32/1493_2.png) [@acaubet](https://discuss.tryton.org/u/acaubet)
#### Post date: [May 9, 2023, 7:12am UTC](https://discuss.tryton.org/t/why-cropping-images-on-product-image/6131/10 "2023-05-09T07:12:56Z")

</div>

> [@ced](#):
>
> Yes they all use a square design.

Just my first 3 top results in google search:

 ![imagen](https://discuss-cdn.tryton.org/uploads/default/original/2X/9/9d75281d65c7fe82b356b2c21f73688d2e683bc1.jpeg)  
 ![imagen](https://discuss-cdn.tryton.org/uploads/default/original/2X/f/fb0adc7d37416ed330ab83913ec77d6cc04f8862.jpeg)  
 ![imagen](https://discuss-cdn.tryton.org/uploads/default/original/2X/6/61c28c0774a833946820bee006607ae9fd603d46.jpeg)

---

<div class="post-metadata">

### Author: ![acaubet](https://discuss-cdn.tryton.org/user_avatar/discuss.tryton.org/acaubet/32/1493_2.png) [@acaubet](https://discuss.tryton.org/u/acaubet)
#### Post date: [August 8, 2023, 12:27pm UTC](https://discuss.tryton.org/t/why-cropping-images-on-product-image/6131/11 "2023-08-08T12:27:24Z")

</div>

For another project I just made a standard ratio image, no matter if the ratio is (2,2) squared on (3,2), but at least it’s not cropping a image that can contain valuable information on the cropped part, it only adds white padding on the sides to make it fit the ratio.

In many cases, images might have essential information that can be lost if cropped. By adding white padding, the original content remains intact, and the image still adheres to a standard aspect ratio. This approach ensures visual consistency without sacrificing information.

I think this option could be valid also by having a default ratio on product config, and allowing to customize it on each product.

I leave here the code I used to add the padding, but it’s not yet integrated with product\_image.

```python
@classmethod
def fit_into_frame(cls, image, target_ratio=(3, 2)):
    img = PIL.Image.open(io.BytesIO(image))
    width, height = img.size

    original_ratio = width / height
    desired_ratio = target_ratio[0] / target_ratio[1]

    if original_ratio < desired_ratio:
        new_width = int(height * desired_ratio)
        new_height = height
    else:
        new_height = int(width / desired_ratio)
        new_width = width

    left_padding = (new_width - width) // 2
    top_padding = (new_height - height) // 2

    new_img = PIL.Image.new('RGB', (new_width, new_height), (255, 255, 255))
    new_img.paste(img, (left_padding, top_padding))

    return new_img

```

---

<div class="post-metadata">

### Author: ![ced](https://discuss-cdn.tryton.org/user_avatar/discuss.tryton.org/ced/32/1237_2.png) [@ced](https://discuss.tryton.org/u/ced)
#### Post date: [August 11, 2023, 7:58am UTC](https://discuss.tryton.org/t/why-cropping-images-on-product-image/6131/12 "2023-08-11T07:58:23Z")

</div>

> [@acaubet](#):
>
> ` new_img = PIL.Image.new('RGB', (new_width, new_height), (255, 255, 255))`

The main issue is that you arbitrary fill with blank.  
That’s one more reason that standard module uses crop so it makes no assumption about a potential background.

---

<div class="post-metadata">

### Author: ![acaubet](https://discuss-cdn.tryton.org/user_avatar/discuss.tryton.org/acaubet/32/1493_2.png) [@acaubet](https://discuss.tryton.org/u/acaubet)
#### Post date: [August 11, 2023, 8:15am UTC](https://discuss.tryton.org/t/why-cropping-images-on-product-image/6131/13 "2023-08-11T08:15:00Z")

</div>

> [@ced](#):
>
> That’s one more reason that standard module uses crop so it makes no assumption about a potential background.

Crop is making an assumption which is worse, it’s saying that some part of the image is not important.

> [@ced](#):
>
> The main issue is that you arbitrary fill with blank.

If that’s a problem, it can be personalized in product config allowing:

- Transparent background
- hex color
- Fill with the most dominant edge color of the image (I already have the function to do it).

Apart from that I think that the following configs can be added in conjunction with the previous:

- Crop option (actual)
- Don’t apply any transformation
- Fit image to frame (allow the user to select a ratio, like my previous comment)

---

<div class="post-metadata">

### Author: ![ced](https://discuss-cdn.tryton.org/user_avatar/discuss.tryton.org/ced/32/1237_2.png) [@ced](https://discuss.tryton.org/u/ced)
#### Post date: [August 11, 2023, 8:19am UTC](https://discuss.tryton.org/t/why-cropping-images-on-product-image/6131/14 "2023-08-11T08:19:52Z")

</div>

> [@acaubet](#):
>
> Apart from that I think that the following configs can be added in conjunction with the previous:

You miss the all point of standardisation.

---

<div class="post-metadata">

### Author: ![acaubet](https://discuss-cdn.tryton.org/user_avatar/discuss.tryton.org/acaubet/32/1493_2.png) [@acaubet](https://discuss.tryton.org/u/acaubet)
#### Post date: [August 11, 2023, 8:20am UTC](https://discuss.tryton.org/t/why-cropping-images-on-product-image/6131/15 "2023-08-11T08:20:33Z")

</div>

For me the most important is to don’t transform, as people often invest in good photographers for their products. Normally those professional adjust the results to the expectations of the clients.

---

<div class="post-metadata">

### Author: ![acaubet](https://discuss-cdn.tryton.org/user_avatar/discuss.tryton.org/acaubet/32/1493_2.png) [@acaubet](https://discuss.tryton.org/u/acaubet)
#### Post date: [August 11, 2023, 8:26am UTC](https://discuss.tryton.org/t/why-cropping-images-on-product-image/6131/16 "2023-08-11T08:26:03Z")

</div>

> [@ced](#):
>
> You miss the all point of standardisation.

Not with fit\_to\_frame.

Also you are assuming that the images provided are not standard, the image professionals normally provide you with all the images in the standard format, if all your images in your company are the same ratio, they are standard in your own business without applying any transformation. As I already demonstrated some comments ago, the standard ratio of a sector is not the same for all sectors (see books).

---

<div class="post-metadata">

### Author: ![ced](https://discuss-cdn.tryton.org/user_avatar/discuss.tryton.org/ced/32/1237_2.png) [@ced](https://discuss.tryton.org/u/ced)
#### Post date: [August 11, 2023, 9:10am UTC](https://discuss.tryton.org/t/why-cropping-images-on-product-image/6131/17 "2023-08-11T09:10:24Z")

</div>

Indeed if we used an image format with transparency support. I would accept that instead of cropping (fit) image, we use padding with a transparent background but only for images out of the ratio by a specific value like 10%.  
The available image formats with this supports that supports transparent background and is supported by Pillow are JPEG 2000 and WebP. I think WebP is the best choice for now.  
But in order to support different format, we must have a migration path and even better a backward compatibility. So it will require to support different format in the routes and cache.  
But also how to manage request for JPEG images with transparent background.

---

<div class="post-metadata">

### Author: ![jcm](https://discuss-cdn.tryton.org/user_avatar/discuss.tryton.org/jcm/32/344_2.png) [@jcm](https://discuss.tryton.org/u/jcm)
#### Post date: [August 17, 2023, 9:24am UTC](https://discuss.tryton.org/t/why-cropping-images-on-product-image/6131/18 "2023-08-17T09:24:58Z")

</div>

I can confirm, as a publisher, that squares are not the only choice for web product images for books.  
The ideal solution for a web usage would be for us to store the images as they are entered, and rely on another service to resize them with vips, store them in cache or in S3 in different size and formats as necessary for the various web stores exposing a catalog.

---

<div class="post-metadata">

### Author: ![acaubet](https://discuss-cdn.tryton.org/user_avatar/discuss.tryton.org/acaubet/32/1493_2.png) [@acaubet](https://discuss.tryton.org/u/acaubet)
#### Post date: [August 17, 2023, 2:49pm UTC](https://discuss.tryton.org/t/why-cropping-images-on-product-image/6131/19 "2023-08-17T14:49:41Z")

</div>

Yes, that’s the same approach services like [imgix](https://imgix.com/) are using, store your full images and serve it caching the requested url. That way, you can customize your standard for that image based on what web developer decide which will perform better for that website.

For me, as I started saying in the first message, the best approach is to not transform the image on the upload to Tryton as we always want the **real** data on Tryton. Latter we can talk about how we can create such URL that transform (crop / fit / whatever) the image and cache them.

---

<div class="post-metadata">

### Author: ![ced](https://discuss-cdn.tryton.org/user_avatar/discuss.tryton.org/ced/32/1237_2.png) [@ced](https://discuss.tryton.org/u/ced)
#### Post date: [November 14, 2023, 1:22pm UTC](https://discuss.tryton.org/t/why-cropping-images-on-product-image/6131/20 "2023-11-14T13:22:41Z")

</div>

Here is [Preserve image ratio of product (#12744) · Issues · Tryton / Tryton · GitLab](https://foss.heptapod.net/tryton/tryton/-/issues/12744)

_Unfortunately I pushed without a topic._
