Em maio de 2022, as equipes do Aurora e do Angular anunciaram que iriam colaborar em uma diretiva de imagem para o Angular. A diretiva foi lançada recentemente para a prévia para desenvolvedores como parte do Angular v14.2. Esta postagem fala sobre como a nova diretiva de imagem, NgOptimizedImage, oferece suporte à otimização de imagens no Angular.
Contexto
As imagens são um componente comum e crucial da experiência do usuário na Web, com 99,9% das páginas da Web gerando solicitações para uma ou mais imagens. As imagens também são os elementos que mais contribuem para o peso da página, constituindo uma média de 982 kilobytes por página.
Devido ao aumento do número e do tamanho, as imagens podem prejudicar o desempenho das páginas da Web e afetar as métricas das Principais métricas da Web. Para 79,4% das páginas para computador, uma imagem foi o elemento da maior exibição de conteúdo (LCP) em 2021. A busca por imagens otimizadas se tornou uma tarefa constante para muitos de nós.
A equipe do Aurora acredita na capacidade de aproveitar os frameworks para oferecer soluções integradas para desafios comuns de desenvolvedores. A primeira incursão deles no espaço de otimização de imagens foi o componente de imagem do Next.js. Eles consideraram esse componente como um campo de testes para saber se a melhoria da experiência do desenvolvedor (DX) da otimização de imagens poderia levar a ganhos de desempenho para mais apps que usam frameworks.
O primeiro conjunto de resultados do usuário Leboncoin do Next.js foi encorajador. A Leboncoin teve uma melhoria significativa na LCP (de 2,4 para 1,7 segundos) depois de começar a usar next/image. A adoção subsequente de next/image na comunidade contribuiu para o aumento das origens do Next.js que atendem aos limites de LCP. Logo surgiram solicitações de recursos semelhantes em outros frameworks, um deles sendo o Angular.
Como resultado, a Aurora consultou o Angular e o Nuxt para criar protótipos de componentes de imagem para esses frameworks. O componente de imagem do Nuxt foi lançado no ano passado. Agora, a diretiva de imagem do Angular (NgOptimizedImage) foi lançada para trazer os padrões de otimização de imagem para o Angular.
Oportunidade
O Angular é um dos principais frameworks JavaScript usados pelos desenvolvedores atualmente. Ele é usado por mais de 50 mil das origens rastreadas pelo HTTPArchive em dispositivos móveis e tem quase 3 milhões de downloads semanais no NPM.