Chapter 15 - Odoo 15 Development Book

Image Generation With Different Sizes

Enormous pictures can be inconvenient for any site. They increment the size of pages and thus make them more slower accordingly. This prompts awful SEO rankings and guest misfortune. In this recipe, we will investigate how you can make pictures of various sizes; by utilizing the right pictures, you can reduce the website page size and further develop the page stacking time.

In Odoo, we use image.mixin class to generate different image sizes. For that, you will need to inherit image.mixin in your model. The image.mixin model is AbstractModel, so its table is absent in the database. You really want to acquire it in your model to utilize it.

With this image.mixin, you can store a picture with a maximum resolution of 1,920x1,920. On the off chance that you save a picture with a resolution higher than 1,920x1,920, Odoo will diminish it to 1,920x1,920. At the same time, Odoo will likewise save the resolution of the picture, keeping away from any twisting. For instance, in the event that you transfer the picture with a 2,400x1,600 resolution, the image_1920 field will have a resolution of 1,920x1,280.

class ProductImage(models.Model):
   _name = 'product.image'
   _description = "Product Image"
   _inherit = ['image.mixin']

While inheriting the image.mixin, it will consequently add five new binary fields to the model to store pictures of various sizes. Here is a list of the fields and their resolutions:

  • image_1920: 1,920x1,920
  • image_1024: 1,024x1,024
  • image_512: 512x1,512
  • image_256: 256x256
  • image_128: 128x128

In the above listed fields given here, just image_1920 is editable. The other image fields are perused just and update naturally when you change the image_1920 field. Thus, in the backend structure perspective on your model, you really want to utilize the image_1920 field to permit the client to upload an image. In any case, we are stacking enormous image_1920 images in the structure view. Nonetheless, there is a method for further developing execution by utilizing image_1920 pictures in the structure view, showing more modest pictures. For example, we can use the image_1920 field, however, show an image_128 field. To do this, you can check the bellow code:

<field name="image_1920" widget="image" class="oe_avatar" options="{'preview_image': 'image_128'}"/ >

With image.mixin, you can get the image with specific resolutions, yet imagine a scenario where you need to utilize an image with another resolution. To do as such, you can create a parallel field image to your model.

image_1700 = fields.Image("Image 1700", max_width=1700, max_height=1700)

This will make a new image_1700 field, and putting away the picture will resize it to 1,700x1,700 resolution. Note that this isn't essential for image.mixin. It simply lessens the picture to 1,700x1,700, so you really want to add this field in the structure view; altering it won't make changes to the next image fields in image.mixin. If you have any desire to connect it with a current image.mixin field, add the related="image_1920" attribute in the field definition.



Cybrosys Technologies Pvt. Ltd.
Neospace, Kinfra Techno Park
Kakkancherry, Calicut
Kerala, India - 673635



Cybrosys Limited
Alpha House,
100 Borough High Street, London,
SE1 1LB, United Kingdom



Cybrosys Technologies Pvt. Ltd.
1st Floor, Thapasya Building,
Infopark, Kakkanad,
Kochi, India - 682030.



Cybrosys Techno Solutions
The Estate, 8th Floor,
Dickenson Road,
Bangalore, India - 560042

Send Us A Message