Повысьте производительность загрузки изображений с помощью директивы NgOptimizedImage

Изображения являются неотъемлемой частью современного веб-дизайна, но они также могут существенно замедлять время загрузки страницы. Чтобы решить эту проблему, Angular предоставляет директиву NgOptimizedImage, мощный инструмент, который обеспечивает соблюдение лучших практик и повышает производительность загрузки изображений. В этой статье мы рассмотрим функции и использование директивы NgOptimizedImage для оптимизации загрузки изображений в приложениях Angular.

Понимание директивы NgOptimizedImage

Директива NgOptimizedImage предназначена для определения приоритета загрузки изображения с наибольшей отрисовкой содержимого (LCP), что повышает общую производительность. Рассмотрим подробнее его свойства и функциональность:

Селекторы

Директива применяется к элементам img с помощью следующего селектора:

img[ngSrc]

Характеристики

Директива NgOptimizedImage предоставляет несколько свойств для настройки поведения загрузки изображения. Давайте подробно рассмотрим каждое свойство:

• ngSrc: это свойство указывает имя исходного изображения. Загрузчик изображения обрабатывает имя изображения, а конечный URL применяется как свойство src элемента img.
• ngSrcset: это свойство принимает разделенный запятыми список дескрипторов ширины или плотности. Имя изображения из ngSrc объединяется со списком дескрипторов для создания свойства srcset элемента img. Это свойство включает адаптивные изображения.
• размеры: свойство sizes используется для передачи атрибута базовых размеров элементу img, что позволяет автоматически создавать отзывчивые srcset.
• ширина и высота: эти свойства определяют внутренние размеры изображения. Для адаптивных изображений они представляют внутреннюю ширину и высоту в пикселях. Для изображений фиксированного размера они указывают желаемую визуализируемую ширину и высоту в пикселях.
• загрузка: Это свойство управляет поведением загрузки изображения. Он может быть установлен на 'lazy', 'eager' или 'auto'. Установка изображений как loading='eager' или loading='auto' помечает их как неприоритетные изображения, в то время как 'lazy' загрузка откладывает загрузку до тех пор, пока изображение не будет отображено. Рекомендуется избегать изменения этого входа для приоритетных изображений.
• приоритет: установка для свойства priority значения true указывает, что изображение должно иметь высокий приоритет во время загрузки.
• loaderParams: это свойство позволяет передавать пользовательские данные в пользовательские загрузчики.
• disableOptimizedSrcset: включение этого свойства отключает автоматическое создание srcset для изображения.
• fill: это свойство, помеченное как DEVELOPER PREVIEW, включает «режим заливки» для изображения. В этом режиме изображение заполняет содержащий его элемент, не требуя явных значений высоты и ширины.

Функциональность

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

• Автоматически устанавливает атрибут fetchpriority в теге img для определения приоритета загрузки изображения с наибольшей отрисовкой содержимого (LCP).
• Lazy по умолчанию загружает неприоритетные изображения.
• Утверждает наличие соответствующего тега ссылки preconnect в заголовке документа.
• Создает соответствующие URL-адреса активов, если предоставляется соответствующая функция ImageLoader.
• Автоматически генерирует srcset на основе предоставленных дескрипторов.
• Требует установки свойств width и height и предупреждает, если они неверны или могут вызвать визуальное искажение при рендеринге.

Реализация директивы NgOptimizedImage

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

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

Начните с импорта директивы NgOptimizedImage в необходимый NgModule или автономный компонент:

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

// Include it in the necessary NgModule
@NgModule({
  imports: [NgOptimizedImage],
})
class AppModule {}

// ... or a standalone Component
@Component({
  standalone: true,
  imports: [NgOptimizedImage],
})
class MyStandaloneComponent {}

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

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

Если вы хотите использовать существующий загрузчик для стороннего сервиса изображений, добавьте фабрику провайдеров для выбранного сервиса в массив провайдеров. Например, чтобы использовать загрузчик 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 в шаблонах

Наконец, обновите теги <img> в своих шаблонах, чтобы использовать свойство ngSrc вместо атрибута src:

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

Используя ngSrc, директива получает контроль над установкой атрибута src, запуская загрузку изображений в оптимальное время.

Заключение

Директива NgOptimizedImage — ценный инструмент для повышения производительности загрузки изображений в приложениях Angular. Следуя шагам, описанным в этой статье, вы сможете легко внедрить директиву и обеспечить соблюдение рекомендаций по загрузке изображений. Используя такие функции, как автоматическая генерация srcset, отложенная загрузка и обработка приоритетов, NgOptimizedImage позволяет оптимизировать взаимодействие с пользователем вашего веб-приложения, гарантируя эффективную загрузку изображений.

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