以什么分辨率使用高质量的图像

Question

具有高分辨率显示，例如苹果视网膜最好使用高分辨率图像以获得良好的视觉用户体验。

您可以使用例如CSS3或HTML

CSS：

#myimage {
    width: 400px;
    height: 300px;
    background: url(lo-res.jpg) 0 0 no-repeat;
}

@media
    screen and (-webkit-min-device-pixel-ratio: 1.5),
    screen and (-moz-min-device-pixel-ratio: 1.5),
    screen and (min-device-pixel-ratio: 1.5) {
        #myimage {
            background-image: url(hi-res.jpg);
        }
   }

HTML：

<picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>

但是在上面的HTML代码中，什么时候切换到高分辨率图像？屏幕宽度是多少？