Does not work with `loading="lazy"`

[mmeendez8]

It seems JPT does not work well with Lazy loading. I have the following preset:

media_queries:
  mobile: 'max-width: 767px'
  desktop: "min-width: 768px"

presets:
  pimage:
    formats: [webp]
    widths: [400, 600, 800, 1000]
    dimension_attributes: true
    attributes:
      img: 'loading="lazy"' 
    # noscript: true  <- Tried with and without this
    sizes:
      mobile: 100vp
    size: 80vp

But browser its always downloading the largest image of the set. Can't really get what is going on. This is the html that gets generated (it seems correct to me):

<img loading="lazy" src="/generated/assets/images/painted_coco_sample-666-8250e9564.jpg" 
srcset="/generated/assets/images/painted_coco_sample-400-6775c1de5.webp 400w, 
/generated/assets/images/painted_coco_sample-600-6775c1de5.webp 600w, 
/generated/assets/images/painted_coco_sample-666-6775c1de5.webp 666w" 
sizes="(max-width: 767px) 100vp, 90vp" width="666" height="500">

[rbuchberger]

Thanks for the feedback!

I'm not sure about the vp units you're using - I can't find any reference to them. Do you know something I don't? Maybe you're looking for vw? (Percentage width of the viewport)

Note that the noscript attribute only works with the data- output formats, which you aren't using in this preset. It shouldn't matter though, you're trying to use the new native lazy-loading feature and not a javascript implementation of it.

[mmeendez8]

Oops! My bad, that was a typo! I probably got lost after trying so many combinations... That little detail made everything to fail! Can't really test this now but I will try to see if everything works when I get some free time. Thanks for your time, for the fast support and your awesome work! :fire:

[rbuchberger]

Not a problem, let me know if it works out. Responsive images have a lot of pitfalls to get right - I've made it as easy as I can but it's still pretty tricky.

[mmeendez8]

Seems to be working better now! I am still not really getting why with this preset:

media_queries:
  mobile: 'max-width: 767px'
  desktop: "min-width: 768px"

presets:
  posts-grid:
    formats: [webp]
    widths: [400, 600, 800]
    dimension_attributes: true
    attributes:
      img: 'loading="lazy"' 
    sizes:
      desktop: 25vw
      mobile: calc(100vw - 38px)
    size: 400px

I am getting 800px size images when decreasing browser tab up to 200px width. Is this related with sizes order priority? Could not really make it work...

Anyway this look way better than before! It is good to see these kind of result:

Thanks a lot again!