Responsive is in the CSS

gistfile1.txt

<!-- The actual proposed solutions are, in my opinion, an abstraction of the abstract form (since the img tag is basically an object tag) with all its limitations and fragilities -->
<object data="file-name.jpg" id="image-as-object" type="image/jpg" width="180" height="120"></object>

<!-- Let's imagine responsive images as a step back, then a step further: (pseudo-code) -->
<object id="responsive-image-as-object" type="image/jpg;responsive">
  <param media="max-width:240px" data="really-small.jpg" width="24" height="16">
  <param media="(mix-width:241px) and (max-width:360px)" data="small.jpg" width="60" height="46">
</object>
<!-- Quite familiar, super standard BUT... -->

<!-- I think the responsiveness should reside in the CSS, since it's a visual issue -->
<!-- using url() should gain from the cache / multiple requests handling capabilities -->
<style>
  @media screen and (max-width: 240px) {
      #responsive:src {
        content: url('bem-pequeno.jpg');
        width: 40px;
        height: 60px;
      }
    }

    @media screen and (min-width: 241px) or (max-width: 359px) {
      #responsive:src {
        content: url('mais-ou-menos.jpg');
        width: 100%;
      }
    }

</style>

<!-- The markup should remain the same and the "original" attributes may be used as fallback or default values -->
<img src="full-file.jpg" id="responsive" alt="x" width="180" height="120">

<!-- See? We use familiar standards (don't mess with my markup, pseudo-classes in CSS are made for this - an element should be different in different situations), everybody wins -->