Otimização de imagens para web: formatos, dimensões e carregamento

Em quase toda página da web, as imagens são o item mais pesado que trafega pela rede. Um único banner mal exportado pode pesar mais do que todo o HTML, o CSS e o JavaScript da página somados. Isso faz das imagens, ao mesmo tempo, o maior problema e a maior oportunidade de performance: mexer bem nelas costuma render mais do que otimizações sofisticadas em código. E, ao contrário de muitas otimizações que exigem ferramentas complexas, boa parte do ganho com imagens vem de decisões simples e conscientes sobre formato, tamanho e momento de carregar.

O erro mais comum é tratar imagem como algo que "é o que é": exporta-se do editor, joga-se no site e pronto. Só que uma imagem carrega dentro de si uma quantidade enorme de escolhas implícitas — em que formato foi salva, em quantos pixels de largura e altura, com quanta compressão, se tem transparência, se é foto ou desenho — e cada uma dessas escolhas tem impacto direto no peso final. Servir uma foto em um formato inadequado, com o triplo da resolução necessária e sem compressão, é desperdiçar megabytes que o usuário paga em tempo de espera.

Neste artigo vamos organizar as decisões que realmente importam: escolher o formato certo para cada tipo de imagem, servir as dimensões corretas para cada contexto, aplicar a compressão adequada e controlar quando cada imagem é carregada. São quatro alavancas que, juntas, transformam a página mais pesada em uma página leve, sem que o usuário perceba qualquer perda de qualidade visível.

Formato: a decisão que mais pesa#

A primeira e mais impactante escolha é o formato do arquivo, porque formatos diferentes foram desenhados para tipos diferentes de imagem e comprimem de maneiras muito distintas. A distinção central é entre imagens fotográficas e imagens gráficas. Uma foto tem milhares de cores e transições suaves; um logotipo ou ícone tem poucas cores e bordas nítidas. Formatos que comprimem bem um comprimem mal o outro.

Para fotografias, os formatos que descartam informação imperceptível ao olho — a chamada compressão com perdas — são os adequados, porque conseguem reduções drásticas de tamanho eliminando detalhes que ninguém notaria. Os formatos mais modernos desse tipo alcançam a mesma qualidade visual dos antigos com uma fração do peso, e é por isso que preferi-los é uma das otimizações de maior retorno. Para gráficos com poucas cores e bordas definidas, formatos que preservam cada pixel exatamente — compressão sem perdas — mantêm a nitidez das linhas sem os artefatos que a compressão com perdas introduziria em bordas.

O caso especial dos gráficos vetoriais#

Há uma categoria que merece destaque à parte: os gráficos vetoriais. Em vez de guardar uma grade de pixels, eles guardam as instruções matemáticas para desenhar as formas — linhas, curvas, preenchimentos. A vantagem é enorme para logotipos, ícones e ilustrações simples: o arquivo costuma ser minúsculo e, principalmente, a imagem fica perfeitamente nítida em qualquer tamanho, porque é redesenhada na resolução da tela em vez de ampliada a partir de pixels fixos. Para esse tipo de conteúdo, um vetor bate qualquer formato de pixels tanto em peso quanto em qualidade. A regra prática é: se a imagem é composta de formas geométricas e texto, e não de uma fotografia, o formato vetorial provavelmente é a melhor escolha.

Dimensões: não servir mais pixels do que cabem#

A segunda alavanca é talvez a mais desperdiçada. Uma imagem tem dimensões reais em pixels — sua largura e altura de arquivo — que muitas vezes não têm relação nenhuma com o tamanho em que ela aparece na tela. É comum uma imagem que ocupa um espaço pequeno na página ter sido exportada com dimensões gigantescas, carregando muito mais pixels do que qualquer tela vai mostrar. Cada um desses pixels excedentes é peso puro, baixado à toa.

A regra é servir a imagem nas dimensões em que ela será exibida, e não maiores. Se um espaço mostra uma imagem em determinada largura, não faz sentido enviar uma imagem com o dobro dessa largura — o navegador vai simplesmente reduzi-la na exibição, tendo baixado o dobro dos dados necessários. Redimensionar a imagem para as dimensões corretas antes de servi-la, no processo de preparação, elimina esse desperdício na origem. É uma economia que não custa qualidade nenhuma, porque os pixels descartados nunca seriam vistos.

Telas de alta densidade e imagens responsivas#

A complicação é que as telas variam. Telas de alta densidade de pixels mostram mais pixels por unidade de área, e para parecerem nítidas nelas as imagens precisam de mais pixels do que o tamanho aparente sugeriria. Além disso, o mesmo layout aparece em larguras muito diferentes — de um celular estreito a um monitor largo —, e a imagem ideal para cada um tem dimensões distintas. Servir uma única imagem grande o bastante para o pior caso penaliza todos os outros; servir uma pequena o bastante para o melhor caso deixa as telas grandes borradas.

