Retina

index.html

<img src="img/img_x1.jpg"
     srcset="img/img_x2.jpg 2x img/img_x3.jpg 3x">

<img src="img/img_x1.jpg"
     srcset="img/img_x2.jpg 500w img/img_x3.jpg 700w img/img_x4.jpg 1000w">

scss.scss

.block {
  background-image: url('img/img_x1.jpg')
} 

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
  .block {
    background-image: url('img/img_x2.jpg')
  } 
}

/* OR */
.block {
  width: 400px;
  height: 400px;
  background: url('img/img_x2.jpg') center center no-repeat no-repeat;
  background-size: contain;
}