As imagens geralmente representam a maioria dos bytes transferidos por download em uma página da Web e também ocupam uma quantidade significativa de espaço visual. Como resultado, a otimização de imagens pode gerar algumas das maiores economias de bytes e melhorias de desempenho para seu site: quanto menos bytes o navegador precisar transferir por download, menor será a concorrência pela largura de banda do cliente e mais rápido o navegador poderá fazer o download e renderizar conteúdo útil na tela.
A otimização de imagens é uma arte e uma ciência. Uma arte porque não há uma resposta definitiva sobre a melhor forma de compactar uma imagem individual. Essa é uma ciência porque existem muitas técnicas e algoritmos bem desenvolvidos que podem reduzir significativamente o tamanho de uma imagem. Encontrar as configurações ideais para sua imagem requer uma análise cuidadosa em várias dimensões: recursos de formato, conteúdo de dados codificados, qualidade, dimensões de pixels e muito mais.
Otimizar imagens vetoriais
Todos os navegadores modernos são compatíveis com Elementos gráficos vetoriais escaláveis (SVG, na sigla em inglês), um formato de imagem baseado em XML para gráficos bidimensionais. Você pode incorporar a marcação SVG diretamente na página ou como um recurso externo. A maioria dos softwares de desenho baseados em vetor pode criar arquivos SVG ou você pode escrevê-los à mão diretamente no seu editor de texto favorito.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 612 792" xml:space="preserve">
<g id="XMLID_1_">
<g>
<circle fill="red" stroke="black" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/>
</g>
</g>
</svg>
O exemplo acima renderiza a forma de círculo simples abaixo com um contorno preto e um fundo vermelho e foi exportado do Adobe Illustrator.
<?xml version="1.0" encryption="utf-8"?>
Como você pode notar, ele contém muitos metadados, como informações de camada, comentários e namespaces XML, que geralmente são desnecessários para renderizar o recurso no navegador. Como resultado, é sempre uma boa ideia reduzir seus arquivos SVG executando uma ferramenta como o SVGO.
Por exemplo, o SVGO reduz o tamanho do arquivo SVG acima gerado pelo Illustrator em 58%, elevando-o de 470 para 199 bytes.
<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 792"><circle fill="red" stroke="#000" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/></svg>
Como o SVG é um formato baseado em XML, você também pode aplicar a compactação do GZIP para reduzir o tamanho da transferência. Verifique se o servidor está configurado para compactar recursos SVG.
Uma imagem de varredura é simplesmente uma grade bidimensional de "pixels" individuais. Por exemplo, uma imagem de 100 x 100 pixels é uma sequência de 10.000 pixels. Por sua vez, cada pixel armazena os valores "RGBA": canal vermelho (R), canal (G) verde, canal (B) azul e canal (A) alfa (transparência).
Internamente, o navegador aloca 256 valores (tons) para cada canal, o que significa 8 bits por canal (2 ^ 8 = 256) e 4 bytes por pixel (4 canais x 8 bits = 32 bits = 4 bytes). Como resultado, se soubermos as dimensões da grade, poderemos calcular facilmente o tamanho do arquivo:
- Uma imagem de 100 x 100 pixels é composta por 10.000 pixels
- 10.000 pixels x 4 bytes = 40.000 bytes
- 40.000 bytes / 1.024 = 39 KB
| Dimensões | Pixels | Tamanho do arquivo |
|---|---|---|
| 100 x 100 | 10.000 | 39 KB |
| 200 x 200 | 40.000 | 156 KB |
| 300 x 300 | 90.000 | 351 KB |
| 500 x 500 | 250.000 | 977 KB |
| 800 x 800 | 640.000 | 2.500 KB |
39 KB para uma imagem de 100 x 100 pixels pode não parecer muito, mas o tamanho do arquivo aumenta rapidamente para imagens maiores, fazendo com que o download dos recursos de imagem seja lento e caro. Até agora, essa postagem se concentrou apenas no formato de imagem "não compactada". Felizmente, é possível fazer várias coisas para reduzir o tamanho do arquivo de imagem.
Uma estratégia simples é reduzir a "profundidade de bits" da imagem de 8 bits por canal para uma paleta de cores menor: 8 bits por canal fornece 256 valores por canal e 16.777.216 (256 ^ 3) cores no total. E se você reduzir a paleta para 256 cores? Você só precisaria de 8 bits no total para os canais RGB e pouparia imediatamente dois bytes por pixel, ou seja, uma economia de compressão de 50% em relação ao formato original de 4 bytes por pixel.
Cenas complexas com transições graduais de cores (por exemplo, gradientes ou céu) exigem paletas de cores maiores para evitar artefatos visuais, como o céu pixelado no recurso de 5 bits. Por outro lado, se a imagem usa apenas algumas cores, uma paleta grande está simplesmente desperdiçando pedaços preciosos!
Em seguida, depois de otimizar os dados armazenados em pixels individuais, você pode ficar mais inteligente e analisar também os pixels próximos. Acontece que muitas imagens, especialmente fotos, têm muitos pixels próximos com cores semelhantes. Por exemplo, o céu, texturas repetidas etc. Usando essas informações a seu favor, o compressor pode aplicar a codificação delta, em que, em vez de armazenar os valores individuais de cada pixel, é possível armazenar a diferença entre pixels próximos. Se os pixels adjacentes forem iguais, o delta será "zero" e você só precisará armazenar um bit. Mas por que parar aqui...
O olho humano tem diferentes níveis de sensibilidade a cores distintas. Você pode otimizar sua codificação de cores para considerar isso reduzindo ou aumentando a paleta dessas cores. Os pixels "Próximos" formam uma grade bidimensional. Isso significa que cada pixel tem vários vizinhos: você pode usar esse fato para melhorar ainda mais a codificação delta. Em vez de observar apenas os vizinhos imediatos para cada pixel, é possível observar blocos maiores de pixels próximos e codificar blocos diferentes com configurações diferentes.
Como você pode notar, a otimização de imagens se torna complicada rapidamente (ou divertida, dependendo do seu ponto de vista) e é uma área ativa de pesquisa acadêmica e comercial. As imagens ocupam muitos bytes, e o desenvolvimento de melhores técnicas de compressão de imagem traz muito valor. Se você quiser saber mais, acesse a página da Wikipédia ou confira o artigo sobre técnicas de compressão do WebP para conferir um exemplo prático.
Novamente, tudo isso é ótimo, mas também muito acadêmico. Como isso ajuda a otimizar imagens no seu site? É importante entender o formato do problema: pixels RGBA, profundidade de bits e várias técnicas de otimização. Todos esses conceitos são fundamentais para compreender e ter em mente antes de mergulhar nas discussões de vários formatos de imagens rasterizadas.
Compactação de imagem sem perda ou com perda
Para determinados tipos de dados, como o código-fonte de uma página ou um arquivo executável, é fundamental que um compressor não altere ou perca as informações originais. Um único bit de dados ausente ou errado pode mudar completamente o significado do conteúdo do arquivo ou corrompê-lo totalmente. Para alguns outros tipos de dados, como imagens, áudio e vídeo, pode ser perfeitamente aceitável fornecer uma representação "aproximada" dos dados originais.
Na verdade, devido à forma como o olho funciona, podemos, muitas vezes, descartar algumas informações sobre cada pixel para reduzir o tamanho do arquivo de uma imagem. Por exemplo, nossos olhos têm sensibilidade diferente a cores distintas, o que significa que podemos usar menos bits para codificar algumas cores. Como resultado, um pipeline típico de otimização de imagem consiste em duas etapas de alto nível:
- A imagem é processada com um filtro com perdas que elimina alguns dados de pixels.
- A imagem é processada com um filtro sem perdas que compacta os dados de pixels.
A primeira etapa é opcional, e o algoritmo exato vai depender do formato de imagem específico, mas é importante entender que qualquer imagem pode passar por uma etapa de compactação com perda para reduzir o tamanho. Na verdade, a diferença entre vários formatos de imagem, como GIF, PNG, JPEG e outros, está na combinação dos algoritmos específicos que eles usam (ou omitem) ao aplicar as etapas com e sem perda.
Então, qual é a configuração "ideal" da otimização com e sem perda? A resposta depende do conteúdo da imagem e dos seus próprios critérios, como a compensação entre tamanho do arquivo e artefatos introduzidos pela compactação com perda: em alguns casos, você pode querer pular a otimização com perda para comunicar detalhes intrincados com fidelidade total. Em outros, você pode aplicar uma otimização agressiva com perdas para reduzir o tamanho do arquivo do recurso de imagem. É aqui que seu próprio julgamento e contexto precisam entrar em jogo, não há uma configuração universal.
Como exemplo prático, ao usar um formato com perdas como JPEG, o compressor normalmente exibe uma configuração de "qualidade" personalizável (por exemplo, o controle deslizante de qualidade fornecido pela funcionalidade "Salvar para a Web" no Adobe Photoshop), que normalmente é um número entre 1 e 100 que controla o funcionamento interno da coleção específica de algoritmos com e sem perda. Para ter resultados melhores, teste várias configurações de qualidade para suas imagens e não tenha medo de diminuir a qualidade. Os resultados visuais costumam ser muito bons e a economia no tamanho dos arquivos pode ser bastante grande.
Efeitos da compactação de imagens nas Core Web Vitals
Como as imagens geralmente são candidatas à Maior exibição de conteúdo, reduzir o tempo de carregamento de recursos de uma imagem pode resultar em uma LCP melhor no laboratório e no campo.
Ao testar as configurações de compactação em formatos de imagem raster, teste os formatos WebP e AVIF para ver se é possível exibir a mesma imagem em um tamanho pequeno em comparação com formatos mais antigos.
No entanto, tome cuidado para não comprimir imagens rasterizadas. Uma boa solução é usar uma CDN de otimização de imagens para encontrar as melhores configurações de compactação para você, mas uma alternativa pode ser usar ferramentas como o Butteraugli para estimar diferenças visuais para que você não codifique imagens muito de forma agressiva e perca muita qualidade.
Lista de verificação de otimização de imagem
Algumas dicas e técnicas que você deve ter em mente enquanto trabalha na otimização das imagens:
- Prefira formatos vetoriais:imagens vetoriais não dependem de resolução e escala, o que as torna ideais para um mundo multidispositivo e de alta resolução.
- Minifique e compacte recursos SVG:a marcação XML produzida pela maioria dos aplicativos de desenho geralmente contém metadados desnecessários que podem ser removidos. Verifique se os servidores estão configurados para aplicar a compactação do GZIP a recursos SVG.
- Prefira o formato WebP ou AVIF em vez de formatos rasterizados mais antigos: WebP e AVIF costumam ser muito menores que formatos de imagem mais antigos.
- Escolha o melhor formato de imagem de varredura: determine seus requisitos funcionais e selecione o que se adapta melhor a cada recurso específico.
- Teste configurações de qualidade ideais para formatos de varredura: não tenha receio de reduzir as configurações de "qualidade", os resultados geralmente são muito bons e a economia de bytes é significativa.
- Remova metadados desnecessários da imagem: muitas imagens de varredura contêm metadados desnecessários sobre o recurso, como informações geográficas, da câmera etc. Use as ferramentas adequadas para remover esses dados.
- Veicule imagens dimensionadas: redimensione as imagens e verifique se o tamanho de "exibição" é o mais próximo possível do tamanho "natural" da imagem. Preste muita atenção especialmente a imagens grandes, porque elas são responsáveis pela maior sobrecarga quando redimensionadas.
- Automatize, automatize, automatize: invista em ferramentas e infraestrutura automatizadas para garantir que todos os seus recursos de imagem estejam sempre otimizados.