Redimensionar GIF

Mude as dimensões de um GIF animado digitando pixels exatos ou uma porcentagem, sem perder a animação.

1. 1

   Adicione seu GIF

   Arraste um GIF animado para a área de soltura ou clique para procurar. WebP animado e APNG também funcionam. O arquivo é lido no seu dispositivo e nunca é enviado.

2. 2

   Defina o tamanho

   Digite uma largura, uma altura ou ambas — com a trava de proporção ligada, preencher uma preenche a outra. Uma porcentagem também vale, e passar de 100% amplia em vez de ser ignorado.

3. 3

   Escolha como tratar uma forma diferente

   Se a sua caixa de destino tem outras proporções, escolha ajustar, esticar, cortar ou preencher. Ajustar é o padrão seguro: nada é distorcido nem cortado.

4. 4

   Baixe o GIF redimensionado

   Toque em Baixar. O atraso de cada quadro, a contagem de loops e a transparência saem inalterados, então a animação reproduz exatamente como antes.

Um GIF chega no tamanho em que foi feito, e esse tamanho raramente é o que você precisa. Uma gravação de tela capturada com 1920 pixels de largura é inútil como anexo de e-mail e ilegível como emoji de 128 pixels. Um GIF de reação puxado de um celular tem 480 de largura quando a coluna de documentação tem 700. E, diferente de uma fotografia, não dá para simplesmente deixar o navegador redimensionar: um GIF exibido menor que o tamanho natural ainda baixa todos os seus pixels em tamanho cheio, então quem lê paga por uma resolução que nunca vê.

Digite dimensões exatas ou uma porcentagem, amplie tanto quanto reduz, e mude para o modo Pixel para manter as bordas do sprite nítidas.

Lê GIF, WebP animado e APNG. Escreve um GIF89a padrão preservando os atrasos por quadro, a contagem de loops e a transparência.

O que mudar as dimensões realmente entrega

• Bytes, em quantidade. Cortar largura e altura pela metade remove cerca de três quartos dos dados de pixel. É a redução de tamanho mais barata que existe, porque não custa nada do movimento.
• Um espaço que serve. Casas de emoji, molduras de avatar e colunas de documentação têm larguras fixas. O que não cabe é cortado pelas regras de outro ou escalado pelo algoritmo de outro.
• Legibilidade. Texto dentro de uma gravação de tela ou é legível no tamanho de exibição ou é decoração. Redimensionar de propósito é como descobrir isso antes de publicar.
• Sprites que continuam nítidos. Pixel art ampliado com suavização fica arruinado e irrecuperável. Ampliado com vizinho mais próximo fica perfeito em qualquer múltiplo inteiro.

Uma imagem parada tem um raster. Um GIF animado tem uma pilha deles, cada um possivelmente cobrindo só parte da tela, cada um com seu atraso, sua paleta e sua máscara de transparência. Redimensionar um corretamente significa compor cada quadro sobre a tela inteira primeiro, escalar isso e então reconstruir uma paleta para toda a animação em vez de uma por quadro. Ferramentas que pulam a composição produzem saídas que pulam, porque um quadro que era legalmente um retalho de 30 pixels deslocado acaba escalado como se fosse a imagem toda.

O que acontece com cada quadro

• Compor. Cada quadro é desenhado sobre uma tela do tamanho lógico da animação, respeitando seu deslocamento, seu método de descarte e sua transparência, então o que é escalado é a imagem que alguém realmente veria.
• Escalar. Um desenho por quadro no tamanho alvo, no seu hardware gráfico onde ele existe. Suavização ligada para material fotográfico, desligada para pixel art.
• Requantizar. Uma paleta é construída a partir de uma amostra espalhada por toda a animação, não do primeiro quadro, e cada pixel é mapeado para ela.
• Reotimizar. Regiões inalteradas entre quadros são marcadas como transparentes de novo no novo tamanho, e é para lá que vai a maior parte do peso.

O que um redimensionador não deve mudar

