Skip to content

Instantly share code, notes, and snippets.

@vasilisvg
Created September 7, 2011 10:50
Show Gist options
  • Save vasilisvg/1200270 to your computer and use it in GitHub Desktop.
Save vasilisvg/1200270 to your computer and use it in GitHub Desktop.
Responsive context aware images without cookies or server logic
<!doctype html>
<!--
WARNING!
You probably shouldn't use this technique since images never show up
if the script isn't loaded for one reason or another. Some reasons:
- The content is viewed using a RSS reader
- The content is viewed with a read-it-later service
- The user has a flaky connection (hotel wifi, Dutch train, etc)
-->
<meta charset="UTF-8">
<title>Client side context aware responsive images</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.image-container {
width: 50%;
position: relative;
}
.image-container img {
display: block;
max-width: 100%;
}
</style>
<p>Here's <a href="http://nerd.vasilis.nl/code/responsive-images/noscript.html">a working example</a>.</p>
<!-- place all sources and real widths of all images in their data-attribute... -->
<div class="image-container" data-small="img/work-kills-small.jpg" data-medium="img/work-kills-medium.jpg" data-large="img/work-kills-large.jpg" data-small-width="350" data-medium-width="600" data-large-width="900" data-alt="work kills">
<!-- ...create a noscript fallback for browsers without javascript... -->
<noscript>
<img src="img/work-kills-small.jpg" alt="work kills">
</noscript>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
// ...do things, and...
$('.image-container').each(function() {
var $this = $(this),
contentWidth = $this.width(),
theSource =
contentWidth < $this.data('small-width') ? $this.data('small') :
contentWidth < $this.data('medium-width') ? $this.data('medium') :
$this.data('large');
$this.append('<img src="' + theSource + '" alt="' + $this.data('alt') + '">');
});
// ...tadaa!
</script>
@mathiasbynens
Copy link

Careful, you’re leaking some vars to the global scope (oh noes!). Also I’d cache $(this) in a variable and re-use that. Something like…

$('.image-container').each(function() {
    var $this = $(this),
        contentWidth = $this.width(),
        theSource =
            contentWidth < $this.data('small-width') ? $this.data('small') :
            contentWidth < $this.data('medium-width') ? $this.data('medium') :
            $this.data('large');
    $this.append('<img src="' + theSource + '" alt="' + $this.data('alt') + '">');
});

@vasilisvg
Copy link
Author

Replaced my code cruft with mathiasbynens' beauty.

@yatil
Copy link

yatil commented Sep 7, 2011

Interesting concept, but wouldn’t that produce heavy reflow with many images? Also adding onresize to serve the larger image if viewport increases would be a great addition.

@vasilisvg
Copy link
Author

Sure you could add onresize but I believe most people never resize their browser-window: only frontend developers and testers do (-: There will probably be some heavy reflow, yes. Not sure if that's a very big problem though. Is it?

@yatil
Copy link

yatil commented Sep 7, 2011

hehe, I think more of like tablet devices, where you could view the small side first and then rotate to the large one. In this example you would be stuck with the medium image on an iPad that loaded the page in portrait but is now in landscape. (And just by now I think there is some possibility to detect rotation, which could come in handy in those instances.)

@vasilisvg
Copy link
Author

I think tablet rotation is an edge case: most people either use their tablet in portrait mode or in landscape mode, people almost never rotate their tablet – a conclusion taken from a highly scientific twitter research I conducted among my followers a few months ago (-:
The only time people will rotate their tablet is when the content is not accessible and they think it will be when they rotate their device. Exactly that situation is what we are trying to prevent from happening with responsive design.

@hpoom
Copy link

hpoom commented Sep 10, 2011

I would also suggest dropping the HTML in strings. HTML in JS is not that nice. Instead use jQuery's element creation syntax.

Instead of this line:

$this.append( '<img src="' + theSource + '" alt="' + $this.data('alt') + '">' );

I would suggest:

$( '<img>', { src: theSource, alt: $this.data('alt') } ).appendTo( $this );

@vasilisvg
Copy link
Author

Is there any real advantage (performance or another) in using your suggested syntax, hpoom?

@hpoom
Copy link

hpoom commented Sep 13, 2011

I do not think this is any faster, so no real performance gains that I know of.
The main advantages I think are:

  • Code is easy to read
  • If you are working with an MVC framework like backbone.js then you can have a model for your element attributes and then just do model.toJSON and pass that in as the data obj to set the attributes.

Mainly it comes down to personal preference. When you have lots of attributes being set on an element I find string concatenation to be very messy to read.

@mathiasbynens
Copy link

mathiasbynens commented Sep 13, 2011 via email

@vasilisvg
Copy link
Author

Thanks for your explanations hpoom and mathiasbynens.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment