Responsive images approach

reponsive-images.html

<!-- <a> tag replaces image tag and the class determines the intended media which is modified in the css -->
<!-- start with mobile first 320px and progressively enhance -->
<div class="responsive">
  <a class="r320" href="cat320.jpg" title="A kitten"></a>
  <a class="r480" href="cat480.jpg" title="A cat"></a>
  <a class="r720" href="cat720.jpg" title="A lion aargh!"></a>
</div>

responsive-images.css

/* Will require respond.js in IE7,8 for media queries */

.responsive a:before {content: "Click to view image";}
.responsive a {border: solid 1px #ccc; background-color: #eee; text-align:center;}

@media screen only and (min-width:320px) {
  .responsive a, .responsive img {display:none}
  .r320 {display:block}
}

@media screen only and (min-width:480px) {
  .responsive a, .responsive img {display:none}
  .r480 {display:block}
}

@media screen only and (min-width:720px) {
  .responsive a, .responsive img {display:none}
  .r720{display:block}
}

retag.js

//Retag plug-in, converts eg <a> tags to <img> tags (plug-in?)
//Do we download a lower res image to replace and hi-res one, or just resize?

$(.responsive a).each(function() {
  var $this = $(this), $parent = $this.closest('.responsive');
  
  $this.remove();
  $img = $('<img>');

  $img.prop('src') = $this.prop('href');
  $img.prop('title') = $this.prop('title');
  //etc

  $img.appendTo($parent);

})