(Suggestion) Adjusting breakpoint functionality

[FernandoChu]

Currently breakpoints generate up the value in the array, e.g breakpoints={[640]} generates two breakpoints, 0px-640px and 601px-infinity. I would suggest the breakpoint being generated to not include the number in the array, but stop one before; in this example, generate 0px-599px and 640px-infinity.

Why does this matter?

Most (if not all) css frameworks implement responsiveness with mediaqueries, specifically using the min-width property. For example Tailwind does @media (min-width: 640px), so the breakpoints generated are 0-639 and 640-infinity. While responsive images (those where the width scales with the window width) are useful, sometimes it is better to use fixed sizes for different window sizes.

Given this difference between my css configuration and the react-optimized-image configuration, I am a lot of times "off by one". A really minor nitpick but one that can potentially save some debugging time and size (for those unaware).