Search code examples
htmlpreloadresponsive-images

How to preload image based on screen size

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?

Solution

  • 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.