search

rbuchberger / jekyll_picture_tag

Easy responsive images for Jekyll.
https://rbuchberger.github.io/jekyll_picture_tag/
BSD 3-Clause "New" or "Revised" License
622 stars 106 forks source link

Does not work with `loading="lazy"` #278

Closed mmeendez8 closed 1 year ago

mmeendez8 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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: image

Thanks a lot again!