Hello,

First, thanks for your hard work on the module. I am updating from 2.0.0-rc6 and I saw the impressive changelog.

I tried updating from 2.0.0-rc6 to 2.0.0 and then to the last dev version, which is the 2.1.0, because this new version was published while testing and writing the issue.

I see that the pixel gif had been replaced by an SVG image. Ok, no problem.

But I also see that the images at the bottom of the page for example are now downloaded at the page loading, after the SVG, but without waiting for the user to scroll down.

I attach screenshots to compare between local (blazy updated) and online behavior. I will wait before deploying the updates.

I also attach my blazy settings.

If more debug information are needed do not hesitate to ask.

Thanks for any help.

CommentFileSizeAuthor
#12 blazy-responsive_image_regression-3135220-12.patch895 bytesgrimreaper
blazy.settings.yml383 bytesgrimreaper
blazy_online.png136.35 KBgrimreaper
blazy_local.png268.63 KBgrimreaper

Comments

Grimreaper created an issue. See original summary.

gausarts’s picture

gausarts commented
Category: Bug report » Support request
Status: Active » Postponed (maintainer needs more info)

Thank you.

Is it about the latest release 2.1.0 today?

I suspected it is about Chrome native lazy loading. However it was already delayed: #3120696: Delay native lazy loading till one is hit

If still an issue try adding a wall of text, and let me know. Also be sure to give enough few test cases, above, the below fold, etc.

SVG was in by request for quite a while #2838131: Use SVG as placeholder image.

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Status: Postponed (maintainer needs more info) » Active

Thanks for your very quick reply.

Yes it is about the 2.1.0.

Before creating the issue, I had also tested with Firefox and I had the same behavior. Now sometimes depending on conditions, cache or not, slow network or not, I see the loading placeholder. That's ok for me, if you say it is because of browser behavior, also I saw that you are transitioning to native lazy load, which is great. And thanks for the links to the related issues.

But I found a new problem with responsive image. And as I am also updating Slick, I had not the time to isolate precisely the source of the problem.

When with:
Blazy: 2.0.0-rc6
Slick: 2.0.0

