# Doubt regarding topics in Responsive images

**URL:** https://discourse.mozilla.org/t/doubt-regarding-topics-in-responsive-images/64062
**Category:** MDN
**Tags:** learning
**Created:** [July 18, 2020, 5:21pm UTC](https://discourse.mozilla.org/t/doubt-regarding-topics-in-responsive-images/64062 "2020-07-18T17:21:10Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![VarunK](https://avatars.discourse-cdn.com/v4/letter/v/c6cbf5/32.png) [@VarunK](https://discourse.mozilla.org/u/VarunK)
#### Post date: [July 18, 2020, 5:21pm UTC](https://discourse.mozilla.org/t/doubt-regarding-topics-in-responsive-images/64062/1 "2020-07-18T17:21:11Z")

</div>

Hello,  
In [Responsive images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) section, under subsection of [How to create responsive images?](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#How_do_you_create_responsive_images) \> Resolution switching example, `elva-fairy-480w.jpg`is not showing up at all, no matter the veiwport width. I googled a bit and found out that slot allotted in `sizes` attribute gets multiplied by _device pixel ratio_. That was the reason behind only `elva-fairy-800w.jpg` loading everytime because my device-pixel ratio is more than 1. The article assumes the device-pixel ratio of 1 right? Am I the only one having this problem? If not, can you guys clarify it? (I’m using Firefox v78.0.2 browser)

---

<div class="post-metadata">

### Author: ![justsomeone](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/justsomeone/32/67787_2.png) [@justsomeone](https://discourse.mozilla.org/u/justsomeone)
#### Post date: [July 18, 2020, 7:03pm UTC](https://discourse.mozilla.org/t/doubt-regarding-topics-in-responsive-images/64062/2 "2020-07-18T19:03:12Z")

</div>

Hello @VarunK

could you please share the full code

for me it work fine and i use the same version also

have a nice day

---

<div class="post-metadata">

### Author: ![VarunK](https://avatars.discourse-cdn.com/v4/letter/v/c6cbf5/32.png) [@VarunK](https://discourse.mozilla.org/u/VarunK)
#### Post date: [July 19, 2020, 10:06am UTC](https://discourse.mozilla.org/t/doubt-regarding-topics-in-responsive-images/64062/3 "2020-07-19T10:06:16Z")

</div>

[This example code](https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html), which was given as example for **Resolution switching: Different sizes** under [How do you create responive images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#How_do_you_create_responsive_images) sub-section. I appreciate the help you too have a nice day 🙂

---

<div class="post-metadata">

### Author: ![justsomeone](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/justsomeone/32/67787_2.png) [@justsomeone](https://discourse.mozilla.org/u/justsomeone)
#### Post date: [July 19, 2020, 10:26am UTC](https://discourse.mozilla.org/t/doubt-regarding-topics-in-responsive-images/64062/4 "2020-07-19T10:26:55Z")

</div>

Hello @VarunK

for me it work fine both size load when i resize my window

1. did you tried to resize your window even if what you said is the cause of the issue it still should be change if you resize your screen smaller

2. try to disable all your plugin and see if it work

3 try to use another browser

hope that help and have a nice day

---

<div class="post-metadata">

### Author: ![aviv.mu](https://avatars.discourse-cdn.com/v4/letter/a/4af34b/32.png) [@aviv.mu](https://discourse.mozilla.org/u/aviv.mu)
#### Post date: [July 19, 2020, 11:36am UTC](https://discourse.mozilla.org/t/doubt-regarding-topics-in-responsive-images/64062/5 "2020-07-19T11:36:28Z")

</div>

This is similar to a recently opened [mdn issue](https://github.com/mdn/learning-area/issues/239).  
I think it’s worth to add to the documentation about how DPR affects the calculations.

---

<div class="post-metadata">

### Author: ![VarunK](https://avatars.discourse-cdn.com/v4/letter/v/c6cbf5/32.png) [@VarunK](https://discourse.mozilla.org/u/VarunK)
#### Post date: [July 19, 2020, 12:51pm UTC](https://discourse.mozilla.org/t/doubt-regarding-topics-in-responsive-images/64062/6 "2020-07-19T12:51:24Z")

</div>

Yes I tried resizing the viewport width to the smallest(Around 450px wide), still it gave 800w image. Also tried in Edge browser still same result. Going to Responsive design mode and setting the DPR to 1 as suggested by @aviv.mu in github thread seemed to work and loaded correct images. Thank you @aviv.mu and @justsomeone for the help.

---

<div class="post-metadata">

### Author: ![justsomeone](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/justsomeone/32/67787_2.png) [@justsomeone](https://discourse.mozilla.org/u/justsomeone)
#### Post date: [July 19, 2020, 12:52pm UTC](https://discourse.mozilla.org/t/doubt-regarding-topics-in-responsive-images/64062/7 "2020-07-19T12:52:43Z")

</div>

you welcome 🙂
