CODEWITHSUNDEEP
javascriptjqueryimageresponsive-design
its_me
its_me

Reputation: 11338

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

EXAMPLE: This website is a very good example.

STEP-1: In one tab

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

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?

Upvotes: 3

Views: 3418

Answers (1)

Zach Saucier
Zach Saucier

Reputation: 25944

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. */

Upvotes: 1

Related Questions