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!
javascript angular ngoptimizedimage
Commentami!