How to preload image based on screen size

Question

I want to preload an image based on the screen size, so I'm using:

<link rel="preload" as="image" href="/imagemax.png" media="(min-size:800px)" >
<link rel="preload" as="image" href="/imagemed.png" media="()" >
<link rel="preload" as="image" href="/imagemin.png" media="(max-size:599px)">

I'm unsure how to preload the medium-sized image. All the examples I've seen only deal with a minimum and maximum screen size, not a middle value. How can I trigger the preload when the screen is >599px and <800px?

Answer 1

You can try this code.

<link rel="preload" as="image" href="/imagemed.png" media="(min-size:800px) and (max-size: 599px)">

Use the and to target the width between the maximum and minimum width of the screen.