Redimensionar imagens, altera o tamanho de fotos online
Redimensiona imagens por largura, altura ou percentagem, bloqueia a proporção e escolhe um modo de ajuste. 100 % no teu navegador, sem envios.
A carregar Redimensionar imagens, altera o tamanho de fotos online… Se nada acontecer, ativa o JavaScript.
Redimensionar uma imagem significa alterar o número de píxeis que compõem a sua largura e a sua altura, o que por sua vez afeta tanto o tamanho do ficheiro como a forma como a imagem é apresentada no ecrã. A resolução de uma imagem digital mede-se em megapíxeis: uma imagem de 4000 × 3000 contém 12 milhões de píxeis. Reduzir para metade ambas as dimensões, para 2000 × 1500, baixa a contagem de píxeis para 3 milhões, cortando os dados brutos em 75 %. Compreender a diferença entre as dimensões intrínsecas em píxeis de uma imagem e o tamanho em CSS com que um navegador a apresenta é essencial para o desempenho web: uma imagem com 4000 px de largura mostrada num contentor de 400 px obriga o navegador a transferir dez vezes mais dados do que o necessário.
Perguntas frequentes
As minhas imagens são enviadas para algum servidor?
O que é a proporção e porque é que a devo bloquear?
Qual é a diferença entre os modos de ajuste Conter, Cobrir e Esticar?
Posso redimensionar uma imagem por percentagem em vez de píxeis fixos?
Que formatos são suportados como entrada e como saída?
Existe uma resolução ou um tamanho de ficheiro máximos?
Porque é que devo servir vários tamanhos de imagem num site?
O redimensionamento afeta a qualidade da imagem?
O que significa megapíxel e porque é que importa?
Como é que o redimensionamento no navegador se compara com o Photoshop ou outras ferramentas de ambiente de trabalho?
Sobre Redimensionar imagens, altera o tamanho de fotos online
Programadores web, designers gráficos, gestores de redes sociais e bloguers redimensionam imagens diariamente. Um design web adaptável costuma exigir a mesma fotografia em três ou quatro larguras diferentes: um original em resolução total para monitores grandes, uma variante média para tablets e uma miniatura compacta para o telemóvel, servidos através do atributo HTML srcset para que os navegadores transfiram apenas o tamanho de que precisam. As plataformas de comércio eletrónico precisam de dimensões de miniatura uniformes para as grelhas de produtos. Quem faz marketing por correio eletrónico tem de manter as imagens abaixo de limites de tamanho rígidos. Os fluxos de trabalho de impressão exigem alvos específicos de DPI e milímetros. O simples ato de redimensionar para as dimensões certas antes de carregar pode poupar gigabytes de armazenamento e acelerar imenso o carregamento das páginas.
Esta ferramenta executa cada operação de redimensionamento localmente no teu navegador através da HTML Canvas API, por isso as tuas imagens nunca saem do teu dispositivo. Podes indicar uma largura exata, uma altura exata ou uma percentagem das dimensões originais. Ativar o bloqueio da proporção garante que a imagem nunca é esticada nem comprimida. Três modos de ajuste dão-te um controlo preciso: Conter dimensiona a imagem para que caiba inteira dentro da caixa alvo (a tela é preenchida se necessário), Cobrir preenche a caixa e recorta o excesso pelas margens, e Esticar força a imagem para as dimensões exatas sem ter em conta a proporção. O resultado fica disponível para transferência em PNG, JPEG ou WebP com a qualidade que escolheres.
Algumas dicas para obteres os melhores resultados: bloqueia sempre a proporção, a não ser que precises especificamente de uma saída distorcida. Ao gerar miniaturas para um site, procura o tamanho de apresentação exato em vez de confiares no CSS para reduzir a imagem, porque servir imagens com o tamanho correto é uma das melhorias mais rápidas numa auditoria de desempenho do Lighthouse. Se precisares de produzir vários tamanhos da mesma imagem, redimensiona primeiro para o maior e depois reduz essa saída para os tamanhos mais pequenos, pois assim preservas mais detalhe do que reduzindo repetidamente a partir do original. Para ecrãs Retina e de alta densidade, produz imagens ao dobro (2×) do tamanho de apresentação em CSS para garantir uma apresentação nítida.
Píxeis, megapíxeis e o longo caminho até às imagens adaptáveis
A palavra "píxel" é uma contração de "picture element" (elemento de imagem) e foi criada no final da década de 1960 por engenheiros do Jet Propulsion Laboratory da NASA, que precisavam de um termo para descrever as células individuais das imagens digitalizadas devolvidas pelas sondas espaciais. A primeira câmara digital de consumo capaz de captar um megapíxel completo foi a Kodak DCS 100, lançada em 1991 a um preço de cerca de 13 000 dólares; guardava as imagens numa unidade de disco rígido independente, usada ao ombro com uma correia. Por volta de 2010, os smartphones económicos já vinham com câmaras de 5 megapíxeis, e por volta de 2023 os modelos de topo ultrapassavam habitualmente os 200 megapíxeis, criando um paradoxo em que as câmaras nos nossos bolsos produzem imagens muito maiores do que qualquer ecrã consegue mostrar.
O conceito de imagens adaptáveis, servir tamanhos de imagem diferentes a dispositivos diferentes, é décadas anterior à web moderna. Os primeiros engenheiros de difusão televisiva enfrentaram um problema análogo ao conceberem sistemas que tinham de funcionar em ecrãs que iam de minúsculos televisores portáteis a grandes consolas de sala. Na web, o problema agudizou-se por volta de 2010, quando a Apple apresentou o ecrã Retina, que duplicou a densidade de píxeis do ecrã do iPhone 4. De repente, os programadores tinham de servir imagens ao dobro da resolução para esses dispositivos ou aceitar fotos desfocadas, sem ao mesmo tempo penalizar os utilizadores de ecrãs normais com transferências desnecessariamente grandes. Essa tensão impulsionou a criação do atributo HTML srcset, padronizado em 2014, e do elemento picture, ambos para que os navegadores selecionem automaticamente o tamanho de imagem mais adequado.
Antes de existir o zoom digital, o zoom ótico nas câmaras era conseguido movendo fisicamente os elementos da lente, o mesmo princípio que os fabricantes de telescópios usavam desde o século XVII. Os algoritmos de redimensionamento digital, por outro lado, são fruto da matemática do processamento de sinais desenvolvida no século XX. O método de interpolação bilinear usado hoje pela maioria dos navegadores foi descrito num artigo de 1975, enquanto a interpolação bicúbica, preferida pelos editores de imagem profissionais, foi introduzida por Robert Keys em 1981. As modernas ferramentas de ampliação baseadas em IA usam redes neuronais convolucionais treinadas com milhões de pares de imagens para "inventar" detalhe plausível ao ampliar imagens, produzindo resultados que os métodos matemáticos mais antigos simplesmente não conseguem igualar.