Serving images of different sizes 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 will see that they have a resolution of 638x368.

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

• load the page and open Firebug or Developer Tools ( F12 )
• go to the Network (or Network ) tab
• resize browser and reload page
• Enlarge browser window again
• View any image in the far right column. You will see that they have a resolution of 356x205.

Clearly, this is some kind of JavaScript / jQuery trick (+ some other technologies), because if you check any image in the rightmost column, you will see the following code:

<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 does not exist if you are a view-source page. Is there an open source JavaScript library that does something like this?

And what do we call it? Responsive Images ?

The simple and simple question I want to ask is the ability to transfer images of different sizes to different devices based on the size of the viewing port or their screen resolution?

Answer 1

Great answer: this is possible without javascript for a while.

In the future, the <picture> element will be exactly what will be used and necessary. HTML for it is as follows

 <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 method as below, but the writing form is simplified and serves img , not background-image . Starting with writing this answer, we can use a polyfill to use this format or @media request

CSS2 media text types introduced @media queries that allow us to influence different page styles based on viewport sizes, among many other things. This allows you to serve large images as background images only if they are needed. An example of its use is

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