При каком разрешении используйте высококачественное изображение

Question

С дисплеем с высоким разрешением, например Apple Retina, хорошо использовать изображения с высоким разрешением для хорошего визуального восприятия пользователем.

Вы можете использовать, например, 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-кода выше, когда вы переключитесь на изображение с высоким разрешением?На какой ширине экрана?