고해상도 디스플레이로 보면 사이트에서 이미지가 흐리게 되지 않습니까?

그러나 모든 디스플레이에서 고해상도 이미지를 준비하면 로딩이 느려질 수 있습니다.

고해상도 디스플레이 대응에 사용하는 이유

고해상도 디스플레이의 대응은, srcset 속성 로 대응은 가능합니다만, 화상 사이즈가 바뀌었을 때에 화상을 트리밍하거나, 중심점을 바꾸거나 할 수 없습니다.
그래서, 그러한 조작을 실시하고 싶다고는,를 사용합니다.

”picture 태그”란?

이미지 요소를 나타내는 태그입니다.
자세한 내용은
참조
봐.

를 사용하여 고해상도 이미지로 전환

<picture>
  <source media="(min-width: 704px)"
          srcset="medium.jpg 384w,
                  large.jpg  512w"
          sizes="33.3vw">
  <source srcset="cropped-small.jpg 1x,
                  cropped-medium.jpg  2x"
          sizes="75vw">
  <img src="small.jpg">
</picture>

에서 기본적으로 표시되는 이미지를 설정합니다. 디폴트 화상은 대응하지 않는 브라우저에서도 표시된다.
srcset 속성을 사용하여 고해상도 이미지를 설정합니다. 그렇게 함으로써 특정 이미지 폭의 때에 고해상도의 이미지를 공개할 수 있습니다.

참고

웹사이트 퍼포먼스 실천 입문