imagesizes 및 imagesrcset을 사용하여 반응형 이미지를 미리 로드하는 방법

5860 단어 htmlperformance
오늘은 님의 글Preload late-discovered Hero images faster을 읽었습니다. 브라우저의 로딩 동작을 조정하고 개선하려는 경우 리소스를 미리 로드하는 방법에 대한 좋은 요약입니다. 이 기사의 멋진 점은; 반응형 이미지 로딩 속도를 높이는 데 도움이 되는 최근에 추가된 웹 플랫폼 기능을 발견했습니다.

페이지에 다음과 같은 반응형 이미지가 있다고 가정해 보겠습니다.

<img srcset="image-400.jpg 400w, image-800.jpg 800w, image-1600.jpg 1600w"
     sizes="100vw" 
     alt="...">


이 이미지 요소의 srcset 및 sizes 속성은 전체 뷰포트 너비( 100vw )에 걸쳐 있고 400px에서 1600px 범위의 세 가지 크기로 사용할 수 있다는 정보를 브라우저에 제공합니다. 이 정보를 통해 브라우저는 작은 화면에서 고해상도 이미지 데이터를 낭비하지 않고 가장 적합한 이미지를 로드할 수 있습니다.

하지만 browsers load resources in a particular order 을 고려해야 합니다. 일반적으로 스타일시트 및 글꼴과 같은 중요한 리소스 다음에 이미지를 요청합니다. 이 로드 순서를 변경하고 리소스의 우선 순위를 다시 지정하려면 문서의 <link rel="preload"> 요소를 사용하여 특정 리소스의 우선 순위가 높거나 문서에서 곧 요청한다는 신호를 보낼 수 있습니다.

<!-- preload a font that will be discovered later -->
<link rel="preload" 
      href="fonts/cicle_fina-webfont.woff2" 
      as="font" 
      type="font/woff2" 
      crossorigin>


사전 로드에 대해 자세히 알아보려면 문서Preload: What Is It Good For?를 참조하는 것이 좋습니다.

그러나 나중에 JavaScript 구성 요소가 렌더링될 때 head 및 sizes 특성이 DOM에 삽입된 반응형 이미지를 미리 로드하려면 어떻게 해야 할까요?

srcset으로 반응형 이미지 미리 로드



rel="preload" and iamgesrcset made it into the spec . imagesizes 요소에 이러한 특성을 사용하여 link 및 sizes 특성과 함께 제공되는 우선순위가 높은 반응형 이미지 정보를 브라우저에 제공할 수 있습니다.

<head>
  <!-- Hey browser! Please preload this important responsive image -->
  <link rel="preload"
        as="image" 
        imagesrcset="
          image-400.jpg 400w, 
          image-800.jpg 800w, 
          image-1600.jpg 1600w" 
        imagesizes="100vw">
</head>
<body>
  <img srcset="image-400.jpg 400w, image-800.jpg 800w, image-1600.jpg 1600w"
       sizes="100vw" 
       alt="...">
</body>

srcset 및 imagesrcset는 imagesizes 요소에 대한 srcset 및 sizes와 동일한 규칙을 따르므로 이미지 자체에 사용하는 동일한 속성 값을 재사용할 수 있습니다.

imagesizes 요소에 img 및 imagesrcset을 사용할 때 고려해야 할 사항


link 및 imagesizes는 속성이 imagesrcset 및 rel="preload"인 링크 요소에서만 작동합니다. 또한 as="image" 요소에서 href를 생략하면 지원되지 않는 브라우저가 더 적합한 이미지를 로드하기 때문에 쓸모없는 이미지를 요청하지 않습니다.

브라우저 지원



작성 당시 caniuse.com 또는 MDN에는 브라우저 지원 데이터가 없습니다. 하지만 the Chrome status ticket for link and imagesrcset 을 보면 이 웹 플랫폼 추가가 현재 Chrome 전용(및 Edge 🙈)인 것으로 보입니다.



그럼에도 불구하고 요즘 크롬의 시장점유율을 보면(roughly 70%) 확인해볼 일이다! 즐거운 프리로드! 🐎

추가 리소스


  • Preload late-discovered Hero images faster
  • Preloading responsive images
  • Spec for the imagesizes element
  • MDN page for the link
  • Chromestatus page for link and imagesizes
    • 929. Unique Email Addresses(python+cpp)
    cocoalumberjack 로그 이메일 보내기

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage