반응형 이미지를 미리 로드할 수 있습니다. 이렇게 하면 브라우저가 img 태그를 렌더링하기 전에 브라우저가 srcset에서 올바른 이미지를 식별할 수 있으므로 이미지를 훨씬 더 빠르게 로드할 수 있습니다.
반응형 이미지 개요
브라우저 지원
- 73
- 79
- 78
- 17.2
너비가 300픽셀인 화면에서 웹을 탐색 중이고 페이지에서 너비가 1, 500픽셀의 이미지를 요청한다고 가정해 보겠습니다. 추가 해상도로는 화면에서 아무것도 할 수 없기 때문에 해당 페이지에서 많은 모바일 데이터를 낭비했습니다. 브라우저가 화면 크기(예: 325픽셀)보다 조금 더 넓은 이미지 버전을 가져오는 것이 이상적입니다. 이렇게 하면 데이터 낭비 없이 고해상도 이미지가 보장되며 이미지를 더 빠르게 로드할 수 있습니다.
반응형 이미지를 사용하면 브라우저가 기기별로 다른 이미지 리소스를 가져올 수 있습니다. 이미지 CDN을 사용하지 않는 경우 각 이미지에 대해 여러 크기를 저장하고 srcset 속성에 지정합니다. w 값은 브라우저에 각 버전의 너비를 알려주므로 모든 기기에 적절한 버전을 선택할 수 있습니다.
<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">
미리 로드 개요
미리 로드를 사용하면 HTML에서 발견되기 전에 최대한 빨리 로드하려는 중요한 리소스를 브라우저에 알릴 수 있습니다. 이 방법은 스타일시트에 포함된 글꼴, 배경 이미지 또는 스크립트에서 로드된 리소스와 같이 쉽게 찾을 수 없는 리소스에 특히 유용합니다.
<link rel="preload" as="image" href="important.png">
imagesrcset 및 imagesizes
<link> 요소는 imagesrcset 및 imagesizes 속성을 사용하여 반응형 이미지를 미리 로드합니다. <img> 요소에 사용되는 srcset 및 sizes 구문과 함께 <link rel="preload">와 함께 사용합니다.
예를 들어 다음과 같이 지정된 반응형 이미지를 미리 로드하려는 경우
<img src="wolf.jpg" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" sizes="50vw" alt="A rad wolf">
HTML의 <head>에 다음을 추가하면 됩니다.
<link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw">
이렇게 하면 srcset 및 sizes에서 사용하는 것과 동일한 리소스 선택 로직을 사용하여 요청이 시작됩니다.
사용 사례
다음은 반응형 이미지를 미리 로드하는 몇 가지 사용 사례입니다.
동적으로 삽입된 반응형 이미지 미리 로드
슬라이드쇼의 일부로 히어로 이미지를 동적으로 로드하며 어떤 이미지가 먼저 표시될지 알고 있다고 가정해 보겠습니다. 이 경우 슬라이드쇼 스크립트가 로드할 때까지 기다리지 않고 가능한 한 빨리 이미지를 표시하는 것이 좋습니다.
동적으로 로드된 이미지 갤러리가 있는 웹사이트에서 이 문제를 검사할 수 있습니다.
- 새 탭에서 슬라이드쇼 데모를 엽니다.
Control+Shift+J(Mac의 경우Command+Option+J)를 눌러 DevTools를 엽니다.- 네트워크 탭을 클릭합니다.
- 제한 드롭다운 목록에서 Fast 3G를 선택합니다.
- 캐시 사용 중지 체크박스를 선택 해제합니다.
- 페이지를 새로고침합니다.
여기서 preload를 사용하면 이미지가 미리 로드되기 시작할 수 있으므로 브라우저에서 이미지를 표시해야 할 때 바로 표시할 수 있습니다.
미리 로드의 차이를 확인하려면 첫 번째 예의 단계에 따라 첫 번째 이미지가 미리 로드된 동일한 동적으로 로드된 이미지 갤러리를 검사하세요.
image-set를 사용하여 배경 이미지 미리 로드
화면 밀도마다 다른 배경 이미지가 있는 경우 image-set 구문을 사용하여 CSS에서 이미지를 지정할 수 있습니다. 그러면 브라우저가 화면의 DPR에 따라 표시할 것을 선택할 수 있습니다.
background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);
CSS 배경 이미지의 문제는 브라우저가 페이지의 <head>에 있는 모든 CSS를 다운로드하고 처리한 후에만 브라우저가 이미지를 발견한다는 것입니다.
반응형 배경 이미지를 사용하여 예시 웹사이트에서 이 문제를 검사할 수 있습니다.
반응형 이미지 미리 로드를 사용하면 이러한 이미지를 더 빠르게 로드할 수 있습니다.
<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">
href 속성을 생략하면 <link> 요소에서 imagesrcset를 지원하지 않지만 CSS에서 image-set를 지원하는 브라우저가 올바른 소스를 다운로드하도록 할 수 있습니다. 그러나 이 경우 미리 로드의 이점이 없습니다.
반응형 배경 미리 로드 데모에서 미리 로드된 반응형 배경 이미지에서 이전 예가 어떻게 작동하는지 검사할 수 있습니다.
반응형 이미지 미리 로드의 실질적인 효과
반응형 이미지를 미리 로드하면 이론상으로 이미지 속도가 빨라질 수 있지만, 실제로는 어떤 효과가 있을까요?
이 질문에 답하기 위해 데모 PWA 샵의 사본 두 개를 만들었습니다. 이미지를 미리 로드하지 않는 사본과 이미지 중 일부를 미리 로드하는 사본입니다. 사이트는 자바스크립트를 사용하여 이미지를 지연 로드하므로 초기 표시 영역에 표시되는 이미지를 미리 로드하면 도움이 될 수 있습니다.
따라서 미리 로드 없음 및 이미지 미리 로드와 관련하여 다음과 같은 결과가 생성되었습니다.
- 렌더링 시작은 그대로 유지되었습니다.
- 속도 색인이 약간 개선되었습니다 (이미지가 더 빨리 도착하는 것은 픽셀 영역의 큰 청크를 차지하지 않기 때문에 273ms).
- Last Painted Hero가 1.2초 크게 개선되었습니다.
미리 로드 및 <picture>
웹 성능 실무 그룹에서는 srcset 및 sizes에 상응하는 미리 로드를 추가하는 방법에 관해 논의하지만 '아트 디렉션' 사용 사례를 처리하는 <picture> 요소는 추가하지 않습니다.
<picture>를 미리 로드하는 경우 여전히 해결해야 할 기술적 문제가 많지만 그 사이 해결 방법이 있습니다.
<picture>
<source srcset="small_cat.jpg" media="(max-width: 400px)">
<source srcset="medium_cat.jpg" media="(max-width: 800px)">
<img src="large_cat.jpg">
</picture>
<picture> 요소의 이미지 소스 선택 로직은 <source> 요소의 media 속성을 순서대로 살펴보고 일치하는 첫 번째 속성을 찾은 다음 연결된 리소스를 사용합니다.
반응형 미리 로드에는 '순서' 또는 '첫 일치'의 개념이 없으므로 중단점을 다음과 같이 변환해야 합니다.
<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)">
미리 로드 및 type
<picture> 요소는 첫 번째 type에서의 일치도 지원하므로, 다양한 이미지 형식을 제공하여 브라우저가 지원하는 첫 번째 이미지 형식을 선택할 수 있습니다. 이 사용 사례는 미리 로드로 지원되지 않습니다.
유형 일치를 사용하는 사이트의 경우 미리 로드하는 대신 미리 로드 스캐너가 <picture> 및 <source> 요소에서 이미지를 선택하도록 하는 것이 좋습니다. 특히 적절한 이미지의 우선순위를 지정하는 데 도움이 되도록 우선순위 힌트를 사용할 때 이 방법을 사용하는 것이 좋습니다.
최대 콘텐츠 렌더링 시간 (LCP)에 미치는 영향
이미지는 최대 콘텐츠 렌더링 시간 (LCP) 후보일 수 있으므로 이미지를 미리 로드하면 웹사이트의 LCP를 개선할 수 있습니다.
미리 로드하는 이미지가 반응형인지와 관계없이 미리 로드는 초기 마크업 페이로드에서 이미지 리소스를 찾을 수 없을 때 가장 잘 작동합니다. 또한 서버에서 완전한 마크업을 전송하는 사이트보다 클라이언트 측에서 마크업을 렌더링하는 사이트의 LCP가 더 많이 향상됩니다.