반응형 이미지 미리 로드

Barry Pollard
Yoav Weiss
Yoav Weiss
X GitHub

반응형 이미지를 미리 로드하여 이미지가 로드되도록 할 수 있습니다. 브라우저가 올바른 이미지를 식별할 수 있도록 하여 훨씬 더 빠르게 img 태그를 렌더링하기 전에 srcset에서 가져와야 합니다.

반응형 이미지 개요

브라우저 지원

  • Chrome: 73 <ph type="x-smartling-placeholder">
  • Edge: 79. <ph type="x-smartling-placeholder">
  • Firefox: 78 <ph type="x-smartling-placeholder">
  • Safari 17.2. <ph type="x-smartling-placeholder">

너비가 300픽셀인 화면에서 웹을 탐색하고 있고 는 너비가 1500픽셀인 이미지를 요청합니다. 해당 페이지는 화면은 추가 해상도로는 아무것도 할 수 없기 때문입니다. 브라우저가 작은 이미지 버전을 가져오는 것이 이상적일 것입니다. 325픽셀보다 넓어야 합니다. 이렇게 하면 고해상도 이미지를 얻을 수 있어 이미지 로드 속도가 빨라집니다.

반응형 이미지 브라우저가 여러 기기에 서로 다른 이미지 리소스를 가져오도록 허용합니다. 그렇지 않은 경우 이미지 CDN을 사용하고 각 CDN의 여러 측정기준을 저장합니다. 이미지를 만들고 srcset 속성에서 지정하세요. w 값은 각 버전의 너비를 지정하여 각 버전의 너비에 적합한 버전을 모든 기기:

<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">

미리 로드 개요

브라우저 지원

  • Chrome: 50. <ph type="x-smartling-placeholder">
  • 에지: ≤ 79. <ph type="x-smartling-placeholder">
  • Firefox: 85 <ph type="x-smartling-placeholder">
  • Safari: 11.1. <ph type="x-smartling-placeholder">

소스

미리 로드를 사용하면 브라우저에 중요한 리소스를 모두 로드하기 전에 가능한 한 빨리 로드해야 볼 수 있습니다. 이것은 텍스트 시트에 포함된 글꼴, 배경 이미지 또는 리소스 관리를 예로 들 수 있습니다

<link rel="preload" as="image" href="important.png">

imagesrcset 및 imagesizes

<link> 요소는 imagesrcset 및 imagesizes 속성을 사용하여 다음을 수행합니다. 반응형 이미지를 미리 로드합니다. 함께 사용하기 <link rel="preload">, srcset 및 sizes 구문 사용 <img> 요소

예를 들어 다음과 같이 지정된 반응형 이미지를 미리 로드하려는 경우

 <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 사용.

사용 사례

다음은 반응형 이미지를 미리 로드하는 사용 사례입니다.

동적으로 삽입된 반응형 이미지 미리 로드

슬라이드쇼의 일부로 히어로 이미지를 동적으로 로드하고 있고 어떤 이미지가 먼저 표시될지 알 수 있습니다. 이 경우 최대한 빨리 해당 이미지를 표시하고 슬라이드쇼 스크립트가 로드해야 합니다.

동적으로 로드된 이미지 갤러리가 있는 웹사이트에서 이 문제를 검사할 수 있습니다.

  1. 이 슬라이드쇼 데모 열기 를 클릭합니다.
  2. Control+Shift+J (Mac의 경우 Command+Option+J)를 눌러 DevTools를 엽니다.
  3. 네트워크 탭을 클릭합니다.
  4. 제한 드롭다운 목록에서 빠른 3G를 선택합니다.
  5. 캐시 사용 중지 체크박스를 선택 해제합니다.
  6. 페이지를 새로고침합니다.
를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">JPEG 리소스가 포함된 폭포가 일부 JavaScript 이후 다운로드되기 시작하는 모습을 보여주는 Chrome DevTools Network 패널</ph>
미리 로드하지 않으면 브라우저에서 스크립트 실행을 완료한 후 이미지가 로드되기 시작합니다. 첫 번째 이미지에서는 이러한 지연이 필요하지 않습니다.

여기서 preload를 사용하면 이미지가 미리 로드되기 시작할 수 있으므로 표시할 준비가 된 것입니다.

<ph type="x-smartling-placeholder">
</ph> 일부 JavaScript와 동시에 다운로드되는 JPEG 리소스가 포함된 폭포를 보여주는 Chrome DevTools Network 패널
첫 번째 이미지를 미리 로드하면 스크립트와 동시에 로드를 시작할 수 있습니다.

