<!--Change the browser window width to see the image change.-->

<picture>
    <source srcset="/media/examples/surfer-240-200.jpg"
            media="(min-width: 800px)">
    <img src="/media/examples/painted-hand-298-332.jpg" alt="" />
</picture>

footer {
    font-size: .8rem;
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.output {
    background: #eee;
    position: relative;
}