웹 응답 이미지 요약

WebKit 일일 구축 버전은 현재 이미지 요소의 W3C srcset 속성 규범을 지원합니다. 개발자가 고해상도 디스플레이를 가진 사용자에게 더 높은 품질의 이미지를 지정할 수 있고 고해상도 디스플레이가 없는 사용자에게 방해가 되지 않습니다.또한 이 기능이 아직 지원되지 않는 브라우저에 대한 좋은 백업 시나리오를 제공합니다.

<img alt="My reakfast"
src="breakfast.jpeg"
srcset="breakfast-HD.jpeg 2x, breakfast-phone.jpeg 100w, breakfast
-phone-HD.jpeg 100w 2x">

웹키트는 CSS 함수 - 웹키트-image-set을 지원한 지 오래되었습니다. srcset 속성과 매우 비슷하여 이미지를 포함하는 CSS 속성에 후보 이미지의 URL 목록을 제공할 수 있습니다. 각 URL의 뒤에는'2x'와 같은 수식자가 있습니다.그러면 브라우저에서 사용자 장치에 대해 가장 좋은 이미지를 선택할 수 있습니다.

body {
background: -webkit-image-set( url('path/to/image') 1x, url
('path/to/high-res-image') 2x ); 
}

웹키트가 이 같은 조치를 취했을 때, 커뮤니티와 브라우저 실현자들은 웹 응답 이미지의 가장 좋은 선택이 무엇인지를 논쟁하고 있었다.응답 이미지 커뮤니티(RICG)는 수주 뒤 파리에 모여 응답 이미지의 진로를 논의할 예정이다.회의를 소집할 때 RICG의 Yoav Weiss는 이미지의 미래에 호응하는 잠재적인 해결 방안과 현재 개발자의 실천을 요약했다.
지난 몇 년 동안 웹 개발자들의 큰 관심 아래 각 단체의 구성원들은 웹에 응답 이미지를 가져다 줄 방법을 찾는 데 주력했다.현재 세 가지 논의해야 할 방안(srcset[1], [2]와client-hints[3])이 있지만 브라우저가 실현하는 필연적인 추세를 예측할 수 없기 때문에 우리는 차라리 시장에서 어떤 해결 방안이 응용 장면을 가장 효과적으로 만족시킬 수 있는지 결정하기를 원한다.
이와 동시에 웹 개발자는 Polyfill을 사용자 정의해야 한다. 이것은 브라우저가 DOM 불러오기가 완료될 때까지 (최소한 부분 불러오기가 완료될 때까지), 페이지의 자바스크립트가 실행될 때까지 차단할 수 있다.이것은 브라우저 엔지니어가 여러 해 동안 해 온 성능 업무를 직접적으로 방해한다. 이는 자원 불러오기 최적화와 우선순위에 따라 가능한 한 빨리 온라인 요청을 얻는 것을 포함한다.이 같은 상황은 개발자들을 딜레마에 빠뜨렸다. "우리는 이미지 로드를 지연시킬 것인가, 아니면 불필요한 이미지 데이터를 다운로드하여 전체 로드 시간을 연장시키고 사용자 청구서를 과장할 것인가?"
웹 응답 이미지의 과제를 해결하기 위해 현재 유행하는 솔루션은 다음과 같습니다.

Picturefill:polyfill 1개, 이미 작성된 요소 시뮬레이션

HisRC: 페이지가 로드될 때 장치 지원에 따라 고해상도 버전

을 다운로드(또는 다운로드하지 않음) 선택하는 jQuery 플러그인

Adaptive Images): 정확한 이미지 해상도/크기를 제공하는 서버측 솔루션

Round-up on Responsive Images for the Web