이미지 최적화

이미지는 보통 애플리케이션의 많은 부분을 차지하며, Core Web Vitals 점수가 낮게 나오는 등 애플리케이션 성능에 큰 영향을 미치는 요소입니다.

이미지 최적화는 깊이 있게 다루자면 아주 복잡하게 들어갈 수 있지만, Angular는 NgOptimizedImage 디렉티브로 단순하게 대부분의 작업을 처리합니다.

참고: NgOptimizedImage를 활용한 이미지 최적화 심화 가이드 문서를 참고하세요.

이번 튜토리얼에서는 NgOptimizedImage 를 사용해서 이미지를 효율적으로 로드하는 방법을 알아봅시다.

  1. NgOptimizedImage 디렉티브를 불러오세요

    NgOptimizedImage 디렉티브를 사용하려면, 먼저 컴포넌트의 imports 배열에 @angular/common 라이브러리로 제공되는 NgOptimizedImage 를 로드해야 합니다.

          
    import { NgOptimizedImage } from '@angular/common';@Component({  imports: [NgOptimizedImage],  ...})

  2. src 어트리뷰트를 ngSrc로 수정하세요

    NgOptimizedImage 디렉티브를 적용하려면 src 어트리뷰트를 ngSrc로 변경하면 됩니다. 이 방식은 이전에 정적인 값을 사용하던 src 방식과 동적인 값을 사용하던 [src] 방식에 모두 해당됩니다.

          
    import { NgOptimizedImage } from '@angular/common';@Component({template: `     ...    <li>      Static Image:      <img ngSrc="/assets/logo.svg" alt="Angular logo" width="32" height="32" />    </li>    <li>      Dynamic Image:      <img [ngSrc]="logoUrl" [alt]="logoAlt" width="32" height="32" />    </li>    ...  `,imports: [NgOptimizedImage],})

  3. width, height 어트리뷰트를 추가하세요

    위 예제에서 이미지 엘리먼트마다 width 어트리뷰트와 height 어트리뷰트를 지정한 것을 주의깊게 보세요. NgOptimizedImage 디렉티브를 사용할 때는 레이아웃이 틀어지는 것을 방지하기 위해 이미지마다 정확한 크기를 지정하는 것을 권장합니다.

    정확한 height 값과 width 값을 지정할 수 없거나 지정하지 않으려는 상황이라면, fill 어트리뷰트를 사용해서 이 이미지가 엘리먼트를 채우는 "배경 이미지" 라고 지정하면 됩니다:

          
    <div class="image-container"> //Container div has 'position: "relative"'  <img ngSrc="www.example.com/image.png" fill /></div>

    참고: fill로 지정된 이미지가 제대로 렌더링되려면 부모 엘리먼트의 스타일은 반드시 position: "relative" 이거나, position: "fixed" 이거나, position: "absolute" 여야 합니다.

  4. 중요한 이미지는 우선순위를 높이세요

    로딩 성능에 가장 중요한 것은 화면이 로드될 때 화면에서 가장 큰 그래픽 요소인 "LCP 엘리먼트" 이미지의 우선순위를 정하는 것입니다. 로딩 시간을 최적화 하려면 "가장 중요한 이미지"나 LCP 엘리먼트라고 생각하는 이미지에 priority 어트리뷰트를 추가하면 됩니다.

          
    <img ngSrc="www.example.com/image.png" height="600" width="800" priority />

  5. 선택사항: 이미지 로더를 사용해 보세요

    NgOptimizedImage를 사용하면서 이미지 로더를 사용할 수 있습니다. 이미지 로더는 디렉티브가 이미지 URL의 형식을 어떻게 다루는지 지정할 수 있는데, 이미지 로더를 사용하면 기존보다 짧은 주소로 이미지 파일을 참조할 수 있습니다.

          
    providers: [  provideImgixLoader('https://my.base.url/'),]

    최종 URL은 'https://my.base.url/image.png' 이 됩니다.

          
    <img ngSrc="image.png" height="600" width="800" />

    이미지 로더는 간편함만을 위한 것은 아닙니다. 이미지 로더를 사용하면 NgOptimizedImage의 모든 기능을 활용할 수 있습니다. 또다른 최적화 기법과 CDN용 내장 로더 사용방법을 확인하려면 이 링크를 참고하세요.

이미지 최적화 디렉티브를 추가하는 것 만으로 이제 앱에 사용되는 이미지 파일은 모두 최적의 상태로 로딩됩니다 🎉

더 자세한 내용을 확인하려면 NgOptimizedImage 문서를 참고하세요. 잘 진행하고 있습니다. 좀 더 진행해 보세요.