I have a mobile-only image. The problem is that with the default loading strategy (eager) the image is getting loaded even on desktops or larger screens. But the image is important for mobile devices only, and at the same time, it should be available as soon as possible. So, it's not possible to lazy load the image, either.
But what if I conditionally preload (using media query) the image and lazy load it at the same time?
<link rel="preload" media="(max-width: 768px)" href="/path/to/image" as="image/type">
<img src="/path/to/image" alt="..." loading="lazy">
It solves both of the problems: the image doesn't load on desktops, and it's available as soon as possible on mobile devices. But is there any other issue with this approach that I have missed?
