Smallest image shows up on wide screen

[cortix]

I am taking an interesting error on 27 inc monitor. Maybe I'm doing something wrong but I wanted to share it anyway. Smallest image shows up on wide screen. First of all, I want to share what I did.

_config.yml

picture:
  source: "assets/images/"
  output: "assets/images/generated"
  suppress_warnings: true

picture.yml

media_queries:
    mobile: 'max-width: 480px'
    tablet: 'max-width: 768'
    wide_tablet: 'max-width: 1200px'
    laptop: 'max-width: 1024px'
    desktop: 'max-width: 1200px'
    wide_desktop: 'min-width: 1801px'
    wide: 'min-width: 1280'
    ultrawide: "min-width: 1280px"

presets:
  default:
    markup: data_auto
    formats: [webp, original] 
    widths: [200, 400, 800, 1200, 1600] 
    media_widths:
      mobile: [200, 400, 600]
      tablet: [400, 600, 800]
    noscript: true
    sizes:
      mobile: calc(100vw - 16px)
      tablet: 80vw

    fallback_width: 800
    fallback_format: original
    size: 800px
    link_source: false 
    dimension_attributes: true 

    attributes:
      parent: 'data-downloadable="true"'
      picture: 'data-volume="11" data-sizes="auto" class="lazyload"'
      img: 'data-sizes="auto" class="lazyload"'
      a: 'class="image-link"'

  webp:
    formats: [webp, original]
    markup: data_picture
    noscript: true

  avif:
    formats: [avif, webp, original]

  loaded:
    formats: [avif, jp2, webp, original]
    dimension_attributes: false

  thumbnail:
    base_width: 250 
    pixel_ratios: [1, 1.5, 2] 
    fallback_width: 250 
    formats: [webp, original]
    attributes:
      picture: 'class="thumbnail"'


  avatar:
    crop: 1:1
    base_width: 100
    pixel_ratios: [1, 1.5, 2]
    fallback_width: 100,

  lazy:
    markup: data_auto
    formats: [webp, original]
    noscript: true 
    attributes:
      parent: class="lazy"

  direct:
    markup: direct_url
    fallback_format: webp
    fallback_width: 600

by using inspect element I am getting this

<picture data-volume="11" data-sizes="auto" class=" lazyloaded" data-downloadable="true">
<source data-sizes="(max-width: 480px) calc(100vw - 16px), (max-width: 768) 80vw, 800px" data-srcset="/assets/images/generated/2022-02-23-imperative-and-declarative-programming/forloops-200-f2d1de698.webp 200w, /assets/images/generated/2022-02-23-imperative-and-declarative-programming/forloops-400-f2d1de698.webp 400w, /assets/images/generated/2022-02-23-imperative-and-declarative-programming/forloops-800-f2d1de698.webp 800w, /assets/images/generated/2022-02-23-imperative-and-declarative-programming/forloops-1200-f2d1de698.webp 1200w, /assets/images/generated/2022-02-23-imperative-and-declarative-programming/forloops-1600-f2d1de698.webp 1600w" type="image/webp" sizes="650px" srcset="/assets/images/generated/2022-02-23-imperative-and-declarative-programming/forloops-200-f2d1de698.webp 200w, /assets/images/generated/2022-02-23-imperative-and-declarative-programming/forloops-400-f2d1de698.webp 400w, /assets/images/generated/2022-02-23-imperative-and-declarative-programming/forloops-800-f2d1de698.webp 800w, /assets/images/generated/2022-02-23-imperative-and-declarative-programming/forloops-1200-f2d1de698.webp 1200w, /assets/images/generated/2022-02-23-imperative-and-declarative-programming/forloops-1600-f2d1de698.webp 1600w">
<source data-sizes="(max-width: 480px) calc(100vw - 16px), (max-width: 768) 80vw, 800px" data-srcset="/assets/images/generated/2022-02-23-imperative-and-declarative-programming/forloops-200-09592ad47.png 200w, /assets/images/generated/2022-02-23-imperative-and-declarative-programming/forloops-400-09592ad47.png 400w, /assets/images/generated/2022-02-23-imperative-and-declarative-programming/forloops-800-09592ad47.png 800w, /assets/images/generated/2022-02-23-imperative-and-declarative-programming/forloops-1200-09592ad47.png 1200w, /assets/images/generated/2022-02-23-imperative-and-declarative-programming/forloops-1600-09592ad47.png 1600w" type="image/png" sizes="650px" srcset="/assets/images/generated/2022-02-23-imperative-and-declarative-programming/forloops-200-09592ad47.png 200w, /assets/images/generated/2022-02-23-imperative-and-declarative-programming/forloops-400-09592ad47.png 400w, /assets/images/generated/2022-02-23-imperative-and-declarative-programming/forloops-800-09592ad47.png 800w, /assets/images/generated/2022-02-23-imperative-and-declarative-programming/forloops-1200-09592ad47.png 1200w, /assets/images/generated/2022-02-23-imperative-and-declarative-programming/forloops-1600-09592ad47.png 1600w">
<img data-sizes="auto" class="lazyautosizes ls-is-cached lazyloaded" data-src="/assets/images/generated/2022-02-23-imperative-and-declarative-programming/forloops-800-09592ad47.png" alt="for loops example" width="1650" height="1376" sizes="650px" src="/assets/images/generated/2022-02-23-imperative-and-declarative-programming/forloops-800-09592ad47.png"></picture>

