클라이언트 힌트를 기억하십니까?

2014년 Google Chrome은 브라우저의 요청 헤더에서 이미지 너비와 DPR을 전달하는 흥미로운 방법인 모든 클라이언트 힌트를 제공했습니다. 이렇게 하면 이미지에 필요한 올바른 크기를 알 수 있으므로 반응형 이미지를 훨씬 쉽게 제공할 수 있습니다. 한 가지 문제를 제외하고... 보안 문제를 일으켜 2017년에 제거되었습니다. 기능 정책 설정으로 해결되었으며 이제 클라이언트 힌트를 다시 사용할 수 있습니다! 클라이언트 힌트에 대한 Google의 정보도 있습니다.

클라이언트 힌트는 현재 웹의 74%에 대해 작동합니다. 여전히 가치가 있습니까? 예! 일부 이전 연구를 살펴보면 Smashing Mag srcset에서 미리 결정된 이미지 중단점을 사용하는 것보다 대역폭을 19-32% 절약할 수 있다고 판단했습니다.

클라이언트 힌트 사용

클라이언트 힌트 사용을 지원하는 몇 가지 이미지 CDN이 있습니다. 저는 imgix에서 일하므로 자연스럽게 이 예제에 imgix를 사용하기로 선택했습니다. imgix는 API 기반의 이미지 관리, 최적화 및 전송 서비스입니다. imgix의 이미지와 함께 클라이언트 힌트를 사용하려면 해당 이미지에 ch=width, dpr를 추가하기만 하면 됩니다. save-data 도 지원하지만 이 예에서는 사용하지 않습니다.

이 예에서는 클라이언트 힌트에 대해 ch=width,dpr를 추가한 다음 Firefox 또는 Safari와 같이 지원하지 않는 브라우저에 대한 대체 크기 옵션으로 w=400를 추가했습니다. sizes 를 추가하는 것도 중요합니다. 아래 내 예에서는 CSS를 사용하지 않으므로 이것이 내 이미지의 크기를 결정합니다.

<img src="https://imgix.tomdale.website/artsy/6.jpg?ch=width,dpr&w=400"
sizes="(min-width: 768px) 30vw, 100vw" />

데모를 살펴보겠습니다.

이 작업을 보여주기 위해 간단한 demo site을 만들었습니다. 클라이언트 힌트 때문에 이미지에 대한 모든 변경 사항이 순전히 발생하는지 확인하기 위해 최소한의 CSS로 이 사이트를 최대한 간단하게 만들려고 노력했다는 점에 유의하는 것이 중요합니다. 특정 이미지를 별도의 탭에서 단독으로 열면 웹 사이트에서 사용되는 것과 같은 크기로 나타나지 않습니다. 실제 사이트에 있을 때 클라이언트 힌트에 따라 크기만 조정됩니다.

9개의 예시 이미지를 포함시켰습니다. 각 이미지 코드는 다음과 같습니다.

<img src="https://imgix.tomdale.website/artsy/5.jpg?ch=width,dpr&w=400&ar=4:3&fit=crop&crop=faces,edges&auto=format,compress" 
sizes="(min-width: 768px) 30vw, 100vw" />

Chrome과 같은 지원 브라우저에서는 브라우저가 768픽셀 이상인 경우 이미지가 브라우저 너비의 30%가 됩니다. 이보다 작아지면 각 이미지의 크기가 브라우저 너비의 100%로 조정됩니다. 이것은 진정한 동적 크기입니다. 이 브라우저의 크기를 조정하고 하드 새로고침을 수행할 때마다 네트워크 탭에서 이미지의 무게가 변경되는 것을 알 수 있습니다.

이상적으로는 클라이언트 힌트와 함께 srcset도 사용해야 합니다. Client Hints를 지원하지 않는 나머지 25%의 사용자에게 좋은 크기의 이미지를 제공하고 싶습니다. 이 데모에서는 이러한 이미지의 크기를 보여주는 데 집중하고 싶었기 때문에 그렇게 하지 않았습니다. 또한 이러한 이미지의 자르기 지점이 약간 변경되는 것을 알 수 있습니다. 이는 일부 imgix API를 사용하여 먼저 자동으로 얼굴을 자른 다음 얼굴이 없는 경우 대체 옵션으로 사진에서 눈에 띄는 개체를 자르기 때문입니다.

Vercel에 배포

저는 Vercel과 Netlify를 모두 사용하여 사이트를 배포하는 것을 즐깁니다. 둘 다 많은 이점이 있습니다. 이 예에서는 Vercel을 사용했습니다. 클라이언트 힌트가 작동하기 위해 필요한 중요한 항목은 기능 정책을 설정하는 것입니다. Vercel을 사용하면 vercel.json 파일을 추가하여 해당 정책을 설정할 수 있습니다. 내 데모를 위해 이것을 vercel.json 파일에 넣었습니다.

{
  "routes": [
    {
      "src": "/*",
        "headers": {
          "Accept-CH": "DPR, Width, Viewport-Width",
          "Feature-Policy": "ch-dpr https://imgix.tomdale.website 'self'; ch-width https://imgix.tomdale.website 'self'; ch-viewport-width https://imgix.tomdale.website 'self'"
        }
    }
  ]
}

이 작업을 수행하려면 해당 URL을 이미지에 사용 중인 URL로 변경해야 합니다. 그러나 클라이언트 힌트를 안전하게 제공하기 위해 추가하는 것은 그리 큰 노력이 아닙니다.

결론

클라이언트 힌트가 다시 작동하는 것을 보는 것이 좋습니다. 여전히 사용할 수 있는 100% 솔루션은 아니므로 다양한 이미지 중단점에 대해 srcsets를 설정하여 반응형 이미지 모범 사례를 따라야 합니다. 그러나 Client Hints는 완벽하게 반응하는 이미지를 제공하는 미래의 이상적인 솔루션이 될 것입니다. 다음은 이 프로젝트에 대한 링크Github Repo입니다. 다른 궁금한 점이 있으면 언제든지 문의해 주세요.