: How to avoid request of all images used for different devices using media query? I want to know, how can I avoid loading all images I created for different devices using media query. Currently

@Nimeshi995

You wouldn't want to use CSS based media queries in any case because browsers will download all those images regardless if they are being shown or hidden. You can achieve what you want using either HTML5 markup or Javascript.

Here is just a few methods that should get you started:


Img Srcset (HTML5 Markup)


<img sizes="100vw" srcset="sm.jpg 400w, md.jpg 800w, lg.jpg 1600w" src="sm.jpg">

Picture (HTML5 Markup)


<picture>
<source media="(min-width: 36em)" srcset="lg.jpg 1024w, md.jpg 640w, sm.jpg 320w" sizes="33.3vw">
<source srcset="cropped-lg.jpg 2x, cropped-sm.jpg 1x" />
<img src="sm.jpg" />
</picture>

Zurb Foundation Interchange (JavaScript)


<img data-interchange="[sm.jpg, small], [md.jpg, medium], [lg.jpg, large]">

Koen Vendrik's Responsive Images (JavaScript)


<img data-src-base='/' data-src='<480:xs.jpg,<768:sm.jpg,<960:md.jpg,>960:lg.jpg'>

ResponsiveJS (JavaScript)


<img src="sm.png" data-min-device-width-641="md.png">

Responsive Img (JavaScript)


<img id="img1" src="example.jpg" style="max-width:100%;" />

lazySizes (JavaScript)


<img sizes="(min-width:1000px) 930px, 90vw" data-srcset="sm.jpg 500w, md.jpg 640w, lg.jpg 1024w" data-src="md.jpg" class="lazyload">

ImagerJS (JavaScript) Kinda old but still works


<div class="delayed-image-load" data-src="example{width}" data-alt="text"></div>

Vote Up Vote Down