also in the _site folder, picture tag shows up like this;

<picture data-volume="11" data-sizes="auto" class="lazyload" data-downloadable="true"><source data-sizes="(max-width: 480px) calc(100vw - 16px), (max-width: 768) 80vw, 800px" data-srcset="/assets/images/generated/2022-02-23-imperative-and-declarative-programming/forloops-200-f2d1de698.webp 200w, /assets/images/generated/2022-02-23-imperative-and-declarative-programming/forloops-400-f2d1de698.webp 400w, /assets/images/generated/2022-02-23-imperative-and-declarative-programming/forloops-800-f2d1de698.webp 800w, /assets/images/generated/2022-02-23-imperative-and-declarative-programming/forloops-1200-f2d1de698.webp 1200w, /assets/images/generated/2022-02-23-imperative-and-declarative-programming/forloops-1600-f2d1de698.webp 1600w" type="image/webp" /><source data-sizes="(max-width: 480px) calc(100vw - 16px), (max-width: 768) 80vw, 800px" data-srcset="/assets/images/generated/2022-02-23-imperative-and-declarative-programming/forloops-200-09592ad47.png 200w, /assets/images/generated/2022-02-23-imperative-and-declarative-programming/forloops-400-09592ad47.png 400w, /assets/images/generated/2022-02-23-imperative-and-declarative-programming/forloops-800-09592ad47.png 800w, /assets/images/generated/2022-02-23-imperative-and-declarative-programming/forloops-1200-09592ad47.png 1200w, /assets/images/generated/2022-02-23-imperative-and-declarative-programming/forloops-1600-09592ad47.png 1600w" type="image/png" /><img data-sizes="auto" class="lazyload" data-src="/assets/images/generated/2022-02-23-imperative-and-declarative-programming/forloops-800-09592ad47.png" alt="for loops example" width="1650" height="1376" /></picture>
<noscript><img data-sizes="auto" class="lazyload" src="/assets/images/generated/2022-02-23-imperative-and-declarative-programming/forloops-800-09592ad47.png" alt="for loops example" /></noscript>

these are generated pictures;

finally I took a screenshot video to make this problem clear :)
https://youtu.be/CJ9UZuCAsvg

What do you think is the cause of this problem? I hope I made myself clear.

Best Regards.

[rbuchberger]

Hi!

Not strictly related to your question, but it looks like you copy-pasted the example configs - they aren't really meant for that. There's a lot of "demonstrational" noise in there, such as most of the attributes. You don't actually need any configuration at all to use JPT; everything has sensible defaults so you only need to set the things you want changed.

The image selection probably has to do with the sizes attribute. You didn't share it but I'll assume you're using the default preset (something like {% picture forloops.png %}), and I see an auto-sizes attribute added on. Could your lazyloading library be attempting to generate a sizes attribute and failing? By my read of your code, it should be selecting the 800 pixel image for screens wider than the tablet media query. Weird that you're getting something else!

Here's our docs on the sizes attribute, maybe look through that and see if it makes sense.

[cortix]

You're right. I copy-pasted from the example configs. I tried to understand by trial-and-error. My goal was to see what output I would get. As you mentioned, choosing the 200pixel one, while it should have chosen the 800 pixel one, was odd for me.

[cortix]

Actually what I want to do is to create webp and original images suitable for every media format and add lazy loading feature to these images.

The image selection probably has to do with the sizes attribute. You didn't share it but I'll assume you're using the default preset (something like {% picture forloops.png %}),

It was like this;
{% picture 2022-02-23-imperative-and-declarative-programming/forloops.png --alt for loops example %}

and I see an auto-sizes attribute added on.

By the way, when I remove this data-sizes="auto", the problem has gone.

But I don't really understand why this feature is causing the error. Nevertheless, thank you very much.