NgOptimizedImage

Директива, повышающая производительность загрузки изображений за счёт применения лучших практик.

NgOptimizedImage обеспечивает приоритетную загрузку изображения Largest Contentful Paint (LCP), выполняя следующие действия:

• Автоматически задаёт атрибут fetchpriority для тега <img>
• По умолчанию загружает изображения с низким приоритетом отложенно
• Автоматически создаёт тег preconnect в head документа

Кроме того, директива:

• Генерирует подходящие URL ресурсов, если предоставлена соответствующая функция ImageLoader
• Автоматически генерирует srcset
• Требует указать width и height
• Выдаёт предупреждение, если width или height заданы неправильно
• Выдаёт предупреждение, если при отображении изображение будет визуально искажено

Чтобы включить и использовать директиву, выполните следующие действия:

1. Импортируйте её в компонент.
2. При необходимости предоставьте ImageLoader, если используете службу размещения изображений.
3. Обновите необходимые теги <img> в шаблонах и замените атрибуты src на ngSrc. Использование ngSrc позволяет директиве управлять моментом установки src, что запускает загрузку изображения.

Шаг 1: импортируйте директиву NgOptimizedImage.

@Component({
  imports: [NgOptimizedImage],
})
class MyPage {}

Шаг 2: настройте загрузчик.

Чтобы использовать загрузчик по умолчанию: дополнительные изменения кода не требуются. URL, возвращаемый универсальным загрузчиком, всегда будет совпадать со значением "src". Иными словами, этот загрузчик не преобразует URL ресурса, а значение атрибута ngSrc используется без изменений.

Чтобы использовать имеющийся загрузчик для сторонней службы изображений: добавьте фабрику провайдера выбранной службы в массив providers. В примере ниже используется загрузчик Imgix:

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

// Call the function and add the result to the `providers` array:
providers: [
  provideImgixLoader("https://my.base.url/"),
],

Директива NgOptimizedImage предоставляет следующие функции:

• provideCloudflareLoader
• provideCloudinaryLoader
• provideImageKitLoader
• provideImgixLoader

Если вы используете другого поставщика изображений, можно создать пользовательскую функцию загрузчика, как описано ниже.

Чтобы использовать пользовательский загрузчик: предоставьте функцию загрузчика в качестве значения DI-токена IMAGE_LOADER.

import {IMAGE_LOADER, ImageLoaderConfig} from '@angular/common';

// Configure the loader using the `IMAGE_LOADER` token.
providers: [
  {
     provide: IMAGE_LOADER,
     useValue: (config: ImageLoaderConfig) => {
       return `https://example.com/${config.src}-${config.width}.jpg`;
     }
  },
],

Шаг 3: обновите теги <img> в шаблонах, чтобы использовать ngSrc вместо src.

<img ngSrc="logo.png" width="200" height="100">