Três coisas precisam sair exatamente como entraram: o atraso próprio de cada quadro, a contagem de loops e quais pixels são transparentes. Uma ferramenta que retemporiza ao redimensionar produz um GIF perfeitamente válido que simplesmente roda na velocidade errada, e uma que achata a transparência devolve uma imagem com uma caixa branca em volta. As duas coisas são conferidas aqui a cada execução em vez de presumidas.

Todo redimensionador suaviza por padrão, e para fotografias isso está certo: interpolar entre pixels vizinhos é o que impede que uma foto escalada pareça um mosaico. Para pixel art é destrutivo de um jeito que nada reverte. Um contorno preto de um pixel num sprite, ampliado quatro vezes com suavização, vira um gradiente cinza de quatro pixels; a borda nítida sumiu e nenhuma nitidez a traz de volta. O vizinho mais próximo simplesmente repete cada pixel de origem, então uma ampliação de 4× transforma cada pixel num bloco limpo de 4×4. Medido no sprite de teste desta ferramenta, escalado de 64 para 256: suavizar produziu 94 cores distintas na linha do meio, o vizinho mais próximo produziu exatamente 8 — o número que a origem de fato contém.

Resultados medidos

• Vizinho mais próximo contra suavização 8 cores distintas numa linha contra 94, numa origem que contém 8. O modo é a diferença entre preservar a arte e tirar a média dela.
• Precisão da reamostragem O modo suave difere do lanczos3 do libvips em 3,31/255 na média — duas implementações independentes concordando.
• Preenchimento transparente contra sólido 49.167 B contra 13.961 B para a mesma imagem. O preenchimento transparente custa a otimização entre quadros, que vale 3,5× aqui.
• Velocidade 100 quadros de 480×270 para 960×540 em 1.149 ms; o mesmo clipe para 240×135 em 112 ms.

O erro mais comum é redimensionar para um número que soa redondo em vez do que o destino usa. Antes de digitar qualquer coisa, descubra em que tamanho o destino realmente renderiza — uma coluna de documentação, uma casa de emoji, a largura embutida de um cliente de chat — e acerte exatamente. Redimensionar para 500 quando a coluna tem 700 faz o navegador escalar de volta e desfaz o trabalho; redimensionar para 1400 numa coluna de 700 dobra o download por uma diferença que só uma tela de alta densidade mostra, e mesmo assim só se a origem tivesse o detalhe.

Por material

• Gravações de tela com texto. Não desça abaixo do tamanho em que o texto é legível: olhe a prévia, não o número. Aqui a suavização é o certo; o texto já é suavizado.
• Pixel art e sprites. Mude para Pixel e use múltiplos inteiros: 2×, 3×, 4×. Uma escala não inteira de pixel art produz blocos desiguais mesmo com vizinho mais próximo, porque alguns pixels de origem caem em dois de saída e outros em três.
• Material vindo de vídeo. Suavização, e reduzir em vez de ampliar. Ampliar quadros vindos de vídeo revela os artefatos de compressão que eram invisíveis no tamanho original.
• Qualquer coisa indo para um quadrado fixo. Cortar, não Preencher. Um quadrado preenchido tem faixas vazias visíveis; um cortado ocupa a casa como todas as outras imagens.

• Emoji personalizados. Discord e Slack aceitam 128×128 e recusam quase tudo acima de 256 KB — então esta ferramenta e o compressor costumam ser usados juntos.
• Documentação e arquivos README. Acerte a largura renderizada da coluna para que o navegador não escale nada por conta própria.
• Assinaturas de e-mail. Dimensões pequenas são a única forma confiável de deixar uma animação abaixo do que a maioria dos servidores aceita.
• Avatares e imagens de perfil. Quadrados, cortados e pequenos o bastante para carregar antes de a página terminar de desenhar.

Tamanhos que vale memorizar

