Divida uma imagem em 3 colunas (e quantas linhas quiser). Poste os blocos em ordem inversa (de baixo para cima, da direita para a esquerda) para que se alinhem corretamente no feed, formando a imagem completa.
Divida uma imagem em uma grade de blocos para carrossel do Instagram ou sprites, e baixe em .zip.
Dividir uma imagem grande em uma grade de blocos serve a dois usos bem diferentes. O mais popular é criar o efeito de mosaico no feed do Instagram, em que uma única imagem se espalha por vários posts e, vistos juntos na grade do perfil, formam a arte completa, ou um carrossel a partir de uma panorâmica. O outro é técnico: fatiar sprites e atlas de textura em imagens individuais para jogos e animação. A ferramenta desenha as linhas de corte sobre a prévia, recorta cada bloco e exporta todos em PNG (preservando qualidade e transparência), reunidos em um único .zip. Tudo local, sem enviar a imagem a servidores.
Você define linhas e colunas, e a ferramenta divide a largura e a altura da imagem por esses números para achar o tamanho de cada bloco. Quando a dimensão não é divisível de forma exata (por exemplo, 1000 px em 3 colunas), a última coluna e a última linha absorvem os pixels que sobram, assim nenhum pixel é perdido e a imagem remontada fica idêntica à original.
Cada bloco é nomeado pela sua posição na grade (linha × coluna), o que facilita muito a remontagem ou a postagem na ordem certa. Todos vêm em um único .zip, evitando dezenas de downloads individuais.
Exemplo 1, mosaico de feed (3×3): divida a imagem em 3 colunas e 3 linhas para gerar 9 blocos. Poste-os na ordem inversa (o bloco de baixo à direita primeiro, subindo) para que, na grade do perfil, se alinhem e formem a arte completa.
Exemplo 2, carrossel panorâmico (3×1): divida uma foto bem larga em 3 colunas e 1 linha. Postados como um carrossel deslizante, os três blocos recriam a sensação de uma panorâmica contínua ao arrastar de um para o outro.
Fora das redes sociais, dividir em grade é útil para desenvolvimento de jogos: um sprite sheet (várias poses de um personagem numa única imagem) pode ser fatiado em quadros individuais. O mesmo vale para atlas de textura, quando você precisa dos pedaços separados.
Há ainda o uso de impressão em grande formato: dividir um pôster em blocos que cabem numa impressora comum permite montar depois uma imagem gigante, colando as folhas. Como a exportação é em PNG sem perdas, a qualidade dos blocos é idêntica à da imagem original.
Cole o código no seu HTML e a ferramenta aparece na sua página, sem a navegação e sem os anúncios do J-Kit. Ela continua rodando no navegador de quem visita o seu site.
<iframe
src="https://jkit.tools/embed/pt-BR/dividir-imagem-grade"
width="100%"
height="600"
style="border:0"
loading="lazy"
title="Dividir Imagem em Grade"
></iframe>Divida uma imagem em 3 colunas (e quantas linhas quiser). Poste os blocos em ordem inversa (de baixo para cima, da direita para a esquerda) para que se alinhem corretamente no feed, formando a imagem completa.
A divisão é feita inteiramente no seu navegador. Nenhuma imagem é enviada a qualquer servidor.