Serving Different Size Images For Different Devices Based On Resolution Using JavaScript

Question

EXAMPLE: This website is a very good example.

STEP-1: In one tab

• just load the page
• View any image in the far right column. You'll see that they are 638x368 in resolution

STEP-2: Open a new tab, and...

• load the page and open Firebug or Developer Tools (F12)
• go to the Network (or Net) tab
• resize the browser and reload the page
• Maximize the browser window again
• View any image in the far right column. You'll see that they are 356x205 in resolution

Clearly this is some JavaScript/jQuery trickery (+ some other tech), because if you inspect any of the images in the far right column, you'll see code like this:

<div class="article-img-container">
  <a data-turbo-target="post-slider" href="http://mashable.com/2012/12/27/gdigital-therapy-dog/">
    <span class="_ppf">
      <span data-q="true" data-s="http://rack.2.mshcdn.com/media/.../438c2f93/107/GeriJoy.jpg" data-z="638x368#"></span>
      <span data-q="(min-resolution: 1.5dppx)" data-s="http://rack.3.mshcdn.com/media/.../46c08de9/107/GeriJoy.jpg" data-z="1276x736#"></span>
      <span data-q="(max-width: 1160px)" data-s="http://rack.2.mshcdn.com/media/.../fa9bdb7b/107/GeriJoy.jpg" data-z="356x205#"></span>
      <span data-q="(max-width: 1160px) and (min-resolution: 1.5dppx)" data-s="http://rack.3.mshcdn.com/media/.../42ebf99d/107/GeriJoy.jpg" data-z="712x410#"></span>
      <span data-q="(max-width: 480px)" data-s="http://rack.2.mshcdn.com/media/.../948312d1/107/GeriJoy.jpg" data-z="280x157#"></span>
      <span data-q="(max-width: 480px) and (min-resolution: 1.5dppx)" data-s="http://rack.0.mshcdn.com/media/.../da1d8905/107/GeriJoy.jpg" data-z="560x314#"></span>
      <img src="http://rack.2.mshcdn.com/media/ZgkyMDEyLzEyLzI3L2QyL0dlcmlKb3kuNWYyZWYuanBnCnAJdGh1bWIJNjM4eDM2OCMKZQlqcGc/438c2f93/107/GeriJoy.jpg">
    </span>
  </a>
</div>

...which doesn't exist if you view-source of the page. Is there an open source javascript library that does something like this?

And what do we call this? Adaptive Images?

The plain and simple question that I want to ask is... is it possible to serve different size images to different devices based on the view-port size of their browser or their screen resolution?

Answer 1

The great answer is this has been possible without javascript for a little while now

In the future the <picture> element is exactly what will be used and needed. The HTML for it looks like the following

<picture>
    <source srcset="examples/images/large.jpg" media="(min-width: 1000px)">
    <source srcset="examples/images/medium.jpg" media="(min-width: 800px)">
    <source srcset="examples/images/small.jpg">

    <img srcset="examples/images/small.jpg" alt="Desciption of image">
</picture>

This is essentially the same technique as the one below, but the form of writing it is made easier and it is serves to an img as opposed to a background-image. As of writing this answer, we can use a polyfill to use this format or a @media query

CSS2 Media Types introduced @media queries which allow us to affect different styles of a page based on the viewport dimensions among many other things. This allows us to serve larger images as background images only if they're needed. An example of its use is the following

.myImg { background-image:url(myurlSmall.png); } /* Start with smallest */

/* Serve larger image only if needed */
@media (min-width:400px) {
    .myImg { background-image:url(myurlMedium.png); }
}
@media (min-width:1200px) {
    .myImg { background-image:url(myurlLarge.png); }
}
/* etc. */