Использование директивы NgOptimizedImage для реализации загрузки изображений в Angular

Директива NgOptimizedImage в Angular отвечает за реализацию загрузки изображений, сохраняя высокую производительность. Она доступна в Angular v14.2.0. Директива помечена как standalone и может быть импортирована в standalone компоненты и модули.

Чтобы ее использовать, мы должны заменить атрибут src Вашего изображения на rawSrc:

import { NgOptimizedImage } from '@angular/common';

@Component({
  standalone: true,
  imports: [NgOptimizedImage],
  template: `
    <!-- видимая область страницы -->
    <img rawSrc="https://picsum.photos/200/300" width="200" height="300" priority />
    
    <!-- ниже видимой области страницы -->
    <img rawSrc="https://picsum.photos/300/300" 
        style="margin-top: 300vh" 
        width="300" 
        height="300" />`,
})
export class LoginPageComponent {}

Директива предоставит нам следующие преимущества LCP(Скорость загрузки основного контента):

• Атрибут loading для изображений ниже видимой области страницы будет установлен на lazy, в то время как атрибут loading для изображений в видимой области страницы будет eager.

• Она гарантирует приоритетность для изображений в видимой области страницы. Это значит, что будет установлено значение high для атрибута fetchpriority. Значение по умолчанию — default.

• Она гарантирует, что изображения в видимой области страницы будут иметь соответствующий тег preconnect.

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>MyNgApp</title>
  <base href="/">
  <!--