Otimização de imagem e lazy loading

#angular #tutorial

Nos tempos de frontends modernos, sempre levantamos a questão de… "Como faço para tornar minha aplicação mais performática?” Neste artigo irei falar sobre otimização de imagem e lazy loading para auxiliar nesse processo de performance e ter nossa aplicação cada vez mais rápida.

As imagens sempre são um problema na vida dos frontenders.

Imagem muito grande e pesada pode atrapalhar em vários aspectos nossa aplicação, desde a um carregamento super lento quando se tem uma internet não tão rápida, principalmente quando se está em um 3g ou 4g, como também em um desktop para primeiro bootstrap da aplicação, não dando um feedback para o usuário de forma elegante. Além de vários outros problemas também que as vezes encontramos por esse caminho hehe.

Trago aqui alguma ideia de boa prática e poder auxiliar no desenvolvimento das aplicações e quem sabe dar alguma dica para as pessoas que estão passando por esse problema. Vamos utilizar a diretiva NgOptimizedImage que ajuda a melhorar a velocidade de carregamento de imagens.

Vamos criar o projeto usando a CLI do angular. Vou considerar que você já sabe do que estamos falando e importe a diretiva NgOptimizedImage no arquivo do AppModule. Lembrando que essa diretiva está disponível a partir da versão 14.2.0.

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

@NgModule({
  imports: [
    NgOptimizedImage
  ]
})
export class AppModule { }

// Caso voce esteja usando standalone pode ser feito da forma a baixo.

@Component({
  standalone: true
  imports: [NgOptimizedImage],
})
class StandaloneComponent {}

Troque a propriedade src para ngSrc no seu template html e também será necessário colocar um width e um height.

<img
  ngSrc="../assets/img/image.jpeg"
  width="4000"
  height="3000"
/>

Para imagens responsivas passe diversos tamanhos, assim o browser escolherá a melhor para renderizar e assim você não irá perder performance.

<img
  ngSrc="../assets/img/image.jpeg"
  width="4000"
  height="3000"
  ngSrcset="200w, 400w, 600w, 800w, 1000w, 1200w, 1600w, 2000w, 3000w"
/>

A diretiva NgOptimizedImage do angular, já carrega as imagens por default em lazy loading, porém as imagens não visíveis também devem ser carregadas dessa forma.

Por exemplo, imagens de um carrosel ou que esteja mais a baixo da página, não precisa ser "carregada” quando a página é chamada, com isso, usamos um outro atributo para nos auxiliar, que é o priority.

<img
  ngSrc="../assets/img/image.jpeg"
  width="4000"
  height="3000"
  ngSrcset="200w, 400w, 600w, 800w, 1000w, 1200w, 1600w, 2000w, 3000w"
  priority
/>

Com ele, todas as imagens que são mostradas na página para o usuário serão marcadas com prioridade e irão ser carregadas primeiro. Caso voce tenha algum CDN, a partir dessa versão do angular, é possível adicionar o provider provideImageKitLoader, assim facilita a importação das imagens.

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

@NgModule({
  imports: [
    NgOptimizedImage
  ],
  providers: [
    provideImageKitLoader("url_cdn")
  ],
})
export class AppModule { }

Fazendo isso basta usar só o nome da imagem no src assim, não precisa ficar digitando sempre o caminho da imagem, pois já estará sendo chamado no provider.

<img
  ngSrc="image.jpeg"
  width="4000"
  height="3000"
  ngSrcset="200w, 400w, 600w, 800w, 1000w, 1200w, 1600w, 2000w, 3000w"
  priority
/>

Alguns dados a baixo com as diferenças de usar com e sem lazy loading.

Sem Lazy Loading

Com lazy Loading

Estas foram algumas dicas de como podemos utilizar o lazy loading de imagem ao nosso favor, trazendo mais velocidade de carregamento em nossas páginas e dando uma boa usabilidade para o usuário.

twitter @joaopaulo_avila