Cortar GIF

Reduza um GIF animado à parte que você quer, sem transformá-lo numa imagem parada nem mudar a velocidade com que ele roda.

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 a caixa de corte

   Arraste um retângulo sobre a imagem, puxe qualquer uma das oito alças ou digite valores exatos de esquerda, topo, largura e altura. Escolha uma proporção antes se o resultado precisa caber num espaço fixo.

3. 3

   Veja o que se move

   Toque em Mostrar área de ação. Um contorno tracejado aparece em volta de tudo que muda ao longo de toda a animação, então você vê se a sua caixa cortaria o motivo num quadro que não está à vista.

4. 4

   Corte e baixe

   Toque em Cortar e depois em Baixar. O atraso de cada quadro, a contagem de loops e qualquer transparência saem inalterados, então a animação reproduz exatamente como antes — só que menor.

Quase todo GIF chega com alguma coisa que você não queria. Uma gravação de tela captura a janela inteira quando a parte interessante é um painel só. Um clipe puxado de um vídeo traz faixas pretas em cima e embaixo porque a origem era widescreen e a exportação não era. Um GIF de reação tem uma marca d'água no canto, ou trinta pixels de papel de parede da área de trabalho de um lado. Cortar é o que faz o arquivo deixar de ser uma gravação e passar a ser aquilo que você queria mostrar — e, ao contrário do redimensionamento, não custa nada em qualidade, porque os pixels que sobrevivem são os pixels que entraram.

Arraste um retângulo ou digite coordenadas exatas, apare bordas sólidas e transparentes num toque, e veja onde a animação se move antes de cortar.

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 cortar as bordas realmente entrega

• Atenção. Uma gravação de tela de 1200 pixels exibida numa coluna de 700 mostra ao leitor tudo pela metade do tamanho. Cortar para o painel que importa mostra a ele uma coisa em tamanho cheio.
• Bytes, na proporção. O peso do arquivo acompanha de perto a contagem de pixels no GIF. Manter metade do quadro remove aproximadamente metade dos dados e, diferente de reduzir a paleta, não remove nada que você possa ver.
• Um espaço que serve. Casas de emoji, molduras de avatar e feeds sociais têm formas fixas. Cortar para a forma é a diferença entre ocupar o espaço e ficar com faixas em volta pelas regras de outra pessoa.
• Seja lá o que houver no canto. Um cursor, uma barra de tarefas, uma notificação, uma marca d'água, uma faixa de outro aplicativo. Cortar é a única edição que remove tudo isso por completo em vez de encobrir.

Cortar uma imagem parada são quatro números e uma cópia. Um GIF animado é uma pilha de quadros, e o formato torna falsa quase toda suposição que a gente gostaria de fazer sobre eles. Um quadro não tem necessariamente o tamanho da animação: ele pode legalmente ser um retângulo menor deslocado, guardando apenas a região que mudou desde o anterior. Cada quadro carrega um método de descarte dizendo o que fazer com o quadro anterior antes de desenhá-lo — deixar como está, restaurar o fundo, ou restaurar o que havia antes. Cada um pode declarar sua própria cor transparente, e cada um pode trazer sua própria paleta. Um cortador que trata os quadros guardados como imagens e os recorta onde o usuário apontou produz uma saída que pisca, deixa fantasmas, ou perde quadros por completo.

O que acontece com cada quadro aqui

• 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 é cortado é a imagem que alguém realmente veria, e não o fragmento que o arquivo por acaso guardou.
• Cortar, uma vez. O retângulo de corte, o recorte oval se você escolheu um, e o tamanho de saída são aplicados num único desenho no seu hardware gráfico. Cortar e escalar são a mesma operação para uma pipeline gráfica, então pedir os dois não custa mais do que pedir um.
• Requantizar. Uma paleta é construída a partir de uma amostra espalhada por toda a animação, não do primeiro quadro, e então cada pixel é mapeado para ela. Construí-la quadro a quadro é o que faz as cores mudarem visivelmente entre quadros em outras ferramentas.
• Reotimizar. Regiões inalteradas entre quadros são marcadas como transparentes de novo no novo tamanho. É daí que vem a maior parte do peso de um GIF, e é isso que impede que um corte aumente o arquivo.

O problema da cintilação, e por que não existe um ajuste para ele

