Responsive Images

Picture element

Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

<picture>
    <source srcset="img/peace-pie-original.jpg" media="(min-width: 1200px)">
    <source srcset="img/peace-pie-500.jpg" media="(min-width: 500px)">
    <img src="img/peace-pie-150.jpg" alt="The peace pie">
</picture>

CSS Background Images

Ref: https://timkadlec.com/2012/04/media-query-asset-downloading-results/

Use media queries for both the mobile & desktop images. This ensures that mobile devices get their image and NOT the larger image.

@media all and (min-width: 601px) {
    #test5 {
        background-image:url('images/test5-desktop.png');
        width:200px;
        height:75px;
    }
}
@media all and (max-width: 600px) {
    #test5 {
        background-image:url('images/test5-mobile.png');
        width:200px;
        height:75px;
    }
}