Redimensionador de imagens

Redimensionar uma imagem é a forma mais eficaz de reduzir seu peso e a única de atender a uma exigência exata em pixels: uma prévia de 1200 × 630 para redes sociais, um ícone de 512 × 512, um banner de 1920 pixels. Esta ferramenta redimensiona até 20 imagens por vez, no seu navegador, para um tamanho preciso ou para uma porcentagem do original.

Como funciona

Arraste arquivos JPG, PNG ou WebP. Cada um é decodificado com createImageBitmap aplicando a flag de orientação EXIF, então uma foto em retrato tirada no celular é redimensionada do jeito que aparece, e não do jeito que foi gravada. Há dois modos:

• Tamanho exato recebe uma largura, uma altura ou as duas, em pixels. Com a proporção travada, basta informar uma dimensão para que a outra seja calculada a partir das proporções de cada imagem; se você informar as duas, vale a largura. Destravar permite definir as duas de forma independente, o que estica ou achata a imagem: às vezes é isso que você quer, mas geralmente não.
• Porcentagem aplica o mesmo fator de escala a todas as imagens, de 1% a 400%.

Quando a redução é maior que a metade, a imagem é reduzida pela metade em etapas antes da reamostragem final; uma única redução grande pula pixels demais da origem e deixa bordas serrilhadas. Por padrão, o resultado é codificado no formato de origem, ou em JPEG, PNG ou WebP, se você escolher. A saída em JPEG usa qualidade fixa de 92% e achata a transparência sobre fundo branco. Os arquivos são baixados como name-resized.jpg, .png ou .webp.

As imagens são processadas uma após a outra, e não em paralelo, porque decodificar várias fotos grandes ao mesmo tempo pode esgotar a memória de um celular. Os metadados não são preservados: a saída são pixels novos, sem EXIF, dados de GPS ou perfil de cor. SVG não é aceito, já que uma imagem vetorial não tem um tamanho fixo em pixels para ser alterado.

Ampliando

Escalar acima de 100% não acrescenta detalhes. O navegador interpola entre os pixels existentes, então uma foto de 400 × 300 ampliada para 1600 × 1200 é uma versão menos nítida e um pouco borrada da pequena. Ampliar é útil para cumprir uma exigência de dimensão mínima ou para pixel art (que precisa de um filtro de vizinho mais próximo que esta ferramenta não oferece), mas uma imagem para impressão ou para o banner principal deve vir de um original maior. Se não houver um, faça uma ampliação modesta: 150% costuma ser tolerável; 400%, raramente.

Escolhendo as dimensões

Use como referência o maior tamanho em que a imagem será exibida, levando em conta as telas de alta densidade. Uma coluna de 600 pixels de largura em uma tela 2× precisa de uma imagem de 1200 pixels para ficar nítida, e não mais do que isso. Tamanhos comuns:

Para um espaço de proporção fixa como 1200 × 630, só redimensionar não encaixa uma imagem de outra proporção; destrave a proporção apenas se uma leve distorção for aceitável e, caso contrário, recorte antes em um editor.

Equivalente na linha de comando

A opção -resize do ImageMagick aceita o mesmo tipo de especificação, e o sufixo > só reduz as imagens maiores que o tamanho-alvo:

convert photo.jpg -auto-orient -resize 1600x photo-resized.jpg     # width, keep ratio
convert photo.jpg -auto-orient -resize '1200x630!' preview.jpg     # exact, ignore ratio
mogrify -auto-orient -resize '50%' *.png                           # in place, by percent

Para saber mais

Como servir tamanhos diferentes para telas diferentes com srcset e <picture>, e como desenhar imagens redimensionadas em um canvas, é explicado em fundamentos de HTML5. Com as dimensões certas, o compressor de imagens controla o tamanho do arquivo com um controle deslizante de qualidade ou uma meta em KB, e o conversor de imagem para PDF transforma um conjunto de páginas redimensionadas em um único documento.