반응형 이미지 미리 로드

Barry Pollard
Yoav Weiss
Yoav Weiss
X GitHub

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

반응형 이미지 개요

브라우저 지원

  • Chrome: 73
  • Edge: 79
  • Firefox: 78
  • Safari: 17.2.

너비가 300픽셀인 화면에서 웹을 탐색하고 있는데 페이지에서 너비가 1, 500픽셀인 이미지를 요청한다고 가정해 보겠습니다. 화면에서 이 모든 추가 해상도로 아무것도 할 수 없으므로 이 페이지에서 많은 모바일 데이터가 낭비되었습니다. 브라우저가 화면 크기보다 조금 더 넓은 이미지 버전(예: 325픽셀)을 가져오는 것이 이상적입니다. 이렇게 하면 데이터를 낭비하지 않고도 고해상도 이미지를 보장하고 이미지를 더 빠르게 로드할 수 있습니다.

반응형 이미지를 사용하면 브라우저가 기기에 따라 서로 다른 이미지 리소스를 가져올 수 있습니다. 이미지 CDN을 사용하지 않는 경우 각 이미지의 여러 크기를 저장하고 srcset 속성에 지정합니다. w 값은 브라우저에 각 버전의 너비를 알려주므로 모든 기기에 적절한 버전을 선택할 수 있습니다.

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

미리 로드 개요

브라우저 지원

  • Chrome: 50.
  • Edge: ≤79
  • Firefox: 85.
  • Safari: 11.1.

소스

미리 로드를 사용하면 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에서 사용하는 것과 동일한 리소스 선택 로직을 사용하여 요청이 시작됩니다.

사용 사례

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

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

슬라이드쇼의 일부로 히어로 이미지를 동적으로 로드하고 있고 어떤 이미지가 먼저 표시될지 알고 있다고 가정해 보겠습니다. 이 경우 슬라이드쇼 스크립트가 이미지를 로드할 때까지 기다리지 말고 최대한 빨리 이미지를 표시하는 것이 좋습니다.

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

  1. 새 탭에서 이 슬라이드쇼 데모를 엽니다.
  2. Control+Shift+J (Mac의 경우 Command+Option+J) 키를 눌러 DevTools를 엽니다.
  3. 네트워크 탭을 클릭합니다.
  4. 제한 드롭다운 목록에서 빠른 3G를 선택합니다.
  5. 캐시 사용 중지 체크박스를 선택 해제합니다.
  6. 페이지를 새로고침합니다.
일부 JavaScript가 실행된 후에만 JPEG 리소스가 다운로드되기 시작하는 워터폴을 보여주는 Chrome DevTools Network 패널
미리 로드하지 않으면 브라우저에서 스크립트 실행을 완료한 후에 이미지 로드가 시작됩니다. 첫 번째 이미지의 경우 지연은 필요하지 않습니다.

여기서 preload를 사용하면 이미지가 미리 로드되기 시작하여 브라우저에서 이미지를 표시해야 할 때 표시할 준비가 됩니다.

일부 JavaScript와 동시에 JPEG 리소스가 다운로드되는 워터폴을 보여주는 Chrome DevTools Network 패널
첫 번째 이미지를 미리 로드하면 스크립트와 동시에 로드가 시작됩니다.

미리 로드의 차이를 확인하려면 첫 번째 예의 단계에 따라 동적으로 로드된 동일한 이미지 갤러리에서 첫 번째 이미지가 미리 로드된 이미지를 검사합니다.

image-set을 사용하여 배경 이미지 미리 로드

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

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

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

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

일부 CSS 후에만 JPEG 리소스가 다운로드되기 시작하는 워터폴을 보여주는 Chrome DevTools Network 패널
이 예시에서는 CSS가 완전히 다운로드될 때까지 이미지 다운로드가 시작되지 않아 이미지 표시가 불필요하게 지연됩니다.

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

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

href 속성을 생략하면 <link> 요소에서 imagesrcset를 지원하지 않지만 CSS에서 image-set를 지원하는 브라우저가 올바른 소스를 다운로드하도록 할 수 있습니다. 그러나 이 경우 미리 로드의 이점을 누릴 수 없습니다.

반응형 배경 미리 로드 데모에서 이전 예가 미리 로드된 반응형 배경 이미지로 어떻게 작동하는지 검사할 수 있습니다.

일부 CSS와 동시에 JPEG 리소스가 다운로드되는 워터폴을 보여주는 Chrome DevTools Network 패널
이제 이미지와 CSS가 동시에 다운로드되므로 이미지가 더 빠르게 로드됩니다.

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

반응형 이미지를 미리 로드하면 이론적으로 속도가 빨라질 수 있지만 실제로는 어떤 효과가 있나요?

이 질문에 답하기 위해 데모 PWA 스토어의 두 사본을 만들었습니다. 이미지를 미리 로드하지 않는 버전과 일부 이미지를 미리 로드하는 버전입니다. 사이트는 JavaScript를 사용하여 이미지를 지연 로드하므로 초기 표시 영역에 표시되는 이미지를 미리 로드하면 도움이 될 수 있습니다.

그 결과 미리 로드 없음과 이미지 미리 로드에 대해 다음과 같은 결과가 나왔습니다.

  • Start Render는 동일하게 유지되었습니다.
  • 속도 지수가 약간 개선되었습니다 (273ms, 이미지가 더 빨리 도착하여 픽셀 영역의 상당 부분을 차지하지 않음).
  • Last Painted Hero가 1.2초 크게 개선되었습니다.
미리 로드된 이미지가 약 1.5초 더 빠르게 표시되는 것을 보여주는 WebPageTest 필름 스트립 비교
미리 로드하면 이미지가 훨씬 더 빠르게 도착하여 사용자 환경이 크게 개선됩니다.

미리 로드 및 <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가 더 많이 개선됩니다.