Há pouco mais de um ano, a equipe do Chrome Aurora lançou a diretiva NgOptimizedImage do Angular. A diretiva se concentra principalmente em melhorar a performance, medida pelas métricas do Core Web Vitals. Ela agrupa otimizações de imagem comuns e práticas recomendadas em uma API voltada para o usuário que não é muito mais complicada do que um elemento <img> padrão.
Em 2023, melhoramos a directive com novos recursos. Esta postagem descreve os recursos mais importantes, com ênfase no motivo de priorizarmos cada um deles e como eles podem ajudar a melhorar o desempenho dos aplicativos Angular.
Novos recursos
O NgOptimizedImage melhorou bastante ao longo do tempo, incluindo os novos recursos a seguir.
Modo de preenchimento
Dimensionar suas imagens fornecendo os atributos width e height é uma otimização extremamente importante para reduzir a mudança de layout, porque os navegadores precisam saber a proporção da imagem para economizar espaço. No entanto, o dimensionamento de imagens é um trabalho extra para os desenvolvedores de aplicativos e não faz sentido em alguns casos de uso de imagens.
Para ajudar a resolver essa tensão, o primeiro recurso importante adicionado ao componente de imagem após a prévia para desenvolvedores é o modo de preenchimento. Essa é uma maneira dos desenvolvedores incluirem imagens sem dimensioná-las explicitamente e sem incorrer em mudanças de layout.
No modo de preenchimento, o requisito de dimensionamento da imagem é desativado, e a imagem recebe um estilo automático para preencher o elemento que a contém. Isso separa a proporção de uma imagem do espaço que ela ocupa na página e oferece mais controle sobre como as imagens se encaixam no layout da página.
O modo de preenchimento usa NgOptimizedImage como uma alternativa de melhor desempenho à propriedade css background-image. Coloque uma imagem dentro do <div> ou de outro elemento que teria o estilo background-image e ative o modo de preenchimento, conforme demonstrado no exemplo de código anterior. Use as propriedades CSS object-fit e object-position no <div> para controlar como a imagem é posicionada no plano de fundo.
// Height and width are required
<img ngSrc="example.com" height="300" width="400">
// Unless you use fill mode!
<div style="width: 100vw; height: 50em; position: relative">
<img ngSrc="example.com" fill>
</div>
Geração de Srcset
Uma das técnicas de otimização de imagem mais eficazes é usar o atributo srcset para garantir que imagens de tamanho adequado sejam baixadas para qualquer dispositivo que acesse seu app. O uso do srcset em todo o app pode evitar o desperdício de largura de banda e melhorar significativamente as Core Web Vitals da LCP.
A desvantagem do atributo srcset é que ele pode ser difícil de implementar. Escrever manualmente os valores de srcset significa adicionar várias linhas de marcação a cada elemento de imagem no app, com vários URLs personalizados para cada srcset. Você também precisa decidir sobre um conjunto de pontos de interrupção, o que é complicado, porque eles podem representar densidades de tela e tamanhos de janela de visualização de dispositivos comuns.
Por isso, adicionar a geração de srcset automatizada à diretiva NgOptimizedImage foi um marco importante após o lançamento. Com essa adição, qualquer aplicativo que use um CDN compatível com o redimensionamento de imagens pode ter srcsets completos e personalizáveis adicionados automaticamente a cada imagem gerada com a diretiva NgOptimizedImage.
Incluímos uma API simplificada para definir a propriedade sizes, que é usada para garantir que cada imagem receba o tipo correto de srcset. Se você não incluir um atributo sizes, saberemos que a imagem tem tamanho fixo e precisa de um srcset dependente da densidade, como este:
<img src="www.example.com/image.png" srcset="www.example.com/image.png?w=400 1x, www.example.com/image.png?w=800 2x" >
Esse tipo de srcset garante que as imagens sejam veiculadas em um tamanho que leva em consideração a densidade de pixels do dispositivo do usuário.
Por outro lado, se você incluir a propriedade sizes, o NgOptimizedImage vai gerar um srcset responsivo que inclui pontos de interrupção para muitos tamanhos comuns de dispositivos e imagens, usando esta lista padrão de pontos de interrupção:
[16, 32, 48, 64, 96, 128, 256, 384, 640, 750, 828, 1080, 1200, 1920, 2048, 3840]
Geração de pré-conexão
Para melhorar a LCP, é importante reduzir o tempo que os usuários levam para fazer o download da imagem da LCP. Na seção anterior, você viu como o srcset pode ajudar na transferência de arquivos de imagem menores. No entanto, uma otimização igualmente importante é iniciar a transferência o mais rápido possível. Uma maneira de fazer isso é usar tags link rel="preconnect" para iniciar a conexão com o domínio da imagem.
Desde o início, o NgOptimizedImage alerta se você não conseguir fazer a pré-conexão ao domínio da imagem do LCP, mas o aviso não é a solução ideal. Em vez disso, preferimos corrigir o problema para você. E é exatamente isso que a NgOptimizedImage faz agora, com a geração automática de pré-conexão.
Para oferecer suporte a esse recurso, usamos a análise de código estático para tentar detectar domínios de imagem em loaders da NgOptimizedImage e gerar automaticamente tags de link de pré-conexão para esses domínios. Ainda pode haver casos em que os links de pré-conexão manual são necessários, mas, para a maioria dos usuários, a pré-conexão automática significa uma etapa a menos necessária para uma boa performance de imagem.
Suporte aprimorado para carregadores personalizados
Um elemento-chave do NgOptimizedImage é a arquitetura do carregador, que permite que a diretiva gere automaticamente URLs adaptados ao CDN de imagem do aplicativo. Um conjunto de carregadores integrados é incluído para CDNs amplamente usadas. Também oferecemos o uso de carregadores personalizados, que permitem integrar a NgOptimizedImage a quase qualquer solução de hospedagem de imagens.
No lançamento, esses carregadores personalizados tinham escopo limitado e só podiam ler o atributo width do elemento de imagem. Em resposta ao feedback dos usuários, adicionamos suporte a uma estrutura de dados loaderParams personalizável, que permite que dados arbitrários sejam transmitidos do elemento de imagem para o carregador personalizado. Com a expansão, os carregadores personalizados podem ser tão simples ou complexos quanto necessário para a infraestrutura de imagem de um aplicativo.
O exemplo a seguir mostra como um carregador personalizado simples pode usar a API loaderParams para selecionar entre dois domínios de imagem alternativos:
const myCustomLoader = (config: ImageLoaderConfig) => {
if (config.loaderParams?.alternateDomain) {
return `https://alternate.domain.com/images/${config.src}`
}
return `https://primary.domain.com/images/${config.src}`;
};
Um exemplo de carregador personalizado mais complexo está disponível na documentação do Angular (em inglês).
Orientações detalhadas sobre o desempenho da imagem
Até agora, todos os alertas de desempenho de imagem que adicionamos ao Angular faziam parte da diretiva NgOptimizedImage. Se você não estiver usando a diretiva no app, não vai receber orientações sobre problemas de desempenho da imagem.
No Angular 17, estamos ampliando o escopo das orientações de desempenho de imagem para incluir todos os apps do Angular. Agora, se detectarmos padrões de imagem que sabemos que prejudicam a performance, como o carregamento lento da imagem do LCP ou o download de um arquivo muito grande para a página, vamos avisar você, mesmo que você não esteja usando o NgOptimizedImage.
O desempenho da imagem é importante para todos os apps, e estamos felizes em continuar criando proteções para ajudar a evitar erros comuns em apps do Angular.
Para o futuro
Já estamos trabalhando muito no desenvolvimento do próximo conjunto de recursos para a NgOptimizedImage. Embora o desempenho da imagem continue sendo nossa principal preocupação, também queremos adicionar recursos que melhorem a experiência do desenvolvedor, para garantir que o NgOptimizedImage continue sendo uma opção atraente para incluir imagens em aplicativos do Angular.
Um recurso que é prioridade para nós são os marcadores de posição de imagem. Elas são usadas com frequência para melhorar a aparência do carregamento de imagens em aplicativos da Web, mas podem prejudicar o desempenho se implementadas incorretamente. Esperamos criar um sistema de marcador de posição de imagem com foco na performance no NgOptimizedImage. Fique de olho no nosso blog para mais anúncios.