Using excessively large images can significantly degrade website
performance, increase loading times, and negatively impact user
experience. This can lead to user frustration and potentially higher
bounce rates.
To manage image sizes efficiently, Odoo provides the image.mixin
class, which is an abstract model designed specifically for handling
images in multiple resolutions. Since it's an abstract model, it
doesn't create a separate database table but provides utility fields
and methods when inherited by other models.
The image.mixin ensures that uploaded images are automatically
resized if they exceed the maximum allowed resolution of 1920x1920
pixels. For instance, if an image with a resolution of 2400x1600 is
uploaded, Odoo will proportionally resize it to 1920x1280,
maintaining the aspect ratio and image clarity while preventing any
distortion.
class ProductImage(models.Model):
_name = 'product.image'
_description = "Product Image"
_inherit = ['image.mixin']
When image.mixin is inherited, five binary fields are automatically
added to the model, each storing the same image at different
resolutions. These fields include:
- image_1920: 1920x1920
- image_1024: 1024x1024
- image_512: 512x512
- image_256: 256x256
- image_128: 128x128
The field image_1920 serves as the main editable image. When this
field is modified, the remaining image fields are updated
accordingly. In terms of backend tree views, the model should
prioritize image_1920 for image uploads, which shapes the overall
backend behavior. Although using high-resolution images in tree
views can impact performance, efficiency can be improved by
displaying smaller images. A practical solution is to use the
image_128 field in place of image_1920 for rendering. The following
snippet demonstrates this implementation:
<field name="image_1920" widget="image" class="oe_avatar" options="{'preview_image': 'image_128'}"/ >
To work with image resolutions beyond those provided by the
image.mixin, you can define a custom image field within your model.
This separate field allows for greater flexibility in storing and
accessing images at sizes not supported by the default set of
mixin-generated fields.
image_1600 = fields.Image("Image 1600", max_width=1600, max_height=1600)
This creates a new field named image_1600, and when an image is
removed, it will be resized to 1600x1600. However, this step isn’t
required when using image.mixin. Since the image is only being
reduced to 1600x1600, you’ll need to include the corresponding field
in the tree view. Modifying this field does not affect the other
image fields generated by image.mixin. If you want to link it to the
existing image.mixin field, you can use the related="image_1920"
attribute in the field definition.