I used the picturefill on my website.
Just include the "picturefill.js" file and mark 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 images were added dynamically to' page (for 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">
. The Hisrc, besides testing the device resolution, also tests the quality of the internet. If the link is weak, it will use a lower quality image to speed up page loading.
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 Solution should you use? / Choosing A Responsive Image Solution
Edited:
There’s a community that’s trying to get browsers to adopt a new element <picture>
to support natively responsive images: Responsive Images Community Group.
Thank you to everyone who tried to help me, but the
picturefill.js
despite being more complex, it is the most efficient method of having multiple responsive images according to the screen resolution. Thanks @dcastro .– Ennio Sousa