I have for example the following HTML (source, not interpreted) (https://florent-torregrosa.fr/portfolio/groupe-pomona-sites-branche):

<div
  class="blazy field field--name-field-media-image field--type-image field--label-hidden field--item"
  data-blazy="">
  <div
    class="media media--blazy media--loading media--responsive media--image">
    <img
      class="media__image media__element b-lazy b-responsive img-responsive"
      srcset="" sizes="(min-width: 1290px) 1290px, 100vw"
      data-srcset="/sites/default/files/styles/max_325x325/public/field/website_image/www.passionfroid.fr_.png?itok=uTirHhEi 206w, /sites/default/files/styles/max_650x650/public/field/website_image/www.passionfroid.fr_.png?itok=EdRyPVOj 413w, /sites/default/files/styles/max_1300x1300/public/field/website_image/www.passionfroid.fr_.png?itok=b_MmCPlr 826w, /sites/default/files/styles/max_2600x2600/public/field/website_image/www.passionfroid.fr_.png?itok=SUW5Kkgg 1652w"
      data-src="/sites/default/files/styles/max_325x325/public/field/website_image/www.passionfroid.fr_.png?itok=uTirHhEi"
      src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
      alt="Site PassionFroid" title="Site PassionFroid"
      typeof="foaf:Image"/></div>
</div>

And with
Blazy: 2.1.0
Slick: 2.2.0

<div data-blazy=""
     class="blazy blazy--field blazy--field-media-image blazy--field-media-image--full field field--name-field-media-image field--type-image field--label-hidden field--item">
  <div
    class="media media--bundle--image media--blazy media--loading media--responsive media--image">
    <noscript><img class="media__image media__element img-responsive"
                   loading="lazy"
                   srcset="/sites/default/files/styles/max_650x650/public/field/website_image/www.passionfroid.fr_.png?itok=1-ewKrXF 206w"
                   sizes="(min-width: 1290px) 1290px, 100vw"
                   src="/sites/default/files/styles/max_325x325/public/field/website_image/www.passionfroid.fr_.png?itok=BioEwQgy"
                   alt="Site PassionFroid" title="Site PassionFroid"
                   typeof="foaf:Image"/></noscript>
    <img
      class="media__image media__element b-lazy b-responsive img-responsive"
      loading="lazy"
      data-src="/sites/default/files/styles/max_325x325/public/field/website_image/www.passionfroid.fr_.png?itok=BioEwQgy"
      srcset="" sizes="(min-width: 1290px) 1290px, 100vw"
      data-srcset="/sites/default/files/styles/max_650x650/public/field/website_image/www.passionfroid.fr_.png?itok=1-ewKrXF 206w"
      src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 206 325'%2F%3E"
      alt="Site PassionFroid" title="Site PassionFroid"
      typeof="foaf:Image"/></div>
</div>

The problem is in the "data-srcset" attribute, after the update there is only one image style left. Which is the correct one according to the final width of the image.

So no problem? Yes, but no...

With max 650*650, there is a reduction of image quality... I tried creating a new image style max 845*845 (because image width is 848px on desktop), but there is still this a loss of image quality.

Before the update it is the max_2600*2600 image style which is used, resized in CSS to a 848px width. So even if the image is big, it is correctly displayed.

I don't know if this is for this kind of situation that it is possible to define "multiplier" on responsive image styles?

I tried looking in src/Blazy.php::preprocessResponsiveImage() without success. And as said above in the comment, as I am also updating Slick, I had not the time to isolate precisely the source of the problem.

Thanks for any help.

gausarts’s picture

gausarts commented

Thank you.

So the initial issue "Image downloaded even if at the bottom of the page" is fixed as assumed about native lazy load?

> I don't know if this is for this kind of situation that it is possible to define "multiplier" on responsive image styles?
You are right, there is a change between rc6 and 2.1.

The latter considers device pixel ratio correctly:
https://git.drupalcode.org/project/blazy/-/blob/8.x-2.1/js/dblazy.js#L110

The older version doesn't take device pixel ratio into account, just window width:
https://git.drupalcode.org/project/blazy/-/blob/8.x-2.0-rc6/js/blazy.loa...

So your observation is correct.

As mentioned elsewhere, Responsive image integration is never done/ finalized till 8.x-2.x rc7, or around last February precisely where the integration got a bit of my love:
https://git.drupalcode.org/project/blazy/-/blob/8.x-2.1/docs/TROUBLESHOO...

Solutions: consider to take device pixel ratio into account from now on.

Let me know your findings.

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented

Thanks again for your detailed reply!

I took the decision to rethink completely my image styles and responsive image styles to adapt to my usage of Bootstrap 3. I was previously using the ones provided by the standard install profile.

I read an article explaining srcset, etc. https://www.alsacreations.com/article/lire/1621-responsive-images-srcset... (french sorry), because as thinking about image styles and responsive image styles, I forgot regularly how it works exactly.

But sorry, I think I found a new bug or a new misunderstanding.

With Blazy, I have the following output:

<picture><!--[if IE 9]>
  <video style="display: none;"><![endif]-->
  <source media="all and (min-width: 1200px)" type="image/png" sizes="850px"
          srcset="/sites/default/files/styles/max_850w/public/alimentarium.org_.fr_.png?itok=4BL9sb9R 1x, /sites/default/files/styles/max_850w/public/alimentarium.org_.fr_.png?itok=4BL9sb9R 290w">
  <source media="all and (min-width: 992px)" type="image/png"
          srcset="/sites/default/files/styles/max_700w/public/alimentarium.org_.fr_.png?itok=BUmeeAfN 1x">
  <source media="all and (min-width: 768px)" type="image/png"
          srcset="/sites/default/files/styles/max_535w/public/alimentarium.org_.fr_.png?itok=GiP1p6i0 1x">
  <source media="all and (max-width: 767px)" type="image/png" sizes="100vw"
          srcset="/sites/default/files/styles/max_850w/public/alimentarium.org_.fr_.png?itok=4BL9sb9R 290w">
  <!--[if IE 9]></video><![endif]--><img
    class="media__image media__element b-lazy b-responsive img-responsive b-loaded"
    loading="lazy"
    src="/sites/default/files/styles/max_290w/public/alimentarium.org_.fr_.png?itok=-1NRFtn4"
    alt="Site Alimentarium" title="Site Alimentarium" typeof="foaf:Image">
</picture>

With the native responsive image formatter, I have the following output:

<picture><!--[if IE 9]>
  <video style="display: none;"><![endif]-->
  <source
    srcset="/sites/default/files/styles/max_850w/public/alimentarium.org_.fr_.png?itok=4BL9sb9R 1x, /sites/default/files/styles/max_1300x1300/public/alimentarium.org_.fr_.png?itok=-DX9c50y 672w, /sites/default/files/styles/max_850w/public/alimentarium.org_.fr_.png?itok=4BL9sb9R 850w, /sites/default/files/styles/max_2600x2600/public/alimentarium.org_.fr_.png?itok=nuSjXc2B 1344w"
    media="all and (min-width: 1200px)" type="image/png" sizes="850px">
  <source
    srcset="/sites/default/files/styles/max_700w/public/alimentarium.org_.fr_.png?itok=BUmeeAfN 1x"
    media="all and (min-width: 992px)" type="image/png">
  <source
    srcset="/sites/default/files/styles/max_535w/public/alimentarium.org_.fr_.png?itok=GiP1p6i0 1x"
    media="all and (min-width: 768px)" type="image/png">
  <source
    srcset="/sites/default/files/styles/max_290w/public/alimentarium.org_.fr_.png?itok=-1NRFtn4 290w, /sites/default/files/styles/max_350w/public/alimentarium.org_.fr_.png?itok=9UAA54-w 350w, /sites/default/files/styles/max_535w/public/alimentarium.org_.fr_.png?itok=GiP1p6i0 535w, /sites/default/files/styles/max_700w/public/alimentarium.org_.fr_.png?itok=BUmeeAfN 700w, /sites/default/files/styles/max_850w/public/alimentarium.org_.fr_.png?itok=4BL9sb9R 850w"
    media="all and (max-width: 767px)" type="image/png" sizes="100vw">
  <!--[if IE 9]></video><![endif]--><img
    src="/sites/default/files/styles/max_290w/public/alimentarium.org_.fr_.png?itok=-1NRFtn4"
    alt="Site Alimentarium" title="Site Alimentarium" typeof="foaf:Image"
    class="img-responsive"></picture>

The problem I have with the Blazy formatter is:

<source media="all and (min-width: 1200px)" type="image/png" sizes="850px"
          srcset="/sites/default/files/styles/max_850w/public/alimentarium.org_.fr_.png?itok=4BL9sb9R 1x, /sites/default/files/styles/max_850w/public/alimentarium.org_.fr_.png?itok=4BL9sb9R 290w">

max_850w is an image style with a scale to 850px of width effect. So it should be "850w" at the end. The "290w" is because of the fallback image style's width.

I tried to track down the origin of the problem and found BlazyUtil::imageUrl():

 if (empty($settings['_dimensions'])) {
        $settings = array_merge($settings, self::transformDimensions($style, $settings));
      }

This is putting width and height in $settings which is then transmitted to preprocess_responsive_image callbacks, so the width is no more calculated. Or maybe I am not seing correctly.

So it is a bug or still me misunderstanding something?

gausarts’s picture

gausarts commented

Does it work if you remove the check:
if (empty($settings['_dimensions'])) {

If not might be somewhere else.

gausarts’s picture

gausarts commented

Is the above setup as below? If not, please try and let me know:

  • Create 2 views blocks with similar image, but different formatters, blazy vs core responsive image.
  • Put them on the same page.

Just 2, not 3 for now.

Just for Blazy, compare Aspect ratio Fluid and None. The latter basically remove the above-mentioned check you suspected without touching code.

Assumed Picture with similar ID.

If you are looking for Picture integration, it is here:
https://git.drupalcode.org/project/blazy/-/blob/8.x-2.1/src/Blazy.php#L336

Other places are only relevant for Aspect ratio, or CSS fixes, not the essentials.

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented

Thanks again for you reply!

The latter basically remove...

The latter or the first? Because $settings['_dimensions'] is set when "Aspect ratio" is not set.

Changing the setting has no impact because in this configuration, transformDimensions() is still calls from somewhere else and the result is still not correct.

If I comment the line $settings = array_merge($settings, self::transformDimensions($style, $settings));, then there is an impact and I have the same result as the native responsive image formatter.

If this may help, with aspect ratio none, and no code modified in Blazy or Core:

With the native responsive image formatter, in core/modules/responsive_image/responsive_image.module::_responsive_image_build_source_attributes(), $variables['width'] and $variables['height'] are the ones calculated from the original image, and so the function computes srcset correctly.

With Blazy, when going into core/modules/responsive_image/responsive_image.module::_responsive_image_build_source_attributes(), $variables['width'] and $variables['height'] are the ones from the responsive image's fallback image style's dimensions applied to the original image (in my case, max 290px width). So the function computes srcset incorrectly.

I am tempted to write an automated tests to show the problem, but I don't see examples in core for this kind of tests. I saw that test setup in Blazy had been made easy, but not for the responsive image formatter in core. And also, that would require to grab the generated HTML.

Or maybe documenting steps from a fresh standard Drupal install?

gausarts’s picture

gausarts commented

> The latter or the first? Because $settings['_dimensions'] is set when "Aspect ratio" is not set.
The latter. The opposite. Aspect ratio Fluid sets this _dimensions here:
https://git.drupalcode.org/project/blazy/-/blob/8.x-2.1/src/BlazyManager...

> If I comment the line ...
Sounds like this optimization section doesn't work out well for Responsive image.

Perhaps we should exclude it till further improvements/ corrections, like so:
if (empty($settings['_dimensions']) && empty($settings['responsive_image_style_id'])) {

We don't need to take the lines out to still support regular images since no issues were reported so far for regular images.

Does it work at your end?

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented

Tested with:

if (empty($settings['_dimensions']) && empty($settings['responsive_image_style'])) {

not "responsive_image_style_id" ;)

Works like a charm! Thanks a lot!

I felt obliged to find the root cause to definitely prove that there is a problem but if you are ok with this kind of quick fixes, I am ok too. I am not very well aware of all the stuff Blazy does, so not very efficient in debugging this issue.

Do you want me to make a patch for that?

gausarts’s picture

gausarts commented

I couldn't reproduce this, yet. But I trust serious efforts better than my lacking of time.

Feel free to patch. Thanks.

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Status: Active » Needs review
StatusFileSize
new blazy-responsive_image_regression-3135220-12.patch895 bytes

Here is the patch.

But I trust serious efforts better than my lacking of time.

First, thanks for the compliment.
Second, do not blame yourself, I think you spend a lot of time to give free support. So as said in my previous comments. Thank you for the help!

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented
Title: Image downloaded even if at the bottom of the page » Wrong srcset in responsive image
Category: Support request » Bug report

Updating issue title and category.

jhmnieuwenhuis’s picture

jhmnieuwenhuis commented

Great Job,

blazy-responsive_image_regression-3135220-12.patch also solved my issue #3135744

And i no longer need to use aspect ratio fluid, that was also causing problems for me.

Thanks so much!!

Regards,
Hans

gausarts’s picture

gausarts commented

Please allow some delay to get back on this. Thanks.

lindsay.wils’s picture

lindsay.wils commented

Hello.

I believe I found a similar issue here with the wrong srcset being output after I updated to 2.1.

I have a responsive image style setup with sizes="100vw" and then multiple image styles for different breakpoint sizes, 320,480,640,800,1024,1280,1440,1920. I have the display mode set to Blazy and this responsive image style selected with no other settings.

The final output markup I am getting is only showing srcset values up to 800, then whatever style was chosen as the fallback. I then tested turning off the lower 4 image styles and just choosing the larger 4, but then the srcset output would only include whatever size was selected as the fallback.

After applying this patch however, the issue is resolved.

I hope this information helps you with any debugging on the issue.

OUTPUT PREVIOUS TO PATCH

<img class="media__image media__element b-lazy b-responsive b-loaded" 
srcset="/sites/default/files/styles/scale_320/public/2020-06/2018_06_BJ_Taos-2899_hiking_4000.jpg?itok=nY1r0Xiq 320w, /sites/default/files/styles/scale_480/public/2020-06/2018_06_BJ_Taos-2899_hiking_4000.jpg?itok=yRzfXbPz 480w, /sites/default/files/styles/scale_640/public/2020-06/2018_06_BJ_Taos-2899_hiking_4000.jpg?itok=qspCtmu4 640w, /sites/default/files/styles/scale_800/public/2020-06/2018_06_BJ_Taos-2899_hiking_4000.jpg?itok=JqPYUnxh 800w, /sites/default/files/styles/scale_1024/public/2020-06/2018_06_BJ_Taos-2899_hiking_4000.jpg?itok=_nd6XYIO 1024w" 
sizes="100vw" 
src="/sites/default/files/styles/scale_1024/public/2020-06/2018_06_BJ_Taos-2899_hiking_4000.jpg?itok=_nd6XYIO" 
typeof="foaf:Image">

OUTPUT AFTER PATCH

<img class="media__image media__element b-lazy b-responsive b-loaded" 
srcset="/sites/default/files/styles/scale_320/public/2020-06/2018_06_BJ_Taos-2899_hiking_4000.jpg?itok=nY1r0Xiq 320w, /sites/default/files/styles/scale_480/public/2020-06/2018_06_BJ_Taos-2899_hiking_4000.jpg?itok=yRzfXbPz 480w, /sites/default/files/styles/scale_640/public/2020-06/2018_06_BJ_Taos-2899_hiking_4000.jpg?itok=qspCtmu4 640w, /sites/default/files/styles/scale_800/public/2020-06/2018_06_BJ_Taos-2899_hiking_4000.jpg?itok=JqPYUnxh 800w, /sites/default/files/styles/scale_1024/public/2020-06/2018_06_BJ_Taos-2899_hiking_4000.jpg?itok=_nd6XYIO 1024w, /sites/default/files/styles/scale_1280/public/2020-06/2018_06_BJ_Taos-2899_hiking_4000.jpg?itok=zUNuRUED 1280w, /sites/default/files/styles/scale_1440/public/2020-06/2018_06_BJ_Taos-2899_hiking_4000.jpg?itok=S8S2ncxe 1440w, /sites/default/files/styles/scale_1920/public/2020-06/2018_06_BJ_Taos-2899_hiking_4000.jpg?itok=9hony4ke 1920w" 
sizes="100vw" 
src="/sites/default/files/styles/scale_1024/public/2020-06/2018_06_BJ_Taos-2899_hiking_4000.jpg?itok=_nd6XYIO" alt="sdf" typeof="foaf:Image">

  • gausarts committed 81e0ef3 on 8.x-2.x authored by Grimreaper 
    Issue #3135220 by Grimreaper, jhmnieuwenhuis, lindsay.wils: Wrong srcset...
gausarts’s picture

gausarts commented
Status: Needs review » Fixed

Committed. Thank you for contribution!

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented

Thanks for the commit! :)

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

benabaird’s picture

benabaird commented

Is there any timeline on getting a new release tagged with this fix in? This is pretty major, as it breaks using the responsive image option within blazy.

auxiliaryjoel’s picture

auxiliaryjoel commented

I notice users in this comment thread asking if there was a fix available.
I'm wondering if there's been any updates to make this reliable?