[이미지] User-Agent가 사라진다고? 이미지 Client Hints 사용하기

이미지에 대한 Client Hints를 사용하기 위해 head 태그 내에 삽입해야되는 메타태그

<meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width">

Accept-CH: DPR, Viewport-Width
Accept-CH: Width
Accept-CH-Lifetime: 86400
Vary: DPR, Viewport-Width, Width

Accept-CH를 통해서 위와 같은 속성들을 사용할 수 있으며, 저는 이번에 DPR, Viewport-Width, width를 사용해 봅니다.

<img
  sizes="(min-width: 740px) 740px, (min-width: 320px) 100vw"
  srcset="https://assets.imgix.net/unsplash/bridge.jpg?w=740&dpr=3&ch=Width,DPR 3x,
          https://assets.imgix.net/unsplash/bridge.jpg?w=740&dpr=2&ch=Width,DPR 2x,
          https://assets.imgix.net/unsplash/bridge.jpg?w=740&dpr=1&ch=Width,DPR 1x"
  src="https://assets.imgix.net/unsplash/bridge.jpg?w=740"
/>
  

DPR의 범위를 제한함과 동시에 medaqueries 사이즈를 통해 각각 노출할 수 있습니다.