1년 전 Chrome Aurora팀에서 Angular NgOptimizedImage 디렉티브를 출시했습니다. 이 지침은 주로 Core Web Vitals 측정항목으로 측정되는 성능 개선에 중점을 둡니다. 일반적인 이미지 최적화 및 권장사항을 표준 <img> 요소보다 크게 복잡하지 않은 사용자 대상 API로 번들로 묶습니다.
2023년에는 새로운 기능으로 directive이 개선되었습니다. 이 게시물에서는 이러한 새 기능 중 가장 중요한 기능을 설명하고 각 기능에 우선순위를 두기로 한 이유와 Angular 애플리케이션의 성능을 개선하는 데 도움이 되는 방법을 강조합니다.
새로운 기능
NgOptimizedImage는 다음과 같은 새로운 기능을 포함하여 시간이 지남에 따라 크게 개선되었습니다.
채우기 모드
width 및 height 속성을 제공하여 이미지 크기를 조정하는 것은 레이아웃 전환을 줄이기 위한 매우 중요한 최적화입니다. 브라우저가 이미지를 위한 공간을 확보하려면 이미지의 가로세로 비율을 알아야 하기 때문입니다. 하지만 이미지 크기 조정은 애플리케이션 개발자에게 추가 작업이며 일부 이미지 사용 사례에는 적합하지 않습니다.
개발자 프리뷰 후 이미지 구성요소에 추가된 첫 번째 주요 기능인 채우기 모드가 이 문제를 해결하는 데 도움이 됩니다. 이렇게 하면 개발자가 명시적으로 이미지 크기를 지정하지 않고, 레이아웃 변경 없이 이미지를 포함할 수 있습니다.
채우기 모드를 사용하면 이미지 크기 조정 요구사항이 사용 중지되고 이미지가 포함된 요소를 채우도록 자동으로 스타일이 지정됩니다. 이렇게 하면 이미지의 가로세로 비율이 페이지에서 차지하는 공간에서 분리되므로 이미지가 페이지 레이아웃에 맞는 방식을 더 효과적으로 제어할 수 있습니다.
채우기 모드는 background-image CSS 속성보다 성능이 우수한 대안으로 NgOptimizedImage를 사용합니다. 이전 코드 예와 같이 <div> 또는 background-image 스타일이 적용되었을 다른 요소 내에 이미지를 배치한 다음 채우기 모드를 사용 설정합니다. <div>에서 object-fit 및 object-position CSS 속성을 사용하여 이미지가 배경에 배치되는 방식을 제어합니다.
// Height and width are required
<img ngSrc="example.com" height="300" width="400">
// Unless you use fill mode!
<div style="width: 100vw; height: 50em; position: relative">
<img ngSrc="example.com" fill>
</div>
Srcset 생성
가장 효과적인 이미지 최적화 기술 중 하나는 srcset 속성을 사용하여 애플리케이션에 액세스하는 모든 기기에 적절한 크기의 이미지가 다운로드되도록 하는 것입니다. 앱 전체에서 srcset를 사용하면 대역폭 낭비를 방지하고 LCP Core Web Vitals를 크게 개선할 수 있습니다.
srcset 속성의 단점은 구현하기가 번거로울 수 있다는 점입니다. srcset 값을 수동으로 작성한다는 것은 앱의 각 이미지 요소에 여러 줄의 마크업을 추가하고 각 srcset에 여러 개의 맞춤 URL을 추가하는 것을 의미합니다. 또한 일련의 브레이크포인트를 결정해야 하는데, 이는 일반적인 기기의 화면 밀도와 표시 영역 크기를 모두 나타낼 수 있으므로 복잡합니다.
이러한 이유로 NgOptimizedImage 지시어에 자동화된 srcset 생성을 추가하는 것이 출시 후 주요 기록이었습니다. 이 기능을 추가하면 이미지 크기 조절을 지원하는 CDN을 사용하는 모든 애플리케이션에서 NgOptimizedImage 디렉티브로 생성된 모든 이미지에 맞춤설정이 가능한 전체 srcset이 자동으로 추가될 수 있습니다.
각 이미지에 올바른 유형의 srcset를 적용하는 데 사용되는 sizes 속성을 설정하기 위한 간소화된 API가 포함되어 있습니다. sizes 속성을 포함하지 않으면 이미지가 고정 크기여야 하며 다음과 같이 밀도에 종속된 srcset을 가져와야 합니다.
<img src="www.example.com/image.png" srcset="www.example.com/image.png?w=400 1x, www.example.com/image.png?w=800 2x" >
이러한 종류의 srcset을 사용하면 사용자의 기기 픽셀 밀도를 고려한 크기로 이미지가 게재됩니다.
반면에 sizes 속성을 포함하면 NgOptimizedImage는 다음과 같은 기본 브레이크포인트 목록을 사용하여 여러 일반적인 기기 및 이미지 크기의 브레이크포인트가 포함된 반응형 srcset을 생성합니다.
[16, 32, 48, 64, 96, 128, 256, 384, 640, 750, 828, 1080, 1200, 1920, 2048, 3840]
사전 연결 생성
LCP를 개선하려면 사용자가 LCP 이미지를 다운로드하는 데 걸리는 시간을 줄이는 것이 중요합니다. 이전 섹션에서는 srcset가 더 작은 이미지 파일을 전송하여 지원하는 방법을 알아봤지만, 최대한 빨리 전송을 시작하는 것도 그만큼 중요합니다. 이를 위한 한 가지 방법은 link rel="preconnect" 태그를 사용하여 이미지 도메인에 대한 연결을 즉시 시작하는 것입니다.
처음부터 NgOptimizedImage는 LCP 이미지의 도메인에 미리 연결하지 못하면 경고를 표시했지만 경고는 이상적인 해결 방법이 아닙니다. 문제를 해결하는 것이 더 좋습니다. 이제 NgOptimizedImage가 자동화된 사전 연결 생성을 통해 할 수 있습니다.
이 기능을 지원하기 위해 정적 코드 분석을 사용하여 NgOptimizedImage 로더에서 이미지 도메인을 감지하고 이러한 도메인의 사전 연결 링크 태그를 자동으로 생성합니다. 수동 사전 연결 링크가 필요한 경우도 있지만, 대부분의 사용자는 자동 사전 연결을 통해 우수한 이미지 성능을 위해 필요한 단계가 하나 줄어듭니다.
맞춤 로더 지원 개선
NgOptimizedImage의 핵심 요소는 로더 아키텍처로, 이는 디렉티브가 애플리케이션의 이미지 CDN에 맞게 조정된 URL을 자동으로 생성할 수 있도록 합니다. 널리 사용되는 CDN을 위한 내장 로더 세트가 포함되어 있습니다. 또한 NgOptimizedImage를 거의 모든 이미지 호스팅 솔루션과 통합할 수 있는 맞춤 로더도 제공합니다.
출시 당시 이러한 맞춤 로더는 범위가 제한되어 이미지 요소에서 width 속성만 읽을 수 있었습니다. 사용자 의견에 따라 이미지 요소에서 맞춤 로더로 임의의 데이터를 전달할 수 있는 맞춤설정 가능한 loaderParams 데이터 구조에 대한 지원이 추가되었습니다. 확장 프로그램을 사용하면 맞춤 로더를 애플리케이션의 이미지 인프라에 필요한 만큼 간단하게 만들거나 복잡하게 만들 수 있습니다.
다음 예는 간단한 맞춤 로더가 loaderParams API를 사용하여 두 가지 대체 이미지 도메인 중에서 선택하는 방법을 보여줍니다.
const myCustomLoader = (config: ImageLoaderConfig) => {
if (config.loaderParams?.alternateDomain) {
return `https://alternate.domain.com/images/${config.src}`
}
return `https://primary.domain.com/images/${config.src}`;
};
더 복잡한 커스텀 로더의 예는 Angular 문서에서 확인할 수 있습니다.
이미지 실적에 관한 확장된 안내
지금까지 Angular에 추가된 모든 이미지 성능 알림은 NgOptimizedImage 디렉티브의 일부였습니다. 앱에서 지시어를 사용하지 않으면 이미지 성능 문제에 관한 안내가 제공되지 않습니다.
Angular 17에서는 모든 Angular 앱을 포함하도록 이미지 성능 가이드의 범위를 확장합니다. 이제 LCP 이미지를 지연 로드하거나 페이지에 비해 너무 큰 파일을 다운로드하는 등 성능을 저해하는 이미지 패턴이 감지되면 NgOptimizedImage를 사용하지 않더라도 Google에서 알려 드립니다.
이미지 성능은 모든 앱에 중요하며 Angular 앱에서 흔히 발생하는 실수를 방지하는 데 도움이 되는 가드레일을 계속해서 빌드할 예정입니다.
향후 계획
Google은 이미 NgOptimizedImage를 위한 다음 기능을 개발하기 위해 노력하고 있습니다. 이미지 성능이 여전히 주요 관심사이지만 NgOptimizedImage가 Angular 애플리케이션에 이미지를 포함하는 매력적인 옵션으로 남아 있도록 개발자 환경을 개선하는 기능도 추가하고자 합니다.
Google에서 우선적으로 고려하는 기능 중 하나는 이미지 자리표시자입니다. 이는 일반적으로 웹 애플리케이션에서 이미지 로드가 더 나아 보이도록 하는 데 사용되지만 잘못 구현하면 성능이 저하될 수 있습니다. NgOptimizedImage에 성능 우선 이미지 자리표시자 시스템을 빌드하고자 합니다. 블로그에서 추가 공지사항을 확인해 주세요.