Responsive sizes handling `min-width`

Describe the bug

Hi, I would like to load a bigger image on mobile and smaller on desktop. Normally I would define on img HTML tag a min-width or if needed both min and max like so:

sizes="
  ((min-width: 50em) and (max-width: 60em)) 50em,
  ((min-width: 30em) and (max-width: 50em)) 30em,
  (max-width: 30em) 20em"

But the component accepts only max-width and it won’t work in my case, where the bigger images should be loaded on smaller screen. Currently my code looks following (smaller images are loaded on both mobile and desktop):

responsive={[
  {
    size: {
       width: Math.round(cover.width / 2),
       height: Math.round(cover.height / 2),
     },
     maxWidth: 768,
  },
  {
     size: {
      width: Math.round(cover.width / 4),
      height: Math.round(cover.height / 4),
    },
    maxWidth: 1200
  },
]}

Am I missing something or it can work as I expect it with the current implementation of Remix-Image?

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Define in responsive prop two image sizes: for mobile bigger images should be displayed and for desktop smaller ones.

Expected behavior

I would like to defined also a min-width to display images.

Screenshots or Videos

No response

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 91.1]

Additional context

No response

[tomekrozalski]

Maybe we need to sort by maxWidth instead? From the smallest to largest and values without maxWidth at the end? I created pull request: https://github.com/Josh-McFarlin/remix-image/pull/34/files

[Josh-McFarlin]

@tomekrozalski Thanks for the PR! Currently relocating for work, so I’ll review it later today and hopefully push out a new release.