O cortador de GIF mais conhecido da web oferece três motores de corte diferentes e uma página de ajuda explicando que o padrão rápido quebra animações que usam diferença entre quadros, que o mais lento funciona mas remove toda a otimização e produz arquivos maiores, e que o terceiro tem qualidade pior porque não suaviza as bordas. São três maneiras de estar errado apresentadas como uma escolha. O passo de composição acima elimina a pergunta: não há caminho nesta ferramenta que recorte um fragmento guardado em vez do quadro composto, então não há nada para alternar e nenhuma configuração capaz de produzir um fantasma.

Dois dos controles daqui vêm da mesma medição. Toque em qualquer um deles e a ferramenta decodifica a animação uma vez e responde duas perguntas sobre ela: onde está o conteúdo e onde está o movimento. As duas respostas são calculadas em todos os quadros, nunca a partir do primeiro, e essa distinção é o ponto inteiro.

• A caixa de conteúdo. O fundo é lido dos quatro cantos do primeiro quadro — uma cor sólida ou transparência — e a caixa de conteúdo é o retângulo mais justo que contém tudo que não é esse fundo, unido ao longo de todos os quadros. Aparar bordas define o seu corte para ela.
• A caixa de ação. O retângulo mais justo que contém todo pixel que muda de um quadro para o seguinte. Mostrar área de ação a desenha como um contorno tracejado sobre a imagem, e a ferramenta avisa se o seu corte entraria nela.
• A tolerância. O quão perto da cor de fundo ainda conta como fundo. Zero significa correspondência exata, o que é certo para uma cor uniforme e errado para qualquer coisa vinda de vídeo, onde as faixas variam alguns níveis. Aumente até o contorno encaixar na imagem.

Por que a união entre quadros é a única resposta correta

Imagine uma animação de um pontinho viajando da esquerda para a direita por um campo vazio. No primeiro quadro o conteúdo é um quadrado de dez pixels perto da borda esquerda. Apare para isso e você recebe um GIF de dez pixels de um ponto que sai da imagem imediatamente — um resultado arrumadinho, um download que funciona e completamente errado. O conteúdo da ANIMAÇÃO é a união do conteúdo de todos os quadros, que nesse exemplo tem cento e sessenta pixels de largura. Esta ferramenta mede essa união, e isso é conferido contra uma implementação independente que varre cada pixel de cada quadro sem atalhos, exatamente nesse caso de teste.

O erro mais comum é cortar pelo que parece certo no quadro que está na tela naquele momento. Uma animação não é uma imagem, e o quadro que você por acaso está olhando não é representativo dela — é para isso que serve a sobreposição da área de ação. O segundo mais comum é cortar para um número que soa redondo em vez do que o destino usa. Descubra em que tamanho o alvo renderiza antes de digitar qualquer coisa.

Por material

• Gravações de tela. Corte para o painel, não para a janela. Deixe alguns pixels de margem em volta de qualquer coisa com borda, ou a borda vai parecer um defeito de renderização em vez de parte da interface.
• Clipes vindos de vídeo. Toque em Aparar bordas com a tolerância entre 8 e 16. Faixas de letterbox de uma exportação de vídeo quase nunca são preto puro, então tolerância zero as deixa lá.
• Pixel art e sprites. Corte em múltiplos exatos da grade do sprite e, se também escalar, use múltiplos inteiros com o modo de reamostragem Pixel. Uma escala não inteira de pixel art dá blocos desiguais mesmo com vizinho mais próximo.
• Qualquer coisa com um motivo em movimento. Mostre a área de ação primeiro e garanta que a sua caixa a contenha. Se não der, o motivo sai do quadro já na origem, e cortar não conserta isso — apare a animação no tempo em vez disso.

As proporções, e para que servem

Quadrado é para emoji, avatares e qualquer coisa que vá para uma grade. 4:3 e 3:2 combinam com capturas de tela mais antigas e com material de câmera. 2:1 é o formato largo de banner, e a proporção áurea está aí porque o cortador mais conhecido desta categoria a oferece e as pessoas pedem por ela pelo nome. 16:9 é a forma de quase toda origem de vídeo, então é o que você quer quando cortou um clipe e precisa que ele continue sendo lido como clipe. 9:16 é o retrato de tela cheia usado por Stories, Reels e Shorts, e 4:5 é a forma mais alta que uma publicação de feed do Instagram exibe sem cortar por conta própria. Original trava no que o arquivo já é, que é a escolha certa quando você está removendo uma borda e quer que o resultado mantenha as proporções.

Cortar em oval

