Директива 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="/">
<!-- Интересные статьи
Интересные статьи
