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 tiver que 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. E 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 de muitas dimensões: recursos do formato, conteúdo de dados codificados, qualidade, dimensões dos pixels e muito mais.
Como otimizar imagens vetoriais
Todos os navegadores modernos são compatíveis com Elementos gráficos vetoriais escaláveis (SVG, na sigla em inglês), que é um formato de imagem baseado em XML para gráficos bidimensionais. É possível 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 circular simples abaixo com um contorno preto e um plano de fundo vermelho e foi exportado do Adobe Illustrator.
<?xml version="1.0" encoding="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 os arquivos SVG usando uma ferramenta como o SVGO.
Neste caso, o SVGO reduz o tamanho do arquivo SVG acima gerado pelo Illustrator em 58%, passando 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, também é possível aplicar a compactação GZIP para reduzir o tamanho da transferência. Verifique se o servidor está configurado para compactar recursos SVG.
Uma imagem rasterizada é 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": (R) canal vermelho, (G) canal verde, (B) canal azul e (A) canal 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 mil | 2.500 KB |
39 KB para uma imagem de 100 x 100 pixels pode não parecer grande, mas o tamanho do arquivo aumenta rapidamente em imagens maiores e torna o download dos recursos de imagem lento e caro. Até agora, esta postagem se concentrou apenas no formato de imagem "não compactado". Felizmente, é possível fazer muitas 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 nos fornecem 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 economizaria 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 bits preciosos.
Em seguida, após otimizar os dados armazenados em pixels individuais, você pode ficar mais inteligente e observar 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 e assim por diante. 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, você pode armazenar a diferença entre pixels próximos. Se os pixels adjacentes forem os mesmos, o delta será "zero" e você só precisará armazenar um bit. Mas por que parar por aí...
O olho humano tem um nível diferente de sensibilidade a cores diferentes: você pode otimizar a 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: é possível usar esse fato para melhorar ainda mais a codificação delta. Em vez de analisar apenas os vizinhos imediatos de cada pixel, é possível analisar blocos maiores de pixels próximos e codificar blocos diferentes com configurações distintas.
Como você pode ver, a otimização de imagens se complica rapidamente (ou divertida, dependendo da sua perspectiva) e é uma área ativa de pesquisa acadêmica e comercial. As imagens ocupam muitos bytes, e o desenvolvimento de técnicas melhores de compactação de imagens é muito vantajoso. Se quiser saber mais, acesse a página da Wikipédia ou confira o artigo sobre técnicas de compactação do WebP para ver um exemplo prático.
Mais uma vez, tudo isso é ótimo, mas também muito acadêmico: como isso ajuda a otimizar imagens em 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 entender e ter em mente antes de se aprofundar nas discussões dos vários formatos de imagens rasterizadas.
Compactação de imagem com e sem perda
Para certos 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, pior ainda, quebrá-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, muitas vezes podemos 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 diferentes, o que significa que podemos usar menos bits para codificar algumas cores. Como resultado, um pipeline típico de otimização de imagens consiste em duas etapas de alto nível:
- A imagem é processada com um filtro com perdas que elimina alguns dados de pixel.
- A imagem é processada com um filtro sem perdas que compacta os dados de pixel.
A primeira etapa é opcional, e o algoritmo exato dependerá do formato da 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 o equilíbrio entre o tamanho do arquivo e os artefatos introduzidos pela compactação com perda. Em alguns casos, pode ser necessário pular a otimização com perda para comunicar detalhes complexos em toda a fidelidade. Em outros casos, você pode aplicar uma otimização com perda agressiva para reduzir o tamanho do arquivo do recurso de imagem. É aí que seu próprio julgamento e o contexto precisam entrar em jogo. Não há uma configuração universal.
Como exemplo prático, ao usar um formato com perda, como JPEG, o compressor costuma expor uma configuração de "qualidade" personalizável (por exemplo, o controle deslizante de qualidade fornecido pelo recurso "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 melhores resultados, teste várias configurações de qualidade para suas imagens e não tenha receio de diminuir a qualidade. Os resultados visuais geralmente são muito bons e as economias de tamanho de arquivo podem ser consideráveis.
Efeitos da compactação de imagens nas Core Web Vitals
Como as imagens costumam ser candidatas à Largest Contentful Paint, a redução da duração do carregamento do recurso de uma imagem pode resultar em uma LCP melhor tanto no laboratório quanto em campo.
Ao usar as configurações de compactação em formatos de imagem rasterizados, teste os formatos WebP e AVIF para ver se você pode exibir a mesma imagem com pouco espaço em comparação com os formatos mais antigos.
No entanto, é necessário ter cuidado para não comprimir imagens rasterizadas demais. Uma boa solução é usar uma CDN de otimização de imagem para encontrar as melhores configurações de compactação, mas uma alternativa é usar ferramentas como o Butteraugli para estimar diferenças visuais, de modo que você não codifique imagens muito de forma agressiva e perca muita qualidade.
Lista de verificação da otimização de imagens
Confira algumas dicas e técnicas que você deve ter em mente ao otimizar suas imagens:
- Prefira formatos vetoriais:as imagens vetoriais não dependem de resolução e escala, o que as torna ideais para um mundo de alta resolução e com vários dispositivos.
- Reduza 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 GZIP aos recursos SVG.
- Prefere WebP ou AVIF em vez de formatos rasterizados mais antigos: WebP e AVIF geralmente são muito menores do que formatos de imagem mais antigos.
- Escolha o formato de imagem com melhor varredura:determine seus requisitos funcionais e selecione o formato mais adequado para cada recurso específico.
- Teste as configurações de qualidade ideais para formatos rasterizados:não tenha receio de diminuir as configurações de "qualidade". Os resultados geralmente são muito bons e as economias de bytes são significativas.
- Remova os 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 imagens e garanta que o tamanho de "exibição" seja o mais próximo possível do tamanho "natural" da imagem. Preste muita atenção em 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.