1. Home
  2. Portal
  3. RE: AdaptiveMedia: wrong image selection for device size

RE: AdaptiveMedia: wrong image selection for device size

Jürgen Untch, modified 4 Years ago.
AdaptiveMedia: wrong image selection for device size
New Member Posts: 21 Join Date: 11/14/19 Recent Posts
On a page we display articles. Each article begins with an image. To increase performance we configured adaptive media and also created three image resolutions. The mentioned article images take 302x170 px on desktop devices. Unlike what I assumed, the default image with high resolution is loaded and not the optimized one with a maximum width of 305 pixels (one of the three adaptive media rules). Why is that?

Attachments:

thumbnail
Olaf Kock, modified 4 Years ago.
RE: AdaptiveMedia: wrong image selection for device size
Liferay Legend Posts: 6441 Join Date: 9/23/08 Recent Posts
Jürgen Untch:

...Unlike what I assumed, the default image with high resolution is loaded and not the optimized one with a maximum width of 305 pixels (one of the three adaptive media rules). Why is that?

The <img> element in the <picture> element only depicts the fallback, and the browser shall pick one of the elements from the <source> elements. Observe what the browser actually requests in the Network tab - The markup is as I expect it, and you it's up to the browser to request the correct image.
thumbnail
Christoph Rabel, modified 4 Years ago.
RE: AdaptiveMedia: wrong image selection for device size
Liferay Legend Posts: 1555 Join Date: 9/24/09 Recent Posts
Because Adaptive Media is deeply flawed.
It doesn't insert the image that fits best, it always just uses the device width to determine the width of the image. (As can be seen with the media queries). The following feature request explains the issue in detail:
https://issues.liferay.com/browse/LPS-94984
Jürgen Untch, modified 4 Years ago.
RE: AdaptiveMedia: wrong image selection for device size
New Member Posts: 21 Join Date: 11/14/19 Recent Posts
@Olaf The desktop browser always loads the fallback image on the page.
thumbnail
Christoph Rabel, modified 4 Years ago.
RE: AdaptiveMedia: wrong image selection for device size
Liferay Legend Posts: 1555 Join Date: 9/24/09 Recent Posts
Please look at the media rules in the source elements.
Rule 1 says  "(max-width: 128px)" -> This image is loaded on screens with less than 128px width
Rule 2 says: "(max-width: 305px) and (min-width: 128px )". If rule one isn't met, this image is loaded on screens with less than 305px width.
In a real world situation both of these rules are useless since (except for some really special cases) there are no devices with less than 360px width.
Rule 3 is the first relevant one. It loads a 1000px image on devices with a screen width of 305 - 1000px. While this matches several smartphones, it is a wasteful rule. It loads a 1000px image on a device with 360px width.
Since there are no further rules and desktop monitors usually have more then 1000px width, on desktop you will always see the fallback image.
Jürgen Untch, modified 4 Years ago.
RE: AdaptiveMedia: wrong image selection for device size
New Member Posts: 21 Join Date: 11/14/19 Recent Posts
Thanks Christoph for the clear response. So liferays adaptive media rules only care about the actual screen resolution (width and height) of the device and not the size an image needs to fit in a container.Is there a way  in Liferay to get the minified image on the articles overview page regardless of the screens resolution? I only need the full-sized image if I access the details page of a concrete article.
thumbnail
Christoph Rabel, modified 4 Years ago.
RE: AdaptiveMedia: wrong image selection for device size
Liferay Legend Posts: 1555 Join Date: 9/24/09 Recent Posts
If you have a freemarker template or a portlet: It should be possible to fetch the possible image preview urls somehow through the api and insert it manually. But I never tried that, it looked awfully complicated to do that and I have developed my own solution instead of fiddling with Adaptive Media.
There's also marketplace plugins that go in that direction, maybe one of them is useful.
Jürgen Untch, modified 4 Years ago.
RE: AdaptiveMedia: wrong image selection for device size
New Member Posts: 21 Join Date: 11/14/19 Recent Posts
@ChristophI came accross https://help.liferay.com/hc/en-us/articles/360018161551-Finding-Adapted-Images. I will try to do it that way.
thumbnail
Eric D, modified 4 Years ago.
RE: AdaptiveMedia: wrong image selection for device size
Junior Member Posts: 59 Join Date: 3/25/16 Recent Posts
We have done this in one of my projects.

You can create a Service and use it in your FTL.

And cherry on the cake, you can add an asynchronous load of the image like Lozad.js

With that, you will load the image only if it is visible and it will be the small image.

But be careful to find an image because adaptive media create the image only if it is possible.

Example, if my client add a small image 200px length, and I have a adaptive rule to reduce to 300px length, the adaptive media will not be generated. I must use the original image.

Eric.