Html css course- part2: resolution switching

Hello guys,

just to say… mosh is a fenomenal teacher, no bad feelings or something, just want some more clarity about it.

I dug into thinking a bit deeper into my mind/the thought about the concept of how he said it, because it kind of contradicted with the previous video of high retina screens.

What he said was, that for different dpr’s we need different images, i get that.

But after that, in the beginnjing of the resolution switching video, he said that if we need to make the image change relative to the screen (using vw) with the appropriate size for the different screen resolutions we would need to tell the browser the actual width of the image using “w
But doesn’t this means that for let’s say the iphone as it has a DPR of 2 instead of displaying an image that is scaled by a factor of 2 it will use the one with the w set to 400 which would be the one that will make it look blurry as it would display an image with dpr 1, or is that not the case?

Is the browser perhaps even smarter to decide that the device has a high retina display and needs to display the image with a w of 800?

I know, I am making it kind of complex but this kind of makes it complicated to get the difference between the two.

any clarity would be much appreciated!!

Thanks in advance!