Внести вклад

Оптимизация изображений

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

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

ПРИМЕЧАНИЕ: Узнайте больше об оптимизации изображений с помощью NgOptimizedImage в подробном руководстве.

В этом упражнении вы узнаете, как использовать NgOptimizedImage для обеспечения эффективной загрузки изображений.

  1. Import the NgOptimizedImage directive

    Чтобы использовать директиву NgOptimizedImage, сначала импортируйте её из библиотеки @angular/common и добавьте в массив imports компонента.

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

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

  2. Update the src attribute to be 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. Add width and height attributes

    Обратите внимание, что в приведенном выше примере кода у каждого изображения есть атрибуты 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. Prioritize important images

    Одной из самых важных оптимизаций для производительности загрузки является приоритезация любого изображения, которое может быть "элементом LCP" (самым большим графическим элементом на экране при загрузке страницы). Чтобы оптимизировать время загрузки, обязательно добавьте атрибут priority к вашему "hero image" ( главному изображению) или любым другим изображениям, которые, по вашему мнению, могут быть элементом LCP.

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

  5. Optional: Use an image loader

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

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

    Итоговый URL будет 'https://my.base.url/image.png'

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

    Загрузчики изображений нужны не только для удобства — они позволяют использовать все возможности NgOptimizedImage. Узнайте больше об этих оптимизациях и встроенных загрузчиках для популярных CDN здесь.

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

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