Reminds me of the good old days of

    <IMG SRC="Logo-From-Branding-Guidelines-2000x2000.gif" HEIGHT=100 WIDTH=100>

... It is pretty easy to avoid doing this with CSS background images: just use something like:

    .banner {
        background-image: url(banner-big.jpg);
    }

    @media screen and (max-width: 999px) {
        .banner {
            background-image: url(banner-small.jpg);
        }
    }    

... of course, this kind of thing doesn't translate well into a "framework".