Responsive Images

I used picturefill on my site.

Just include the "picturefill.js" file and tag the images like this:

<span data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
    <span data-src="small.jpg"></span>
    <span data-src="medium.jpg"     data-media="(min-width: 400px)"></span>
    <span data-src="large.jpg"      data-media="(min-width: 800px)"></span>
    <span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>

    <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
    <noscript>
        <img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
    </noscript>
</span>

If you've added images dynamically to 'page' (by javascript, for example), just call picturefill(); for the plugin to detect them.

There are other options, such as HiSRC : <img src="200x100.png" data-1x="400x200.png" data-2x="800x400.png"> . HiSRC, in addition to testing the device's resolution, also tests the quality of the internet. If the link is weak, it will use a lower quality image to speed up loading the page.

There is a very good spreadsheet with the advantages / disadvantages of various tools here , organized by Chris Coyier, author to css-tricks.com

Sources: Which responsive images should you use? / a Choosing A Responsive Image Solution

Edited :

There is a community trying to get browsers to adopt a new element <picture> to support natively responsive images: Responsive Images Community Group

You can pull the images in the CSS. You use an average for each image, there you will pull edited images from PhotoShop or another editor, so that each image is smaller than the other for each resolution.

You can create of several types:

<a class="foto"> </a>

or

<p class="foto"> </p>

In CSS you can put

@media all and (min-width:1025px) and (max-width:1366px){

.foto {
   display: block;
   background:url(foto.jpg);

   width:350px;
   height:200px;
   position: relative;  }}

@media all and (min-width:768px) and (max-width:1024px){

.foto {
   display: block;
   background:url(foto_02.jpg);
   width:250px;
   height:150px;
   position: relative;  }}

It also helps a lot in performance to decrease the weight of images by using some add-on like the imagein that is available for Grunt and for Gulp if it helps in your case.