How to make an image responsive in HTML email regardless of image size

Yes and no. Outlook tends to force the image to its actual size, regardless of your CSS and HTML sizings. So using images that are bigger than what you want to be displayed on your desktop version is likely to break on Outlook.

Your best bet for responsive images would be to have the images as 100% width inside a table that has max-width set. Then around this table, make conditional code for MSO that contains a set width table at the max-width size.

Example below:

<!--[if gte MSO 9]>
  <table width="640">
     <tr>
        <td>
<![endif]-->
  <table width="100%" style="max-width:640px;">
    <tr>
      <td>
        <img src="image.jpg" width="100%" />
      </td>
    </tr>
  </table>
<!--[if gte MSO 9]>
      </td>
    </tr>
  </table>
<![endif]-->

There will still be some quirks with using max-width as not all clients support it. I would view CSS compatability and make little tweaks as needed on top of the above to ensure it fits. Then test and test some more.

Been breaking my head over image width in emails for a day now. Finally got it to work in a "responsive" manner...somewhat. What I found is that, while some email clients will ignore CSS for <img> tags (at least CSS for width and max-width) and set the image to its full width, most of them will actually respect the width attribute set directly on the <img>. So this is what I did:

<img class="logo" width="250" src="http://myweb.com/img/myimg.png" />

And then:

.logo {
    display: block;
    width: 310px !important;
    max-width: 100% !important;
}

Clients that respect the CSS, will use CSS for the image, while clients that ignore it will just have width set to 250px, so that image doesn't break the layout for different screensizes.