Is it possible to have multiple sizes and pixel ratios at the same time?

[dylanhand]

My site shows thumbnails for blog posts and album art.

On mobile, these thumbnails are 70x70.

On desktop, they're 100x100.

I'm hoping I can use JPT to generate both these variants with @1x and @2x sizes. Is this possible? It seems I can only specify widths OR pixel_ratios in my preset, but not both.

The output I'm after would look something like this (from ChatGPT so may be errors):

<picture>
  <!-- For 1x pixel density -->
  <source media="(max-width: 767px)" 
          srcset="[email protected] 1x, [email protected] 2x">

  <!-- For 2x pixel density -->
  <source media="(min-width: 768px)" 
          srcset="[email protected] 1x, [email protected] 2x">

  <!-- Default fallback if the media queries do not match -->
  <img src="thumbnail-default.jpg" 
       alt="Thumbnail" 
       style="width: 100px; height: 100px;"> <!-- Set a default size -->
</picture>

[rbuchberger]

In this instance I'd just use a width-based srcset, with the media-widths setting. A little math won't kill you :)

media_queries:
  mobile: # (...)
  desktop: # (...)

presets:
  thumbnail:
    # (...)
    sizes: 
        mobile: 70px
        desktop: 100px
    media_widths:
        mobile: [70, 105, 140]
        desktop: [100, 150, 200]

Edit: Though honestly I'm not sure what it gets you. This will achieve the same result:

media_queries:
  mobile: # (...)
  desktop: # (...)

presets:
  thumbnail:
    # (...)
    sizes: 
        mobile: 70px
        desktop: 100px
    widths: [70, 100, 105, 140, 150, 200]

[dylanhand]

The second method worked!

The first method only works if the widths key is added just as you have it in the second method. Otherwise it generates the default sizes.

Thanks for your help :)

[dylanhand]

This method from @rbuchberger is the one that worked:

media_queries:
  mobile: # (...)
  desktop: # (...)

presets:
  thumbnail:
    # (...)
    sizes: 
        mobile: 70px
        desktop: 100px
    widths: [70, 100, 105, 140, 150, 200]