Ottimizzare le immagini in Angular con NgOptimizedImage

NgOptimizedImage è una direttiva di Angular che ci aiuta ad ottimizzare il caricamento delle immagini.

Ha svariate opzioni che potete vedere nella documentazione.

Per prima cosa dobbiamo aggiungere la direttiva; questo il mio app.module.ts:

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app.component';
import {NgOptimizedImage} from "@angular/common";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgOptimizedImage
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule {
}

Nel nostro componente non dobbiamo fare nulla, almeno per questo esempio.

L'HTML sarà una cosa del genere:

<img ngSrc="./assets/immagine.jpg" alt="immagine" width="500" height="400" priority>

Come vedete:

• abbiamo usato ngSrc
• abbiamo impostato le dimensioni
• abbiamo usato priority per indicare la massima priorità

Se usate fill, potete anche non impostare le dimensioni, in quanto andrà a prendere la massima dimensione disponibile.

Volendo c'è anche ngSrcset, che ci da la possibilità di impostare le immagini a seconda della dimensione dello schermo.

Enjoy!