What is the best method for swapping an image used in desktop email versions compared to a preferred image for mobile? We are looking for a solution that is supported within most email clients if possible. Is the code listed below the best option??? Our concern is in gmail and yahoo.

<style>
    @media only screen and (min-device-width: 500px) and (max-device-width: 1024px)  {
        span[id=switcher] {display:block;
        background-image: url(#) !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        width: 300px !important;
        height: 250px !important; }
        img[id=houdini] {display: none !important; }
    }
    @media only screen and (max-device-width: 489px) {
        span[id=switcher] {display:block;
        background-image: url(#) !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        width: 300px !important;
        height: 250px !important; }
        img[id=houdini] {display: none !important; }
    }
</style>
<body>
    <a href="#"><span id="switcher"><img id="houdini" src="#" alt=""></span></a>
</body>