Responsive images

Question

I am building a blog with responsive design and currently use width:100% to resize the images inside the div.

.eMessage>.pimg>img{
width:100%;
-webkit-width: 100%; /*Chrome*/
-moz-width: 100%; /*Mozila*/
-ms-width: 100%; /*Internet Explorer*/
-o-width: 100%; /*Opera*/}

But images are sometimes heavy for a mobile device.

You know the solution for a lighter image to be uploaded on devices?

Answer 1

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.

Answer 2

You can pull the images in CSS. You use an average for each image, then 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 various 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;  }}

Answer 3

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