미리 로드로 인한 차이를 확인하려면 동적으로 로드된 첫 번째 이미지가 미리 로드된 이미지 갤러리 첫 번째 예시의 단계를 따르세요

이미지 집합을 사용하여 배경 이미지 미리 로드

화면 밀도에 따라 다른 배경 이미지가 있는 경우 image-set 문법을 사용하여 CSS에서 지정할 수 있습니다. 그러면 브라우저에서 화면의 크기에 따라 표시할 이미지를 선택할 수 있습니다 DPR.

background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);

CSS 배경 이미지의 문제는 브라우저가 배경 이미지를 페이지의 <head>에 있는 모든 CSS를 다운로드하고 처리한 후에만

예시 웹사이트에서 이 문제를 검사할 수 있습니다. 반응형 배경 이미지가 있습니다.

<ph type="x-smartling-placeholder">
</ph> JPEG 리소스가 일부 CSS 후 다운로드되기 시작하는 폭포를 보여주는 Chrome DevTools Network 패널
이 예시에서는 CSS가 완전히 다운로드될 때까지 이미지 다운로드가 시작되지 않으므로 이미지 디스플레이에 불필요한 지연이 발생합니다.

반응형 이미지 미리 로드를 사용하면 이러한 이미지를 더 빠르게 로드할 수 있습니다.

<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">

href 속성을 제외하면 <link> 요소에서 imagesrcset를 지원하지만 다음에서 image-set를 지원합니다. CSS에서 올바른 소스를 다운로드합니다. 하지만 확인할 수 있습니다

이전 예가 미리 로드된 반응형 반응형 백그라운드 미리 로드 데모의 배경 이미지

<ph type="x-smartling-placeholder">
</ph> 일부 CSS로 다운로드되는 JPEG 리소스가 포함된 폭포를 보여주는 Chrome DevTools Network 패널
여기서 이미지와 CSS가 동시에 다운로드되기 시작하므로 이미지가 더 빠르게 로드됩니다.

반응형 이미지 미리 로드의 실질적인 효과

반응형 이미지를 미리 로드하면 이론상으로는 이미지 속도가 빨라질 수 있지만, 이론적으로는 어떤 이점이 있을까요? 어떻게 해야 할까요?

데모 PWA 매장의 사본 두 개를 만들었습니다. 이미지를 미리 로드하지 않는 일부 콘텐츠를 미리 로드하는 기능을 제공합니다. 사이트는 자바스크립트를 사용하여 이미지를 지연 로드하므로 초기 표시 영역에 표시되는 항목을 미리 로드합니다.

다음과 같은 결과를 얻었습니다. 미리 로드 없음 및 이미지 미리 로드의 경우:

를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">미리 로드된 이미지를 보여주는 WebPageTest 슬라이드 비교는 약 1.5초 더 빠르게 표시됩니다.</ph>
미리 로드된 이미지가 훨씬 더 빠르게 도착하므로 사용자 환경이 크게 개선됩니다.

미리 로드 및 <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> 요소의 이미지 소스 선택 로직이 media를 가짐 <source> 요소의 속성을 순서대로 찾아 연결된 리소스를 사용합니다.

반응형 미리 로드에는 '순서' 개념이 없기 때문입니다. '첫 번째 일치'의 경우 중단점을 다음과 같이 변환해야 합니다.

<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에서의 일치도 지원하므로 브라우저가 첫 번째 이미지 형식을 선택할 수 있도록 다양한 이미지 형식을 제공합니다. 살펴보겠습니다 이 사용 사례는 미리 로드에서 지원되지 않습니다.

유형 일치를 사용하는 사이트의 경우 미리 로드를 피하고 미리 로드 스캐너가 Google 디스플레이 네트워크에서 대신 <picture> 및 <source> 요소를 사용합니다. 어쨌든 이것은 권장사항이지만 특히 가져오기 우선순위를 사용하여 우선순위를 지정할 때 적절한 이미지를 생성합니다.

최대 콘텐츠 페인트 (LCP)에 미치는 영향

이미지는 최대 콘텐츠 페인트 (LCP) 후보일 수 있으므로 미리 로드하면 웹사이트의 LCP를 개선할 수 있습니다.

미리 로드 중인 이미지가 반응형인지와 상관없이 미리 로드는 초기 마크업 페이로드에서 이미지 리소스를 찾을 수 없는 경우에 가장 적합합니다. 또한 클라이언트에서 마크업을 렌더링하는 사이트의 LCP도 향상됩니다. 서버에서 완전한 마크업을 보내는 사이트보다 더 높은 편입니다.