Como redimensionar e recortar imagens para a web

Redimensionar e recortar soam como a mesma coisa, mas resolvem problemas diferentes — e usá-los bem costuma ser um ganho de velocidade maior do que só a compressão. Este guia explica a diferença, por que imagens grandes demais prejudicam e como dimensionar imagens corretamente para a web.

Redimensionar vs. recortar

• Redimensionar (Resizing) muda as dimensões da imagem inteira, mantendo tudo — você a escala para cima ou para baixo.
• Recortar (Cropping) corta parte da imagem para manter só uma região — você muda o que está no enquadramento, não apenas o tamanho.

Uma foto de perfil é um bom exemplo: você recorta um quadrado ao redor do rosto e depois redimensiona esse quadrado até o tamanho de exibição.

Por que imagens grandes demais deixam as páginas lentas

Uma foto recém-saída de um celular pode ter 4.000 pixels de largura. Se for exibida numa coluna de 800 pixels, o navegador baixa cinco vezes mais pixels do que jamais poderá mostrar, e depois os encolhe na hora. É banda desperdiçada e uma página mais lenta em troca de zero benefício visual. Redimensionar a imagem para aproximadamente o tamanho em que é exibida costuma ser a maior economia de tamanho de arquivo disponível — muitas vezes mais que a compressão.

Mantenha a proporção

A proporção (aspect ratio) é a razão entre largura e altura. Redimensione as duas dimensões pelo mesmo fator e a imagem fica sem distorção; mude só uma e ela estica ou achata. A maioria das ferramentas “trava” a proporção por padrão — deixe travada a menos que queira distorcer de propósito. Se você precisa de um formato diferente (digamos, um banner largo a partir de uma foto alta), recorte para a nova proporção em vez de esticar.

Que tamanho as imagens devem ter?

• Combine a largura da imagem com o espaço que ela preenche — meça o contêiner.
• Para exibição nítida em telas de alta densidade (Retina), exporte com cerca de 2× o tamanho de exibição e depois comprima.
• Não amplie — aumentar uma imagem pequena só adiciona borrão; ela não consegue inventar detalhe.

Juntando tudo

Uma boa ordem de operações é recortar → redimensionar → comprimir. O redimensionador de imagens faz recorte e redimensionamento numa passada com a proporção travada, e depois passa para o compressor de imagens para baixar o tamanho do arquivo. Leia o guia de compressão para saber até onde forçar a qualidade, e os formatos de imagem explicados para escolher primeiro o formato certo.