Responsive image on different dimensions
How to display different size images on different dimensions.
Use picture tag in html file and in the tag mention different widths and image sources.
<picture> <source srcset="/media/cc0-images/surfer-240-200.jpg" media="(min-width: 800px)"> <img src="/media/cc0-images/painted-hand-298-332.jpg" alt="" /> </picture>
You can have as many source as you want. If the 's media condition evaluates to false, the browser skips it and evaluates the next element inside .
You can use picturefill for cross browser compatibility.