NgOptimizedImage: Otimização de imagem com Angular

No frontend moderno nós temos que nos preocupar com bastante coisa uma delas é o carregamento de imagens e como isso está ligado a performance da aplicação e ou ao SEO do site. Irei abordar nesse post como otimizar imagem e utilizar lazy loading.

Acompanhe o Blog e o meu Curso de Angular ou Curso de Javascript, Ts e Nodejs

NgOptimizedImage

Vamos ver como utilizar essa diretiva para ajudar na melhora de velocidade de carregamento de imagens e como o usuário ter uma experiência satisfatória no site, imagina que nosso usuário tenha uma internet lenta 3g ou 4g meio capenga, se a página demorar muito para ser carregada devido a um chunk com inúmeras imagens.

Os estudos do Google mostram que o usuário espera cerca de 3 segundos ou menos em um carregamento de site, depois disso é propenso a fechar e assim você pode perder uma visita, venda ou o que sua aplicação ou site oferece.

A diretiva NgOptimizedImage funciona da seguinte forma:

• Ela carrega as imagens de forma assíncrona, o que significa que o navegador não precisa esperar que todas as imagens sejam carregadas antes de renderizar a página.
• Ela usa um serviço de otimização de imagens para compactar as imagens antes de carregá-las. Isso reduz o tamanho das imagens, o que melhora o tempo de carregamento.
• Ela permite que você use o lazy loading para carregar as imagens apenas quando elas são necessárias. Isso pode melhorar ainda mais o tempo de carregamento das imagens.

Para utilizar o NgOptimizedImage, devemos fazer o import dela, podendo ser no module ou standalone:

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

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

// Caso você esteja usando standalone.
@Component({
  standalone: true
  imports: [NgOptimizedImage],
})
class StandaloneComponent {}

NgOptimizedImage a diretiva é aplicada no elemento img:

img ngSrc

Se você reparar trocamos a propriedade src do img para o ngSrc e agora temos acesso a todas propriedades do NgOptimizedImage e são elas:

• ngSrc: Aqui é onde colocamos o caminho da imagem;
• ngSrcset: Esta propriedade aceita uma lista separada por vírgulas e largura;
• sizes: A propriedade size é usada para passar o tamanho para o elemento img;
• width e height: Permite setar largura e altura;
• loading: Esta propriedade controla o comportamento de carregamento da imagem, podendo ser lazy, eager ou auto. Tanto eager e auto, sinaliza que não são imagens prioritárias e o lazy adia o carregamento até que a imagem esteja prestes a ser exibida;
• priority: Definir como true, indica que a imagem deve ser carregada de forma prioritária na página;
• disableOptimizedSrcset: Desativa a geração automática de srcset;
• fill: Ainda está em developer preview, ativa o modo de preenchimento para a imagem.

Vamos aos exemplos:

ngSrc:

<img ngSrc="image.jpg" alt="Uma imagem">

Este exemplo carrega a imagem image.jpg e define-a como a imagem de origem do elemento img.

width e height:

<img ngSrc="image.jpg" width="100" height="100" alt="Uma imagem">

Este exemplo define a largura e altura da imagem em pixels.

ngSrcset:

<img ngSrc="image.jpg" ngSrcset="200w, 400w, 800w" alt="Uma imagem">

Este exemplo define uma lista de descritores de largura para a imagem. O navegador usará o descritor mais adequado para a largura da tela.

sizes:

<img ngSrc="image.jpg" ngSrcset="200w, 400w, 800w" sizes="(min-width: 320px) 200px, (min-width: 640px) 400px, (min-width: 1280px) 800px"  alt="Uma imagem">

Este exemplo define uma lista de tamanhos básicos para a imagem. O navegador usará esses tamanhos para gerar a propriedade srcset da imagem.

loading:

<img ngSrc="image.jpg" loading="lazy" alt="Uma imagem">

Este exemplo carrega a imagem de forma assíncrona, adiando o carregamento até que a imagem esteja prestes a ser exibida.

priority:

<img ngSrc="image.jpg" priority="true" alt="Uma imagem">

Este exemplo marca a imagem como uma imagem prioritária, o que significa que ela será carregada antes de outras imagens não prioritárias.

disableOptimizedSrcset:

<img ngSrc="image.jpg" disableOptimizedSrcset="true" alt="Uma imagem">

Este exemplo desativa a geração automática de srcset para a imagem.

fill:

<div
  style="position: relative;
  width: 100%;
  height: 400px;
  background: red;"
>
  <img
    ngSrc="image.jpg"
    alt="Uma imagem"
    style="object-fit: cover;"
    fill
    priority
  />
</div>

Este exemplo ativa o “modo de preenchimento” para a imagem. Neste modo, a imagem preenche seu elemento de contenção sem exigir valores explícitos de altura e largura.

Com essa diretiva temos como trabalhar de forma poderosa com o lazy loading ao nosso favor, trazendo performance e velocidade para aplicação como um todo e dando uma experiência muito mais agradável para o usuário também.

Veja mais na documentação do Angular.