[Odoo CMS]-Depending on the resolution of the client device, the background images must be served in an optimal size

Question

I am trying to do some research on how should i proceed with this. Depending on the resolution of the client device, the background images must be served in an optimal size.

*I was checking about the "srcset" but i got to know that srcset does not work with css background images. image-set css notation is in css 4 draft but not widely supported: https://caniuse.com/#search=image-set

Any suggestion how should i proceed with it?

This module might be of your use: https://apps.odoo.com/apps/modules/11.0/website_adv_image_optimization/ For functional questions about Odoo please visit: https://www.odoo.com/forum/help-1 If you found an system issue report it on GitHub: https://github.com/odoo/odoo/issues — Piotr Cierkosz, Nov 21 '18 at 09:11
It's an interesting topic the one you are bringing here. What is the way you are seeing or using in order to take an image of a custom size and serve it with the optimal size depending on the resolution of the client device? — aekis.dev, Nov 21 '18 at 18:02
Recently I have researched into this a little bit and I was able to deliver image optimizations from ir.attachment and module static folder very optimized but it will be a plus to be able to dynamically determine the optimized size of the image based on the client device resolution to be able to deliver it using the exact size that it will be displayed... for me that will be the ultimate performance for image optimization — aekis.dev, Nov 21 '18 at 18:06
@AxelMendoza : I ma new to odoo platform. I had to do a task where as in depending on the size of the customer device, the image should be optimized in the best way. By doing this, the main reason is to avoid the customer to have a bad image or blurred image when customer do not have the standard screensize. — Gulshankumar, Nov 22 '18 at 14:21
@PiotrCierkosz thanks Piotr. What is this about apps.odoo.com/apps/modules/11.0/website_adv_image_optimization ? Do i have to specifically edit the images. I am not understanding this part. I did try the steps given in the link. But only one image i was able to change the jpeg compression. Other images didnt have that option. Can you help me with this more please? — Gulshankumar, Nov 22 '18 at 14:24

score 0 · Answer 1 · answered Dec 20 '18 at 15:27

You don't need javascript for this. It's built into CSS.

div {
  background-image:url(path/to/big/image.png);
}
@media(max-width:1200px) {
  div {
    background-image:url(path/to/medium-large/image.png);
  }
}
@media(max-width:1000px) {
  div {
    background-image:url(path/to/medium/image.png);
  }
}
@media(max-width:800px) {
  div {
    background-image:url(path/to/small-medium/image.png);
  }
}
@media(max-width:500px) {
  div {
    background-image:url(path/to/small/image.png);
  }
}

Now, based on your screen size, you will get the appropriately sized image. You can add as many breakpoints as you want if you want more granular control (break point every 50 pixels, for example) but for each breakpoint you will need to save an image at the appropriate size or, using server-side software, generate the image at the specified size.

[Odoo CMS]-Depending on the resolution of the client device, the background images must be served in an optimal size

1 Answers1