Really responsive images

Download demo

Load this page watching your network devtools to see that when you start at the phone size, it only downloads the smaller phone image.

<picture>
    <source srcset="phone.png" media="(max-width: 768px)">
    <source srcset="desktop.png">
    <img srcset="downloadDefault.png" alt="This picture loads on non-supporting browsers.">
</picture>

Note: While testing this, you don't want to start in desktop and shrink the browser down. That will get you both pictures because it already detected you at a larger size. Also, you might need to clear the cache once you are in phone testing size. (Using Chrome, when you are in DevTools(F12) the refresh button gains new abilities. Click and hold on it to see options to "Empty cache and reload")