Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

mathiasbynens commented Sep 7, 2011

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

This comment has been minimized.

Owner

vasilisvg commented Sep 7, 2011

Replaced my code cruft with mathiasbynens' beauty.

@yatil

This comment has been minimized.

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

This comment has been minimized.

Owner

vasilisvg commented Sep 7, 2011

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

This comment has been minimized.

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

This comment has been minimized.

Owner

vasilisvg commented Sep 7, 2011

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

This comment has been minimized.

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

This comment has been minimized.

Owner

vasilisvg commented Sep 12, 2011

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

@hpoom

This comment has been minimized.

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

This comment has been minimized.

mathiasbynens commented Sep 13, 2011

@vasilisvg

This comment has been minimized.

Owner

vasilisvg commented Sep 13, 2011

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