A solução é oferecer várias versões da mesma imagem, em dimensões diferentes, e deixar o navegador escolher a mais apropriada para a tela e o contexto de cada usuário. O navegador conhece o tamanho da tela, a densidade de pixels e o espaço que a imagem vai ocupar, então ele tem toda a informação para pegar a versão que dá nitidez sem excesso. Descrever ao navegador quais versões existem e em que condições cada uma serve é o que permite essa escolha automática, entregando a cada dispositivo exatamente o que ele precisa, nem mais nem menos.

Compressão: o ponto de equilíbrio#

A terceira alavanca é o nível de compressão. Nos formatos com perdas, é possível escolher quão agressivamente a informação é descartada, e existe um ponto de equilíbrio surpreendente: em boa parte da faixa, é possível reduzir bastante o tamanho antes que o olho humano perceba qualquer degradação. Comprimir uma foto até um nível moderado costuma cortar o peso pela metade ou mais sem diferença visível; só a partir de certo ponto os artefatos começam a aparecer.

O erro comum é exportar sempre na qualidade máxima, "para garantir", quando na verdade a diferença entre a qualidade máxima e uma qualidade alta-mas-comprimida é invisível na prática e custa muitos bytes. Encontrar o ponto em que a imagem ainda parece perfeita mas já foi comprimida ao máximo tolerável é onde mora grande parte da economia. Esse ponto varia com o conteúdo — imagens com muito detalhe fino toleram menos compressão que imagens com áreas suaves —, mas o princípio geral é que qualidade máxima quase nunca é necessária.

Carregamento: quando trazer cada imagem#

A quarta alavanca não muda o peso de cada imagem, mas muda quando cada uma é baixada, e isso afeta enormemente a velocidade percebida. Uma página costuma ter imagens que aparecem de imediato, na parte visível ao carregar, e imagens que só serão vistas se o usuário rolar. Baixar todas de uma vez, incluindo as que estão bem lá embaixo e talvez nunca sejam vistas, desperdiça banda e atrasa as que realmente importam agora.

O carregamento adiado resolve isso: as imagens fora da área visível só começam a baixar quando o usuário se aproxima delas ao rolar. Assim, a página inicial carrega rápido, trazendo só o que está à vista, e o resto vem sob demanda. O ganho é duplo — a primeira exibição fica mais leve e rápida, e banda não é gasta com o que o usuário não chega a ver.

A exceção importante do carregamento adiado#

Existe uma exceção que precisa ser respeitada: as imagens que aparecem imediatamente, na parte de cima da página, especialmente a imagem principal, não devem ser adiadas. Adiar a imagem mais importante da primeira tela é contraproducente, porque atrasa justamente o elemento que define a percepção de que a página carregou. A regra prática é adiar o que está fora da vista e priorizar o que está na vista, chegando a sinalizar ao navegador que a imagem principal é de alta prioridade para que ele a busque antes das outras. Confundir isso — adiar a imagem de destaque — é uma das causas mais comuns de uma página parecer lenta apesar de "usar carregamento adiado".

Reservando espaço para evitar saltos#

Um detalhe de qualidade que anda junto com imagens é reservar o espaço que elas vão ocupar antes de carregarem. Se o navegador não sabe as dimensões de uma imagem até ela baixar, ele não reserva lugar, e quando a imagem finalmente chega, o conteúdo ao redor é empurrado para acomodá-la, causando um salto visual desagradável — o texto que a pessoa estava lendo pula para baixo. Informar as dimensões da imagem de antemão permite ao navegador reservar exatamente o espaço certo desde o início, de modo que a imagem apareça sem deslocar nada. É uma correção simples que elimina um dos incômodos mais visíveis de páginas mal construídas.

Fechando#

Otimizar imagens é, no fundo, a disciplina de servir apenas o necessário: o formato certo para cada tipo de conteúdo, as dimensões exatas para cada contexto de exibição, a compressão máxima que ainda parece perfeita, e o carregamento no momento certo. Nenhuma dessas alavancas é complicada isoladamente, mas juntas elas transformam o item mais pesado de uma página no seu ponto mais leve.

O que torna esse trabalho tão recompensador é a relação entre esforço e resultado. Diferente de otimizações que exigem reestruturar código ou mudar arquitetura, boa parte do ganho com imagens vem de decisões conscientes que não custam qualidade visível ao usuário — ele vê a mesma imagem, só que ela chega muito mais rápido. Em um mundo em que a velocidade da página afeta diretamente a experiência, a retenção e até a descoberta pelos buscadores, tratar imagens com esse cuidado é uma das coisas de maior impacto que um desenvolvedor pode fazer. Não é preciso ser especialista em compressão; basta parar de servir mais pixels, mais bytes e mais imagens do que a situação realmente exige, e entregar a cada tela exatamente o que ela precisa para mostrar a imagem com perfeição.