NgOptimizedImage: Otimização de imagem com Angular

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.

--
Curso de Angular: https://vidafullstack.com.br/curso-de-angular/
Blog: https://vidafullstack.com.br/

Видео NgOptimizedImage: Otimização de imagem com Angular канала Vida FullStack