CodeKitHubO que é esta ferramenta?
Um divisor de imagens separa uma única imagem de origem em uma grade de blocos menores de tamanho igual, mais comumente para a tendência de "layout em grade" do Instagram, em que uma única foto larga ou ilustração é publicada como uma sequência de imagens quadradas individuais que se recompõem no original quando vistas juntas na grade do perfil.
A técnica em si é geometria simples — a largura e a altura da imagem de origem são divididas pelo número de colunas e linhas, e cada retângulo resultante é recortado como um arquivo próprio — mas fazer isso com precisão manualmente em um editor de fotos genérico é trabalhoso e sujeito a erros, especialmente para uma grade 3x3 ou maior, onde um pequeno desalinhamento em um bloco desorganiza toda a sequência.
Esta ferramenta calcula os limites da grade com precisão a partir das dimensões reais em pixels da imagem e renderiza cada bloco usando a API Canvas do HTML5 inteiramente no seu navegador, então cada bloco se encaixa exatamente e a imagem em si nunca precisa sair do seu dispositivo.
Por que usar?
- Você caprichou numa ilustração e quer publicá-la no efeito de grade do Instagram, mas já teve a experiência de cortar manualmente em 9 partes num editor de fotos e um bloco sair alguns pixels torto, deixando as costuras da grade tortas — esta ferramenta divide com precisão de pixel, evitando esse erro.
- Quer publicar uma foto panorâmica larga como um carrossel de posts sequenciais, mas não confia no olho para decidir onde cortar — basta escolher a grade 1x4 ou 1x3 que os pontos de corte ficam automaticamente uniformes.
- Recortar e salvar nove blocos um por um é tão chato que você sempre desiste no meio do caminho — o botão "Baixar tudo (ZIP)" entrega os nove arquivos numerados de uma vez só.
- Quer conferir como vai ficar na grade antes de publicar de fato — a pré-visualização no navegador mostra os blocos antes do download, então dá pra perceber se um rosto ficou cortado num ponto estranho.
- Quer testar a mesma imagem em 2x2 e em 3x3 para ver qual grade combina melhor com a composição da ilustração — é só trocar a opção no menu suspenso e gerar de novo quantas vezes quiser.
- Não se sente confortável enviando uma ilustração ainda não publicada ou uma foto pessoal para um serviço online de edição — esta ferramenta processa tudo no Canvas do navegador, sem mandar a imagem para nenhum servidor.
Como usar
- Clique na área de soltar (ou arraste e solte) para escolher uma imagem do seu dispositivo.
- Escolha um tamanho de grade — 1x2, 1x3, 2x2, 3x3 ou 1x4 — no menu suspenso.
- Pré-visualize os blocos resultantes instantaneamente abaixo dos controles.
- Clique em "Baixar tudo (ZIP)" para obter cada bloco como um arquivo PNG numerado dentro de um único arquivo ZIP.
Exemplo
Entrada
Uma foto quadrada de 1200×1200px, grade: 3x3Resultado
9 blocos de 400×400px cada, tile-1.png até tile-9.pngOs blocos são numerados da esquerda para a direita, de cima para baixo — a mesma ordem em que você os publicaria no Instagram (começando pelo bloco inferior direito e seguindo para trás, de forma que, ao publicar novos posts, os blocos mais antigos sejam empurrados para baixo e a grade se recomponha corretamente).
Tamanhos de grade comuns e seus usos
Diferentes tamanhos de grade servem para diferentes tipos de posts e reveals.
| Grade | Blocos | Uso típico |
|---|---|---|
| 1x2 | 2 | Comparação simples antes/depois ou reveal em duas partes |
| 2x2 | 4 | Pequeno reveal quadrado, rápido de publicar |
| 1x3 | 3 | Uma única fileira ao longo de três posts consecutivos |
| 3x3 | 9 | Tomada completa da grade do perfil — o clássico layout de grade do Instagram |
| 1x4 | 4 | Uma panorâmica larga dividida em quatro posts em fileira |
Ferramentas relacionadas
Para outras edições locais de imagem, experimente estas ferramentas.
→ Redimensionador de Imagem · Compressor de Imagem · Cortador de Imagem
Como não errar a ordem de publicação
Um erro comum na grade 3x3 é publicar os blocos na ordem numérica (a partir do tile-1), o que faz a imagem ficar de cabeça para baixo quando a grade se completa. Como o Instagram exibe os posts mais recentes no canto superior esquerdo, a ordem real de publicação precisa ser inversa à numeração — começando pelo tile-9 (canto inferior direito) e terminando pelo tile-1 (canto superior esquerdo).
Publicar outras fotos no meio do processo também atrapalha, pois insere um post estranho no meio da grade e quebra a ilusão. A forma mais segura de garantir que o efeito funcione é publicar os nove blocos seguidos, sem intercalar com nenhum outro conteúdo.
Perguntas frequentes
Qual tamanho de grade devo usar para uma grade de perfil do Instagram?
3x3 (9 blocos) é a escolha mais comum, pois preenche exatamente uma visualização padrão de perfil do Instagram com três colunas. Uma divisão 2x2 ou 1x3 funciona para um reveal menor, que não toma conta de toda a sua grade recente.
Em que ordem devo publicar os blocos?
Como a grade do Instagram exibe os posts mais recentes primeiro (canto superior esquerdo), geralmente é preciso publicar os blocos em ordem inversa — começando pelo bloco inferior direito da grade e terminando pelo superior esquerdo — para que, quando todos os blocos forem publicados, eles fiquem na ordem correta da esquerda para a direita, de cima para baixo.
A imagem precisa ser um quadrado perfeito?
Não, mas para um layout de grade simétrico (como 3x3) uma imagem de origem quadrada gera blocos quadrados, o que corresponde a como o Instagram corta posts em grade quadrada. Uma imagem não quadrada ainda será dividida uniformemente, apenas em blocos retangulares em vez de quadrados.
Em que formato de arquivo os blocos são salvos?
Cada bloco é exportado como um arquivo PNG dentro do arquivo ZIP baixado, o que preserva a qualidade sem recompressão com perdas.
Minha imagem é enviada para algum lugar?
Não. A imagem é lida diretamente no seu navegador e dividida usando a API Canvas inteiramente no lado do cliente. Nada é enviado a um servidor — o arquivo ZIP também é montado localmente no seu navegador.
Como é definida a resolução de cada bloco?
É a largura e a altura da imagem original divididas igualmente pelo número de colunas e linhas da grade escolhida. Por exemplo, uma imagem de 1200×1200px dividida numa grade 3x3 resulta em blocos de 400×400px cada. Quanto maior a resolução da imagem original, maior a resolução de cada bloco.
O que acontece se as dimensões da imagem não dividirem exatamente pelo número de colunas e linhas da grade?
Mesmo quando o número de pixels não é perfeitamente divisível, a ferramenta calcula os limites de cada bloco da forma mais equilibrada possível. Ainda assim, para o resultado mais previsível ao publicar, vale a pena cortar a imagem antecipadamente em dimensões que se dividam de forma exata pela grade escolhida.
Para que servem grades assimétricas, como 1x2 ou 1x4?
A grade 1x2 é útil para um efeito simples de antes/depois dividido em duas partes lado a lado, enquanto a 1x4 serve para dividir uma foto panorâmica larga em quatro posts sequenciais. Diferente das grades quadradas 3x3 ou 2x2, essas geram blocos retangulares e alongados, dispostos em fileira.
Dá para usar as imagens divididas em outras redes sociais além do Instagram?
Sim. Os blocos gerados são arquivos PNG padrão, então servem não só para posts em grade no Instagram, mas para qualquer situação que exija múltiplas partes iguais — outro efeito de post sequencial em outra rede social, ou até painéis divididos para impressão.