O desempenho da web moderna é amplamente impulsionado pela otimização de recursos, com um foco considerável em imagens. As imagens representam uma proporção significativa dos dados utilizados pelos sites. Portanto, exibir imagens nos formatos mais eficientes pode ter um impacto profundo no desempenho do site, na experiência do usuário e na classificação de SEO. A ferramenta de auditoria Lighthouse do Google fornece informações críticas para ajudar a alcançar essa otimização, uma das quais é a oportunidade de "Servir imagens em formatos modernos". Esse recurso, localizado na seção Oportunidades do relatório Lighthouse, identifica todas as imagens de um site que estão em formatos mais antigos, sugerindo possíveis ganhos de desempenho que podem ser alcançados com a exibição dessas imagens em formatos modernos, como AVIF e WebP.
O problema com formatos de imagem tradicionais
Muitos sites ainda usam formatos tradicionais como JPEG, PNG e GIF para suas imagens. Embora esses formatos tenham seus pontos fortes e sirvam bem a Web há anos, eles não são tão eficientes quanto alguns dos formatos modernos quando se trata de compactação e qualidade. Esses formatos mais antigos geralmente levam a tamanhos de arquivo maiores, o que pode diminuir o desempenho do site, especialmente para usuários com conexões de internet mais lentas ou em dispositivos móveis.
A promessa dos formatos de imagem modernos
Nos últimos anos, dois formatos surgiram como opções superiores para imagens da web: AVIF e WebP.
AVIF , ou AV1 Image File Format, é baseado no formato de codificação de vídeo AV1 desenvolvido pela Alliance for Open Media. Ele oferece ganhos de compactação significativos em comparação com formatos mais antigos, o que significa que pode fornecer imagens de alta qualidade em tamanhos de arquivo muito menores. Isso torna o AVIF uma excelente escolha para sites com conteúdo de imagem pesado.
O WebP , desenvolvido pelo Google, também oferece recursos impressionantes de compactação, principalmente para imagens com transparência (canais alfa), onde supera significativamente o PNG. Esse formato oferece suporte à compactação com e sem perdas, permitindo que os desenvolvedores equilibrem a qualidade da imagem e o tamanho do arquivo de acordo com suas necessidades.
Identificando oportunidades com o Lighthouse
A ferramenta Lighthouse é fundamental para detectar oportunidades para melhorar o desempenho do site. Ao analisar os recursos de um site, ele fornece uma lista de todas as imagens atualmente servidas em formatos mais antigos. Este relatório detalhado mostra a economia potencial em kilobytes (KB) ou megabytes (MB) que pode ser obtida com a conversão dessas imagens em formatos modernos.
Para cada imagem, o Lighthouse calcula a diferença entre o tamanho do arquivo atual e o tamanho do arquivo estimado se for servido em um formato moderno. Em seguida, apresenta essas economias potenciais, oferecendo aos desenvolvedores uma orientação clara sobre os possíveis ganhos de desempenho que podem ser alcançados.
Implementando a Mudança
Depois de identificar as imagens a converter, o próximo passo é gerar as versões AVIF ou WebP dessas imagens. Existem várias ferramentas e bibliotecas disponíveis para isso, incluindo o Squoosh , um aplicativo da web de compactação de imagens on-line desenvolvido pelo Google, e o ImageMagick , um conjunto de software robusto que lida com a conversão e manipulação de imagens.
Depois que as imagens são convertidas, elas precisam ser exibidas aos usuários de maneira compatível com seus navegadores. Isso geralmente envolve o uso do elemento HTML 'imagem' ou métodos semelhantes, que permitem que diferentes versões de uma imagem sejam exibidas de acordo com os recursos do navegador.
Conclusão
Servir imagens em formatos modernos é um componente crucial da otimização do desempenho da web. Aproveitando o recurso "Servir imagens em formatos modernos" do Lighthouse, os desenvolvedores da Web podem identificar prontamente as possíveis economias oferecidas por esses formatos. Adotar AVIF e WebP não apenas melhora o desempenho do site; melhora a experiência do usuário e pode impactar positivamente as classificações de SEO. Os formatos de imagem modernos vieram para ficar, e aproveitá-los em todo o seu potencial é uma oportunidade que não deve ser desperdiçada.
