CODEWITHSUNDEEP
htmlcssimagesrcset
Toni Michel Caubet
Toni Michel Caubet

Reputation: 20163

img not responding to srcset specified dimensions

I wanted to implement the responsive images using srcset, as described here, so the image src that the user loads is the most similar to his resolution.

The thing is that I made this test and it doesn't respond to viewport changes,

<img src="https://lorempixel.com/400/200/sports/"
      alt=""
      sizes="(min-width:1420px) 610px,
             (min-width:1320px) 500px,
             (min-width:1000px) 430px,
             (min-width:620px)  280px,
             280px"
      srcset="https://lorempixel.com/620/200/sports/ 280w,
              https://lorempixel.com/1000/300/animals/ 430w,
              https://lorempixel.com/1320/400/cats/ 610w,
              https://lorempixel.com/1420/500/abstract/ 1000w,
              https://lorempixel.com/1600/600/fashion/ 1220w" />

jsfiddle: http://jsfiddle.net/ad857m1r/9/

Any idea what I'm missing?

Upvotes: 10

Views: 1533

Answers (3)

ElChiniNet
ElChiniNet

Reputation: 2902

The srcset attribute is interpreted by the browser at first load, then the loaded image is stored in cache and the browser might not load any other image until you clear the cache and reload the page.

If you want that the srcset is reinterpreted on each resize event of the page, you need to update it adding a random variable at the end of each url, then the browser will reload the correct one for that screen size.

I've added a delay to this process to reduce the number of times that it is executed. You'll notice that this practice forces the browser to download the correct image at each resize and this is bad for bandwidth. I do not recommend the use of this technique, let the browser decides which image it uses on each situation. I think that viewport resize is not a common situation in an everyday environment. Maybe is better for your purposes the use of picture element (using some approach to making it compatible with old browsers) as @KrisD said.

var img = document.getElementById("myImage");
var srcset = img.getAttribute("srcset");
var delay;

window.onresize = function() {

    clearTimeout(delay);

    delay = setTimeout(refreshImage, 500);

}

function refreshImage() {

    var reg = /([^\s]+)\s(.+)/g;
    var random = Math.floor(Math.random() * 999999);

    img.setAttribute("srcset", srcset.replace(reg, "$1?r=" + random + " $2"));

}

jsfiddle

Upvotes: 9

Lakshya
Lakshya

Reputation: 506

You just copy and paste it. First thing you need to know you have to arrange the size of the images as increasing order and then you will need to adjust according to that.

For Example

<img src="http://lorempixel.com/400/200/sports/"
      alt=""
      sizes="(min-width:1420px) 610px,
             (min-width:1320px) 500px,
             (min-width:1000px) 430px,
             (min-width:620px)  280px,
             280px"
      srcset="http://lorempixel.com/620/200/sports/ 620w,
              http://lorempixel.com/1000/300/animals/ 1000w,
              http://lorempixel.com/1320/400/cats/ 1320w,
              http://lorempixel.com/1420/500/abstract/ 1420w,
              http://lorempixel.com/1600/600/fashion/ 1600w" />

By this you can view your result, I just tried this and its working 

img {
  width: 100%;  
}
<img src="http://lorempixel.com/400/200/sports/"
      alt=""
      sizes="(min-width:1420px) 610px,
             (min-width:1320px) 500px,
             (min-width:1000px) 430px,
             (min-width:620px)  280px,
             280px"
      srcset="http://lorempixel.com/620/200/sports/ 620w,
              http://lorempixel.com/1000/300/animals/ 1000w,
              http://lorempixel.com/1320/400/cats/ 1320w,
              http://lorempixel.com/1420/500/abstract/ 1420w,
              http://lorempixel.com/1600/600/fashion/ 1600w" />

Notes -> Call your image as image.jpg then it would be more effective.

Upvotes: 0

mustafa-elhelbawy
mustafa-elhelbawy

Reputation: 530

when you try to apply the code in the example for thelink you mentioned you made few edits for the code in the example:

1- when you are setting the sizes attribute values you set the last one and the default to 280 as the example explained butthe value before it directly was 580 not as you did 280

2- when you use one of the dummy generators of the images you made a slash in the end of the image link, then space before binding the image with its size and this has been translated by the image generator site with a text on the image you need to change the code to the following to be as the same explained in the example link you mentioned

<img src="https://lorempixel.com/400/200/sports/"
  alt=""
  sizes="(min-width:1420px) 610px,
         (min-width:1320px) 500px,
         (min-width:1000px) 430px,
         (min-width:620px)  580px,
         280px"
  srcset="https://lorempixel.com/620/200/sports 280w,
          https://lorempixel.com/1000/300/animals 430w,
          https://lorempixel.com/1320/400/cats 610w,
          https://lorempixel.com/1420/500/abstract 1000w,
          https://lorempixel.com/1600/600/fashion 1220w" />

Upvotes: 0

Related Questions