pixel-ratio support for Nexus 4

[sjoonk]

I have some problem on my Nexus 4 device. The device resolution is 384px x 592px and pixel-ratio is 2.

I set my image tag like this:

<img id="img1" src="images/banner.png" />

When I set responsiveImg script like this:

$('img').responsiveImg({
    breakpoints: {
        "_mobile": 480
    }
});    

And show the image on my Nexus 4 Chrome browser, it didn't show the "_mobile" image, instead the original default image(banner.png).

Actually when i change the option like this:

$('img').responsiveImg({
    breakpoints: {
        "_mobile": 768
    }
});    

And it works properly. It load _mobile image. It seems this plugin not reflect device pixel-ratio properly.

Am i was something wrong?

Any idea or any help please.

[drewbrolik]

Hey,

The reason that it's showing the original image still is because of the 2x pixel ratio. For a device width of 384 pixels at 2x pixel ratio, the plugin will want to use a 768 pixel wide image to account for the resolution.

So, it seems illogical, but it's actually still using the best possible image.

If it used the 480 pixel image, then it would appear "blurry" on the higher device resolution.

Does that make sense?

Drew

Drew Thomas CCO Brolik Productions thomasa@brolik.com thomasa@webrolik.com 267 297 8421 x203 brolik.com brolik.com/drewthomas

On Fri, Jan 3, 2014 at 12:31 PM, Sukjoon Kim notifications@github.comwrote:

I have some problem on my Nexus 4 device. The device resolution is 384px x 592px and pixel-ratio is 2.

I set my image tag like this:

http://images/banner.png

When I set responsiveImg script like this:

$('img').responsiveImg({ breakpoints: { "_mobile": 480 } });

And show the image on my Nexus 4 Chrome browser, it didn't show the "_mobile" image, instead the original default image(banner.png).

Actually when i change the option like this:

$('img').responsiveImg({ breakpoints: { "_mobile": 768 } });

And it works properly. It load _mobile image. It seems this plugin not reflect device pixel-ratio properly.

Am i was something wrong?

Any idea or any help please.

— Reply to this email directly or view it on GitHubhttps://github.com/drewbrolik/Responsive-Img/issues/8 .

[sjoonk]

Very very helpful. I got it.

A few new questions.

1. But then what is the reason when i change the "breakpoints" option's value to 768, the _mobile version image is shown properly in spite of blurring? In my reason, the original image also shown in this case because the image size is smaller than that.
2. Is there any to ignore the pixel-ratio despite blurring??

Thanks.