최신 Chrome/Opera가 srcset을 잘못 가져 왔습니까?

Question

나는 다음과 같은 마크 업이있는 페이지에 일하고 있어요 :

<img 
alt="" 
src="/banner_home.300x200.jpg" 
srcset="/banner_home.300x200.jpg 320w, 
     /banner_home.600x400.jpg 480w, 
     /banner_home.728x242.jpg 768w, 
     /banner_home.920x306.jpg 960w, 
     /banner_home.1234x400.jpg 1280w"> 

을 그리고 최신 크롬 & 오페라, 그들이 그렇게 (화면 크기는 그냥 출력이 중 파일이 마지막으로 나열되어 어떤 무시하는 것 같다 내 경우에는 1234x400.jpg).

Picturefill을 사용하면 Firefox와 Safari 모두 작은 화면에 올바른 이미지를 표시합니다.

오늘 테스트를 진행하면서 나는 한동안 개봉하지 않은 Opera를 시작했습니다. 처음 시작했을 때 v25에 있었고 작은 화면 크기에서 올바른 이미지를 보여줍니다.

그런 다음 업데이트가 다운로드되어 v27로 업데이트되고 Opera가 최신 Chrome과 동일한 문제를 표시하는 것으로 나타났습니다.

최근 Blink에서 뭔가가 변경된 것 같습니다.

다른 사람이이를 확인하거나 잘못하고 있습니까?

Codepen 내가 의미하는 바를 설명합니다.

Answer 1

당신은 은 잘못 테스트 잡고있어 : D

크롬 (40)에 갔다 change가 고밀도 자원이 캐시에 사용할 수있는 경우 (예를 들어, 귀하의 예제에서 가장 큰 가능한 이미지를),이 의미 다른 저해상도를 다시 다운로드 할 필요가 없기 때문에 선택 될 리소스입니다.

srcset에 관한 정보가 아니기 때문에 어떤 리소스를 선택해야하는지 (작은 리소스로 다운로드해야하는지는 알 수 없음) 실제로 다운로드하려는 디바이스를 테스트하려는 경우 실제 디바이스에서 테스트하거나 시크릿 세션, 브라우저의 크기를 조정 (또는 장치를 에뮬레이트) 한 다음 테스트 페이지를로드하십시오.

로드 된 이미지를 볼 수있을 때 slightly clearer test case을 만들었습니다.

기타 : 귀하의 예제에서 당신은 srcset 안에 다른 비율의 이미지를 사용하고있는 것처럼 보입니다. 이는 srcset을 사용해야하는 것이 아니라 <picture>을 사용하여 어떤 리소스가로드되는지에 대한 보증을 제공하므로 잘못된 이미지가로드되어 레이아웃이 중단되지 않습니다.

srcset을 사용할 때 "잘못된"이미지가 없습니다. 브라우저는 적합하다고 판단되는 브라우저를 자유롭게 선택할 수 있습니다 (캐시, 연결 가능성이 낮기 때문에 사용자 환경 설정이 그렇게 말하는 등).

Answer 2

콘솔에 붙여 넣으면 브라우저에 렌더링되는 이미지 소스가 표시됩니다.

console.log (jQuery ('. your-image-class img'). prop ('currentSrc'));