High-density screens like Apple’s Retina displays contain more pixels than standard- density screens. The pixels on these screens are smaller than the pixels on standard- density screens. So when displaying an image, the screen uses a scale factor (1.5 or greater) to scale up the image. As a result, raster images may look a bit blurry when shown on these screens.

To solve this problem, we can supply 2x or 3x versions of an image using the srcset attribute of the img element.

  1. Go to Photoshop, insert the original full-size image,
  2. Image menu -> Image Size -> resize to 1200px x 1200px -> save it as @3x, Quality set to 7.
  3. Keep doing 2 more time with 800px x 800px as @2x and 400px x 400px as @1x
  4. In <img>, add srcset attribute
<body>
  <img
    src="/images/meal.jpg"
    alt="A bowl with salmon and curry"
    class="meal"
    srcset="images/meal.jpg 1x, images/[email protected] 2x, images/[email protected] 3x"  />
</body>