Image generation with different sizes
Using images with huge size negatively affects the user experience, website performance and overall efficiency. The prolonged loading times associated with such images frustrate visitors, potentially driving them away from the site.
Odoo uses the image.mixin class to generate images of different sizes. To do this, your model should inherit image.mixin. The image.mixin model is an AbstractModel, so it will not be stored in the database.
This image.mixin allows you to save images with a maximum resolution of 1,920x1,920. If you save an image with a resolution higher than 1920x1920, Odoo will scale it down to 1920x1920. At the same time, Odoo also preserves image resolution and prevents distortion. For example, if you send an image with a resolution of 2400 x 1600, the image_1920 field will have a resolution of 1920 x 1280.
class ProductImage(models.Model):
_name = 'product.image'
_description = "Product Image"
_inherit = ['image.mixin']
As a result, image.mixin is inherited, so five new binary fields are added to the model to store images of different sizes. Here is a list of 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 given context, the editable field is specified as "image_1920," and any changes made to this field trigger updates in other image fields. From a backend tree perspective, the model should prioritize the "image_1920" field for client image uploads, influencing the entire backend structure. Despite the potential for stacking large images in the tree view, there's an opportunity to optimize execution by displaying more conservative images. One effective approach is utilizing the "image_1920" field to showcase a refined version, such as the "image_128" field. The code snippet below illustrates how this can be achieved:
<field name="image_1920" widget="image" class="oe_avatar" options="{'preview_image': 'image_128'}"/>
To access images with resolutions beyond those offered by the image.mixin feature, consider creating a separate image field within your model. This additional field provides flexibility to store and retrieve images in resolutions not covered by the default mixin options.
image_1600 = fields.Image("Image 1600", max_width=1600, max_height=1600)
This will create a new field image_1600, and when you remove the image, it will resize to 1600 x 1600 resolution. Note that this is not strictly necessary for image.mixin. Since we're just shrinking the image to 1,600 x 1,600, we need to add that box to the tree view. Changing this does not change the following image fields in image.mixin. Add the related="image_1920" attribute to the field definition if you want to relate it to the current image.mixin field.