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.