Defina a forma como Oval e o corte mantém a maior elipse que cabe dentro do seu retângulo, limpando os quatro cantos para transparência ou para uma cor que você escolher. É o mesmo desenho único — o oval é um recorte sobre a operação que já estava acontecendo, não uma segunda passagem — então o tempo, a contagem de repetições e a contagem de quadros ficam tão intocados quanto ficariam com um retângulo. Uma limitação honesta, e ela pertence ao formato e não a esta ferramenta: um GIF guarda a transparência como uma única casa de paleta, não como um canal alfa, então a borda do oval é dura. Um pixel está dentro ou fora, sem suavização, e é por isso que um oval sobre um fundo movimentado fica melhor com uma cor sólida ao redor do que com transparência.

• Documentação e arquivos README. Corte a gravação para o controle que está sendo demonstrado. Quem segue as instruções não precisa ver o resto da janela, e cada pixel dele são bytes que a pessoa baixa.
• Emoji personalizados. Quadrado, cortado justo no motivo e então escalado para 128 por 128 na mesma passagem. Discord e Slack usam esse tamanho para emoji personalizados.
• Relatos de bug e tíquetes de suporte. Cortar também é tarjar: um corte remove fisicamente o que estava no canto, enquanto um borrão ou uma caixa preta deixa aquilo dentro do arquivo.
• Publicações em redes sociais. Feeds colocam faixas em volta de tudo que não tem a forma deles. Cortar para 9:16 ou 4:5 antes é como a animação ocupa o espaço em vez de ficar numa tarja cinza.

Tamanhos e formas que vale memorizar

Emoji personalizados de Discord e Slack são 128 por 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, e a maioria dos temas de documentação fica entre 680 e 760. Publicações de feed do Instagram são exibidas com 1080 de largura e aceitam 1:1, 4:5 e 1,91:1; Stories e Reels são 9:16. 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 corte.
• Entram WebP animado e APNG. Ambos são lidos pelos nossos próprios demultiplexadores em todo navegador, e não por um decodificador nativo, 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 uma extensão de loop da Netscape carregando a contagem de loops da própria origem.
• Qualquer outra coisa é recusada com um caminho. Um vídeo vai para Vídeo para GIF; uma imagem parada, para o Criador de GIF. Nenhum dos dois é descrito como um erro com o seu arquivo, porque não é.

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 lugar 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. Um detalhe que vale nomear: o decodificador nativo informa a contagem de repetições de um GIF de loop infinito como infinito, que não é um número que um arquivo GIF possa guardar — isso é traduzido de volta para zero, a codificação do próprio formato para sempre, em vez de ser escrito como o que quer que a aritmética tenha produzido.

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, e com todos os controles desta página — o plano gratuito não é um corte de qualidade menor, é um corte 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 cortar uma pasta de capturas uma por uma é 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 cortado, 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 corte roda no seu hardware gráfico onde ele existe.

Por que o mesmo arquivo corta 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. O corte é comparado pixel a pixel com o libvips recortando o mesmo retângulo do mesmo arquivo, e a detecção de bordas com uma varredura separada que lê cada pixel de cada quadro.

O que um cortador não deve mudar

Quatro coisas precisam sair exatamente como entraram: o atraso próprio de cada quadro, o tempo total de reprodução, a contagem de loops e quais pixels são transparentes. Uma ferramenta que retemporiza a animação ao cortá-la produz um GIF perfeitamente válido que simplesmente roda na velocidade errada; uma que achata a transparência devolve uma imagem com uma caixa branca em volta; uma que assume um valor padrão para a contagem de loops transforma uma animação de três voltas numa infinita. As quatro são medidas aqui a cada execução em vez de presumidas, e os números aparecem na linha de resultado para você conferir.

Resultados medidos

• Precisão do corte Zero. A maior diferença por canal entre o nosso corte e o libvips recortando o mesmo retângulo é 0 em 255 — um corte não reamostra nada, então isso é uma igualdade e não uma tolerância.
• Detecção de bordas Exata num caso de teste de 160 por 120 com margem de 40 por 30: 40, 30, 80 por 60, coincidindo com uma varredura independente de todos os pixels.
• A união entre quadros 160 pixels de largura contra os 10 que uma varredura de um único quadro daria, num caso de teste com ponto em movimento — a diferença entre um corte correto e um confiantemente errado.
• Velocidade 100 quadros de 480×270 cortados para 400×200 em 145 ms; a análise de toda a animação no mesmo arquivo em 68 ms.

O corte é acelerado por hardware onde seu dispositivo permite, e os caminhos acelerado e de reserva são verificados como produzindo bytes idênticos. O corte em si é conferido pixel a pixel contra uma biblioteca de imagem independente. Medido na máquina de referência: 100 quadros de 480×270 cortados em 145 ms. Tudo roda no seu dispositivo, não nos nossos servidores.

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