Otimização de Imagem

A otimização de imagens é a prática de fornecer imagens com o menor tamanho de arquivo possível, mantendo uma qualidade visual aceitável para o contexto em que aparecem. As imagens geralmente representam a maior parte do peso da página em sites de conteúdo e comércio eletrônico, o que faz desta uma das tarefas de otimização de desempenho com maior retorno e, ao mesmo tempo, uma das mais negligenciadas.

O dimensionamento correto é o fator mais importante e o mais frequentemente incorreto. Exibir uma imagem em suas dimensões originais completas quando ela será exibida em uma fração desse tamanho desperdiça largura de banda proporcionalmente à diferença de área, e esse desperdício é invisível porque o navegador redimensiona a imagem e ela parece correta. Auditorias na proporção entre as dimensões exibidas e as dimensões de entrega em um site frequentemente encontram imagens várias vezes maiores do que qualquer tela exige.

Os formatos modernos proporcionam economias substanciais com qualidade equivalente. Tanto o WebP quanto o AVIF comprimem de forma consideravelmente mais eficiente do que os formatos mais antigos que substituem, sendo que o AVIF geralmente resulta em arquivos menores, embora com uma codificação mais lenta. Como o suporte dos navegadores varia, a abordagem prática é disponibilizar os formatos modernos aos navegadores que os aceitam e recorrer automaticamente a eles, o que é suportado pelo elemento de imagem e pela negociação de conteúdo sem qualquer perda de compatibilidade.

A entrega responsiva garante que cada dispositivo receba uma versão apropriada, em vez de um tamanho único para todos. Ao fornecer várias larguras por meio de um conjunto de fontes, com informações de dimensionamento para que o navegador possa escolher antes da conclusão do layout, significa que um telefone baixa uma imagem pequena e uma tela grande baixa uma imagem grande. Sem isso, os dispositivos móveis baixam arquivos do tamanho de um computador ou as telas de computador exibem imagens desfocadas.

As configurações de compressão envolvem um julgamento que geralmente é feito de forma muito conservadora. A compressão com perda de dados em configurações de qualidade moderada normalmente produz arquivos substancialmente menores que o original, com diferenças imperceptíveis na visualização normal, e o instinto de preservar a qualidade máxima frequentemente resulta em um tamanho de arquivo várias vezes maior para uma diferença que ninguém consegue ver. Testar o limiar de percepção real para as imagens de um site, em vez de optar pela qualidade máxima por padrão, vale a pena.

A estratégia de carregamento determina quando o custo é incorrido. Imagens abaixo da área visível inicial devem ser carregadas posteriormente para não competirem com o conteúdo que o visitante pode efetivamente ver, enquanto a imagem que provavelmente será o maior elemento na visualização inicial deve ser carregada imediatamente e ter prioridade. Aplicar o carregamento adiado indiscriminadamente, inclusive à imagem principal, é um erro comum que piora a principal métrica de carregamento.

As imagens decorativas merecem atenção antes da otimização, pois a imagem mais barata é aquela que não é exibida. Fotografias de fundo grandes, slides de carrossel que a maioria dos visitantes nunca ultrapassa e imagens de banco de imagens adicionadas para preencher espaço têm um custo real e, frequentemente, não contribuem em nada para a compreensão ou conversão. Testar se elas justificam o investimento é uma questão de design que precede qualquer trabalho técnico de entrega.

A estabilidade do layout exige que as dimensões sejam declaradas. Uma imagem sem largura e altura especificadas, ou uma proporção equivalente, faz com que o conteúdo se desloque ao carregar, o que representa uma penalidade considerável e uma irritação genuína para quem lê ou clica em um link. Isso é trivial de corrigir e continua sendo uma das causas mais comuns de instabilidade de layout.

Como o trabalho abrange a produção de conteúdo, a implementação de modelos e a infraestrutura de distribuição, a melhoria duradoura exige automação em vez de disciplina manual. Na prática, a auditoria e as prioridades se encontram dentro de desempenho na web O trabalho, a transformação automatizada e a entrega responsiva são implementados por meio de desenvolvimento de produtos ou tratados na extremidade por uma rede de distribuição, e o impacto é maior para e-commerce, catálogos onde cada página de anúncio contém dezenas de imagens.