Make sure that images hidden through 'display:none' are not downloaded by the browser.
TLDR : If all you care about is code for this to work, just go to this section and grab the code snippet.
Hiding an Image Doesn’t Mean it Won’t be Loaded
The most intuitive approach to hide an image is to set it’s display property to none. The problem with this is that even if the image is not displayed, it does get downloaded.
Hiding and Not Loading an Image
The best way to ensure that an image is not just hidden, but also not downloaded by the browser for a specific screen size is by using srcset attribute for <image>:
Delay Loading Hidden Images
Let us improve your website speed?
Let us take care of your website's performance. Contact us for our performance optimization services.