Como desenvolvedores da web e engenheiros de software, queremos dar às pessoas o que elas desejam. Se você está familiarizado com o NextJS , deve estar familiarizado com o incrível recurso de otimização de imagem incluído na versão recentemente lançada 10. NextJS é uma estrutura que pode ser usada tanto no backend quanto no frontend dos aplicativos React. Ele é capaz de realizar uma ampla gama de manipulações, incluindo a conversão de imagens em formato WebP amigável, o upload de imagens conforme as necessidades do usuário e muito mais.
Se você já está trabalhando com o NextJS, isso é muito útil. Mas e se você quiser funcionalidade de otimização, estilo embutido e a simplicidade de um componente React sem os obstáculos associados à nova estrutura?
— , . , , ( !) .
, BetterImage
BetterImage é uma ferramenta de código aberto que imita muitos dos recursos de otimização de uma forma simples e conveniente no formato React. Ele converte a imagem em WebP otimizado 30% menor do que JPEG sem sacrificar a qualidade. Isso melhora a exibição, bem como o SEO, a acessibilidade no Google Lighthouse em comparação com a tag padrão. O componente também simplifica a formatação CSS, incluindo as manipulações mais populares prontas para uso. O componente assume propriedades, abstraindo manipulações e importações, permitindo mais foco na aplicação. BetterImage é compatível com componentes funcionais e baseados em classe, portanto, você pode incluí-lo em seu aplicativo, não importa com qual aroma você sirva seu React. Habilitando a imagem de backup,bem como as dimensões de altura e largura, o CSS evita que a métrica de mudança de layout agregada seja aplicada ao avaliar um site no Google Lighthouse.
Resultados do Google Lighthouse para tag padrão (esquerda) versus resultados BetterImage (direita).
O componente ainda está em beta, com novas funcionalidades e pacotes NPM em desenvolvimento. Se você gostaria de experimentar o caso do componente ou tiver dúvidas, visite o Github e o site !
O que há sob o capô da BetterImage?
Os testes do farol mostram que o componente pode melhorar o desempenho de carregamento da imagem. Outros frameworks como Next.JS fornecem ótimas otimizações. Nossa equipe deseja adotar isso no React para que outros frameworks não sejam necessários. Criamos BetterImage para que os desenvolvedores possam escrever estilos diretamente no código React como uma string. O estilo é opcional e não pode ser usado.
Componente BetterImage
O que está sob o capô? As propriedades são passadas para o componente, que então abstrai as informações para manipular a imagem. Não há necessidade de importar a própria imagem para o componente React, apenas o caminho relativo é necessário e a BetterImage importará dinamicamente a imagem convertida. BetterImage converte o arquivo de origem em WebP usando uma chamada de API de pacote NPM externa e salva a imagem convertida em uma pasta local. Isso ajudará a renderizar a imagem ainda mais rápido após a primeira manipulação. Todas as outras funcionalidades - sempre flexíveis - são aplicadas conforme necessário. Para uma prévia do componente atualmente em beta, bem-vindo ao Github e ao site !
Obrigado por ler este pequeno comentário!
