srcset이 작동하지 않습니까? 😩 잘못된 이미지를 얻고 계신가요? 그 이유를 알아보자!

따라서 srcset을 사용하여 다양한 이미지 크기를 모두 설정하는 데 어려움을 겪었습니다. 특정 이미지를 사용해야 한다고 생각합니다. 그러나 브라우저는 더 큰 이미지를 사용하고 있습니다. 아니면 잘못된 이미지일 수도 있습니다. srcset이 생각한 대로 작동하지 않습니다. 이 가이드는 이 모든 문제를 해결하는 데 도움이 될 것입니다.

브라우저는 어떤 이미지가 사용될지 어떻게 알아내나요?

아래의 경우를 생각해보자...



볼 수 있습니다 live version of the above here.

코드가 보이면 srcset은 다음과 같이 설정됩니다...

<img 
    src="http://placehold.jp/3840x3840.png"

    srcset="http://placehold.jp/3840x3840.png 3840w,
            http://placehold.jp/2048x2048.png 2048w,
            http://placehold.jp/1920x1920.png 1920w,
            http://placehold.jp/1200x1200.png 1200w,
            http://placehold.jp/1080x1080.png 1080w,
            http://placehold.jp/828x828.png 828w,
            http://placehold.jp/750x750.png 750w,
            http://placehold.jp/640x640.png 640w"

     sizes="(max-width: 480px) 100vw, 
            (max-width: 1024px) 50vw, 
            33vw"
/>

(그런데 위의 코드에서 무슨 일이 벌어지고 있는지 잘 모르겠다면 이 문서부터 시작하는 것이 좋습니다. How Do I Optimize An Image For Web Without Losing Quality? )

사용자가 iPhone 12 Pro를 들고 귀하의 페이지를 방문합니다. 어떤 이미지가 사용됩니까?

이것을 Chrome Dev 도구로 시뮬레이션하려고 하면…



여기에 몇 가지 문제가 있습니다.

Chrome에 따르면: iPhone 12 Pro의 크기는 390x844px에 불과합니다. 잠깐만! 그것은 옳을 수 없습니다. iPhone 12 Pro 치고는 매우 낮은 해상도입니다!! Apple website, here are the specifications.

에 따르면

이 390px 화면에서 Chrome은 1200px 이미지를 로드했습니다. 잘못된 것 같습니다. Chrome에서 사용 중인 이미지가 너무 큰 것 같습니다.

아래는 애플 홈페이지 캡처…



따라서 Chrome은 더 작은 치수가 390px라고 말합니다. 그러나 Apple은 1170px라고 말합니다.

이 차이가 스티브 잡스 자신과 다른 이유를 이해합시다. 그는 이 영상에서 그것을 잘 설명했다. 그래서, 그것을보십시오.



보시다시피 1px는 1px를 의미하거나 의미하지 않을 수 있습니다. 더 많을 수 있습니다!

But, do not be under the impression that only Apple devices do this. All modern devices do this! Apple just came up with a catchy name for it: Retina Displays.

실제로는 390보다 많은 픽셀이 있습니다! Chrome이 이 모든 것을 책임지고 있습니다.

Chrome에 이러한 "가상"픽셀 중 하나에 몇 개의 "실제/물리적"픽셀이 압축되어 있는지 알려달라고 요청할 수 있습니다. 그렇게 하려면 다음 자바스크립트 줄을 실행하기만 하면 됩니다.



따라서 Chrome에서 iPhone 12에 390개의 가상 픽셀이 있고 "devicePixelRatio"가 3이라고 말할 때 실제 너비는 다음과 같습니다.

390px x 3 = 1170px

여기요! 이는 Apple이 주장하는 1170px와 정확히 일치합니다!

그렇다면 srcset HTML 코드가 ..인 경우 Chrome은 어떤 이미지를 사용해야합니까?

<img 
    src="http://placehold.jp/3840x3840.png"

    srcset="http://placehold.jp/3840x3840.png 3840w,
            http://placehold.jp/2048x2048.png 2048w,
            http://placehold.jp/1920x1920.png 1920w,
            http://placehold.jp/1200x1200.png 1200w,
            http://placehold.jp/1080x1080.png 1080w,
            http://placehold.jp/828x828.png 828w,
            http://placehold.jp/750x750.png 750w,
            http://placehold.jp/640x640.png 640w"

     sizes="(max-width: 480px) 100vw, 
            (max-width: 1024px) 50vw, 
            33vw"
/>

Chrome은 필요한 크기인 1170px보다 약간 크기 때문에 1200px 이미지를 사용하고 있습니다. 잘했어 크롬!

결국 잘못된 이미지가 아니라는 것이 밝혀졌습니다!

중요 참고 사항: 이 모든 이미지 크기를 수동으로 만들 필요는 없습니다.

일반적으로 secret에 대해 시간이 많이 걸리는 것은 이러한 모든 다른 버전을 만들어야 한다는 것입니다. 그건 고통이야!!

나는 당신이되기를 바랍니다 using an Image CDN to quickly and easily generate your images.

TLDR / 요약

srcset이 예상대로 작동하지 않는 이유에 대해 혼란스러워하는 경우. 그리고 브라우저가 잘못된 이미지를 사용하는 이유는 아마도 "devicePixelRatio"때문일 것입니다. 당신이 그것을 당신의 추정에 고려한다면, 일이 제대로 보이기 시작할 것입니다.