Meio Pixel é a Razão de o Seu Carrossel Parecer Borrado
Divida uma foto larga em quatro slides de carrossel e a primeira coisa que acontece é uma conta: largura dividida por quatro. Numa foto de 1170 pixels isso dá 292,5 pixels por slide, e meio pixel não é algo que um canvas consiga cortar.
O que ele faz em vez disso é a parte interessante, e é pior do que uma emenda torta.
O que um navegador faz com meio pixel
Ao receber um pedido de fatia de 292,5 pixels, um canvas não arredonda para 292 e segue em frente. Ele reamostra — reconstrói cada pixel do bloco como uma média ponderada dos vizinhos, porque a grade de pixels que pediram a ele já não coincide com a que ele recebeu.
Isso é fácil de medir. Monte uma origem de listras pretas e brancas de um pixel, corte uma fatia num pixel inteiro e outra em 292,5, e leia os pixels de volta:
| Fatia | Pixels que voltaram | Contraste da borda |
|---|---|---|
| Pixel inteiro | 0, 255, 0, 255 | 255 — exato |
| 292,5 | 111, 143, 111, 143 | 32 |
Preto e branco voltaram como dois cinzas separados por onze por cento. Duzentos e cinquenta e cinco degraus de contraste de borda viraram trinta e dois — oitenta e sete por cento, perdidos.
E isso não para na emenda. O bloco inteiro é reconstruído, então todo detalhe fino lá dentro amolece na mesma medida. Em listras isso salta aos olhos. Numa fotografia você não vai ver nada tão organizado; vai ver um carrossel um pouco mais borrado que a imagem de partida, sem nada na tela explicando por quê.
A correção é aritmética, não um filtro de nitidez
Nada aqui precisa ser corrigido depois. O bloco só precisa cair em pixels inteiros, e ele consegue, se a largura for tornada divisível antes de qualquer corte.
Pegue a maior largura em pixels inteiros que divida exato pelo número de slides, centralize e corte ali. Cada fatia passa a começar e terminar num inteiro, então nada é reamostrado — e todos os slides saem do mesmo tamanho, o que um carrossel exige de qualquer jeito, porque todos os seus slides compartilham uma única proporção.
O custo são alguns pixels de largura. Medido em cinco larguras comuns de celular:
| Largura da foto | Slides | Fatia ingênua | Fatia inteira | Pixels descartados |
|---|---|---|---|---|
| 1170 | 4 | 292,5 | 292 | 2 |
| 1080 | 3 | 360 | 360 | 0 |
| 4032 | 3 | 1344 | 1344 | 0 |
| 3024 | 5 | 604,8 | 604 | 4 |
| 1290 | 7 | 184,29 | 184 | 2 |
No máximo quatro pixels, e nenhum nas duas larguras que já dividem exato. Essa é a troca inteira: até quatro pixels de largura contra cada pixel de cada bloco sendo reconstruído a partir dos vizinhos.
A regra geral é que a perda é no máximo um a menos que o número de slides. Dez slides podem custar nove pixels de uma foto de vários milhares.
A outra coisa que decide quanto sobra
Todo slide de um carrossel compartilha uma proporção. Só essa restrição já decide a largura da faixa que dá para usar, porque a faixa é a proporção do slide multiplicada pela quantidade de slides:
- Quadrado 1:1 em três slides pede uma faixa 3:1.
- Retrato 4:5 em três slides pede 2,4:1 — slides mais altos, então uma faixa mais estreita os preenche.
- Paisagem 1,91:1 em três slides pede 5,73:1, que quase nenhuma fotografia é.
Uma foto 16:9 é 1,78:1. Contra um alvo de 2,4:1 ela não é estreita demais — é baixa demais, então as laterais são cortadas para a proporção fechar. Contra 3:1 corta mais ainda. É por isso que slides em retrato preservam mais de uma foto comum do que slides quadrados, o contrário do que a maioria imagina.
O que isso significa na hora de publicar
- Redimensione a foto para uma largura divisível pela quantidade de slides se você se importa com cada pixel — 1080 para três, 1200 para quatro, 1500 para cinco.
- Se não, um bom divisor deve descartar alguns pixels em vez de cortar uma fatia fracionária. A diferença é invisível na largura e bem visível na nitidez.
- Escolha retrato 4:5 quando quiser preservar o máximo da foto, quadrado quando o feed for variado, e paisagem só para panorâmicas de verdade.
- Emendas exatas em pixels é o que um divisor controla. O que ele não controla é o aplicativo: alguns feeds colocam um pequeno espaço ou um canto arredondado entre slides, então uma borda dura atravessando a emenda ainda pode aparecer como junta, por mais exato que tenha sido o corte.
Experimente
Nosso divisor de carrossel faz a aritmética acima: corta para uma largura divisível, fatia em pixels inteiros e diz exatamente quantos pixels descartou e com que tamanho cada slide saiu. Tudo acontece no seu navegador — a foto nunca é enviada.
Se a foto ainda não está na largura certa, o redimensionador de imagens resolve isso antes, e o verificador de área segura mostra o que o próprio aplicativo vai cobrir depois que você publicar.
FAQ
Por que meio pixel importa se eu nem consigo ver um?
Porque o navegador não o descarta — ele reconstrói o bloco inteiro em volta dele. O custo medido numa borda dura foi de 255 degraus de contraste para 32, e esse amolecimento vale para cada pixel do slide, não só para a emenda.
Não dá só para aplicar nitidez nos slides depois?
A nitidez devolve contraste às bordas que ela consegue encontrar; ela não recupera detalhe que virou média, e ainda cria halos próprios. Cortar em pixels inteiros custa alguns pixels de largura e não precisa de correção.
Para que largura devo redimensionar antes de dividir?
Qualquer múltiplo da quantidade de slides. 1080 divide por três, quatro, cinco, seis, oito e nove. 1200 divide por três, quatro, cinco, seis, oito e dez. Se você já sabe a quantidade, a regra mais simples é arredondar a largura para baixo até o múltiplo mais próximo.
Isso vale fora do Instagram?
Vale em qualquer lugar onde uma imagem seja cortada em pedaços iguais, porque é uma propriedade do canvas e não do aplicativo. Nos carrosséis as pessoas percebem mais, porque os slides ficam lado a lado e convidam à comparação.
As emendas ficam mesmo invisíveis?
Os pixels vão encaixar exatamente. Se a junta vai parecer invisível também depende do feed, que pode acrescentar um espaço ou um canto arredondado entre slides, e da imagem: detalhe em cima da emenda esconde, cor chapada e linhas retas não.