Emoji personalizados de Discord e Slack são 128×128. O X renderiza imagens embutidas com até 506 pixels de largura. A coluna de um README no GitHub tem 768 na largura total e cerca de 700 na prática. A maioria dos temas de documentação fica entre 680 e 760. Tudo mais largo que a coluna onde aterrissa são bytes que o leitor baixa e nunca vê.

A lista de entrada é fechada e aplicada na caixa de diálogo de arquivos, não no motor: um arquivo que esta ferramenta não sabe abrir é recusado em milissegundos com um caminho para a ferramenta que sabe, em vez de ser aceito e falhar depois atrás de um indicador de carregamento.

• Entra GIF. Animado ou de quadro único, entrelaçado ou não, com paleta global ou uma paleta local diferente em cada quadro. Quadros que são sub-retângulos deslocados são compostos sobre a tela inteira antes de qualquer escalonamento.
• Entram WebP animado e APNG. Ambos são lidos pelos nossos próprios demultiplexadores em todo navegador, então quadros e tempo ficam idênticos em toda parte.
• Sai GIF, sempre. Um GIF89a padrão com tabela de cores global, atrasos por quadro, métodos de descarte e extensão de loop da Netscape.
• Qualquer outra coisa é recusada com um caminho. Um vídeo vai para Vídeo para GIF; uma imagem parada, para o Criador de GIF.

O que a ferramenta lê

O GIF é decodificado nativamente onde o navegador tem um decodificador e pelo nosso próprio leitor em todo o resto, então uma animação abre do mesmo jeito em qualquer navegador em vez de chegar como o primeiro quadro. WebP animado e APNG sempre passam pelo nosso leitor, que é o que mantém contagem de quadros e tempo idênticos entre motores.

Limites de tamanho e de lote

• Gratuito. Um arquivo de até 50 MB e até 300 quadros, saída de até 2048 pixels no lado maior. Em qualidade total: o plano gratuito não é um redimensionamento de qualidade menor, é de um arquivo só.
• Pro. Até 20 arquivos de uma vez, baixados como um único ZIP, sem limite de dimensão imposto. O lote é o que o Pro compra aqui, porque redimensionar um conjunto de emoji ou uma pasta de clipes um por um é o trabalho chato de verdade.
• O limite comum aos dois planos. Cada quadro é expandido para cor completa enquanto é trabalhado, então um orçamento de memória limita o trabalho antes de começar, em vez de deixar a aba parar de responder enquanto o indicador continua girando.

Nada é enviado. O arquivo é decodificado quadro a quadro na sua máquina, cada quadro é composto e escalado, uma paleta é construída para toda a animação, regiões inalteradas são marcadas como transparentes de novo, e o resultado é escrito como um GIF89a padrão. Tudo roda numa thread de segundo plano para a página continuar respondendo, e o próprio escalonamento roda no seu hardware gráfico onde ele existe.

Por que o mesmo arquivo redimensiona igual toda vez

• Um quantizador determinístico. Corte mediano, não o quantizador neural aleatorizado que a maioria das bibliotecas de GIF usa, então a mesma entrada com os mesmos ajustes sempre produz saída idêntica byte a byte.
• Resultados idênticos em todos os caminhos. Os caminhos acelerado por gráficos e por processador precisam produzir os mesmos bytes, não apenas parecidos — um caminho escolhendo outra entrada de paleta apareceria como cintilação de cor entre quadros.
• Geometria conferida por outra implementação. A reamostragem suave é verificada contra o libvips, uma biblioteca de imagem completamente separada, e não contra nossa própria saída anterior.

O escalonamento é acelerado por hardware onde seu dispositivo permite, e os caminhos acelerado e de reserva são verificados como produzindo bytes idênticos. A reamostragem suave é conferida contra uma biblioteca de imagem independente. Medido na máquina de referência: 100 quadros de 480×270 para 960×540 em 1.149 ms. Tudo roda no seu dispositivo, não nos nossos servidores.

• Compressor de GIF
• Criador de GIF
• Vídeo para GIF
• GIF para MP4
• Editor de GIF
• Todas as ferramentas GIF