Um amigo me enviou uma foto do telefone e uma captura de tela e pediu em uma imagem uma lista. Coloquei os dois em uma tela em seus próprios tamanhos e consegui algo que ninguém aceitaria: uma foto 4032 por 3024 com uma imagem estreita de 1170 por 2532 ao lado dela, uma faixa de branco vazio sob a imagem da tela e a coisa toda de 5202 pixels de largura. As fotos estavam boas. O arranjo era o problema, e sempre é o mesmo problema, porque os dois arquivos quase nunca compartilham uma dimensão. Decidir qual eixo deve se alinhar é o trabalho inteiro e tudo o mais segue dele.
tl;dr: A mesclagem de imagens é uma decisão de escala antes de ser desenhada. Lado a lado combina cada imagem com a altura mais alta, empilhando os fósforos com a largura mais larga e uma grade combina com ambos, e é por isso que uma grade também deve escolher entre o corte e o espaço. Medido em uma foto 4032x3024 ao lado de uma captura de tela 1170x2532: Side by Side produz uma tela de 5429x3024 com a captura de tela ampliada para 1397x3024, o empilhamento produz uma tela de 4032x11750 com a captura de tela ampliada por um fator de 3,4, e uma grade de duas células em modo de cobertura, mantém 70.2% da foto e . Escolha o modo pelo qual o eixo deseja preservar. o fusão de imagens Desenha tudo na guia do navegador, então nada é carregado.
Por que as imagens mescladas saem parecendo erradas?
Porque as entradas são diferentes e a maioria das ferramentas as desenha em qualquer tamanho que cheguem.
Uma foto do telefone é 4032 por 3024 na paisagem. Uma captura de tela do telefone é 1170 por 2532. Uma varredura é o que o scanner decidiu. Coloque quaisquer dois em uma fileira em tamanho nativo e um deles se eleva sobre o outro, com o espaço morto preenchendo o que resta da dimensão mais alta. Isso parece um erro e não um layout, mesmo para alguém que não conseguiu dizer o porquê.
A solução é normalizar e a única questão é em qual eixo. Em uma linha, os topos e os fundos são o que o olho segue, então as alturas devem corresponder e cada imagem tem qualquer largura que sua própria proporção de aspecto dê. Em uma coluna, as bordas esquerda e direita são a linha, então as larguras correspondem. Uma grade tem ambas as arestas para segurar, então ela deve corresponder a ambas, e é o modo onde algo tem que dar.
Esse é todo o design. Tudo abaixo é o que se segue a partir dele.
O que lado a lado faz com uma captura de tela alta?
Ele o amplia, às vezes mais do que você deseja.
Aqui está o resultado medido para o par acima, retirado do código de layout em vez de estimado:
| modo | telas | foto desenhada em | Captura de tela desenhada em |
|---|---|---|---|
| lado a lado | 5429 x 3024 | 4032 x 3024 | 1397 x 3024 |
| empilhado | 4032 x 11750 | 4032 x 3024 | 4032 x 8726 |
Lado a lado, combinou com 3024, a mais alta das duas alturas, então a captura de tela foi de 2.532 a 3.024 pixels de altura. É uma ampliação de 19%, que em uma captura de tela do texto é visível se você o procurar e invisível se não o fizer.
O empilhamento é o dramático. Combinando com a imagem mais ampla, a captura de tela de 1170 a 4.032 pixels de largura, um fator de 3,4, e a tela saiu com 11.750 pixels de altura. A captura de tela agora é o objeto dominante em uma imagem muito longa, e cada letra foi ampliada em mais de três vezes, o que nenhuma reamostragem torna nítida.
A lição não é que um modo seja melhor. É que o modo decide qual imagem é ampliada; portanto, escolha aquela cujo eixo combinado suas imagens já concordam. Duas fotos de telefone na paisagem compartilham uma altura e vão lado a lado sem escala. Duas capturas de tela do mesmo telefone compartilham uma largura e uma empilhamento perfeitamente.
Quando você deve empilhar em vez de seguir lado a lado?
Quando o conteúdo é exibido para baixo ou quando as fotos já têm a mesma largura.
O empilhamento é adequado para uma sequência: três capturas de tela de um fluxo de checkout, um antes e depois, onde o depois pertence abaixo, uma conversa capturada em partes. Também é correto sempre que as entradas viessem do mesmo dispositivo na mesma orientação, pois as larguras já correspondem e nada é dimensionado.
Lado a lado é o certo para comparação, onde o olho deve se mover em vez de para baixo, e para qualquer coisa que seja vista em linha em um post, porque uma imagem de 4032 por 11.750 é rolada em vez de vista.
Há uma razão prática para preferir a linha também. A maioria dos lugares que aceitam uma imagem a exibe em uma largura fixa, então uma mesclagem muito alta encolhe para uma lasca. Uma linha de três fotos na mesma altura permanece legível nessa largura de uma forma que uma coluna de três nunca o faz.
O que uma grade tem para decidir que uma faixa não tem?
O que fazer com uma imagem que não seja a forma da célula, que é uma pergunta que uma tira nunca precisa fazer porque apenas fixa um eixo.
Uma grade fixa ambos. Cada célula tem o mesmo tamanho e uma foto 4:3 não cabe em uma célula em forma de uma captura de tela 9:19.5. Existem apenas duas respostas honestas e a ferramenta pede que você escolha entre elas:
- conter Ajusta-se à imagem inteira dentro da célula e deixa espaço ao redor. Nada é perdido e a grade parece um pouco irregular porque cada imagem fica em seu próprio plano de fundo.
- Capa Preenche a célula completamente, tirando uma cultura centralizada da imagem. A grade parece uniforme e as bordas das fotos desapareceram.
Nenhum dos dois está correto em geral. O Contein é adequado para capturas de tela, documentos, diagramas e qualquer coisa em que uma borda carrega informações. A cobertura é adequada para rostos, cenários e texturas, onde uma colheita centrada é o que uma pessoa teria feito de qualquer maneira.
O padrão aqui é o Cover, porque o motivo mais comum para construir uma grade é que ela deve ser lida como um objeto.
Quanto de uma imagem a cobertura joga fora?
Mais do que as pessoas esperam quando as entradas são de formas diferentes e nada quando combinam.
O tamanho da célula é a média das entradas, então duas imagens muito diferentes produzem uma célula que não se adequa a nenhum dos dois. Para o par de fotos e capturas de tela, em uma grade de duas células, o código de layout informa exatamente o que é desenhado:
| imagem | Nativo | Região de origem desenha | pixels mantidos |
|---|---|---|---|
| Foto | 4032 x 3024 | 2831 x 3024 | 70,2% |
| captura de tela | 1170 x 2532 | 1170 x 1250 | 49,4% |
Metade da captura de tela desapareceu. Não comprimido, não escalonado: cortado, superior e inferior, porque uma imagem alta e estreita forçada a uma célula quase quadrada deve perder suas pontas. Se essa captura de tela for um recibo, o total não estará mais na imagem.
A mesma operação em doze fotos da mesma câmera não cultiva nada, porque cada entrada já tem a forma da célula. A cobertura é barata quando as entradas concordam e são caras quando não concordam, e a ferramenta não pode dizer em qual caso você está. Mude para conter o momento em que suas fotos são de formas diferentes e as bordas são importantes.
Quantas colunas uma grade deve ter?
O suficiente para que o resultado seja mais largo do que alto, o que para a maioria das contas significa que a raiz quadrada arredondada para baixo.
As linhas seguem das colunas e da contagem, e a aritmética é implacável. Doze imagens em quatro colunas são três linhas completas. Sete imagens em três colunas são três linhas com duas células vazias no final, que o layout deixa como fundo, em vez de esticar a última imagem para preenchê-las.
| Imagens | colunas | Resultado |
|---|---|---|
| 4 | 2 | 2 x 2, sem lacunas |
| 6 | 3 | 2 x 3, sem lacunas |
| 7 | 3 | 3 linhas, duas células vazias |
| 9 | 3 | 3 x 3, sem lacunas |
| 12 | 4 | 3 x 4, sem lacunas |
Vale a pena procurar uma contagem que fatores de forma limpa. Se você tiver sete fotos e o canto vazio o incomoda, as soluções honestas são para soltar uma, adicionar uma ou aceitá-la, porque nenhum arranjo de sete células iguais é um retângulo.
Por que existe uma configuração de lacunas e o que deveria ser?
Porque as imagens tocantes são lidas como uma imagem, e às vezes isso está errado.
Uma lacuna de zero é adequada para um panorama, para um antes e depois para parecer um quadro e para qualquer coisa onde a costura seja o ponto. É o padrão aqui por esse motivo.
Uma lacuna está certa quando as fotos são separadas por coisas que estão em um arquivo: três fotos do produto, um conjunto de capturas de tela, uma colagem. Em algum lugar entre 8 e 24 pixels, o trabalho em imagens de alguns milhares de pixels, e o controle deslizante vai para 80 para um trabalho maior. A lacuna é aplicada tanto externa quanto entre os lados, então o resultado tem uma borda em vez de imagens sangrando na borda.
Uma coisa a saber antes de escolher PNG para uma fusão de lacunas: a lacuna é preenchida com branco, não deixado transparente. A tela é pintada de branco antes de qualquer coisa ser desenhada, porque o JPEG não possui um canal alfa e uma lacuna sem pintura exporta como preto. Um PNG desta ferramenta, portanto, possui calhas brancas em vez de transparentes, o que importa se você planeja colocar o resultado sobre um fundo colorido.
Qual é o tamanho da imagem mesclada?
Maior que as entradas e, no caso empilhado, muito maior, porque nada está sendo comprimido.
As dimensões da tela são previsíveis a partir do modo. Lado a lado, a largura é a soma das larguras escaladas e a altura é a entrada mais alta. Empilhado, a largura é a entrada mais larga e a altura é a soma. Uma grade é colunas vezes a célula mais as lacunas.
Doze fotos de telefone em uma grade de quatro colunas chegam a 16.208 por 9.136 pixels, ou seja, 148 megapixels. É aí que começa a próxima seção.
Por que a saída para em 8.000 pixels?
Porque passado um determinado tamanho, uma tela do navegador deixa de funcionar, e isso não diz.
O limite não é uma especificação. MDN coloca claramenteA maioria dos navegadores excede 10.000 por 10.000 pixels, os dispositivos iOS historicamente foram limitados a 4.096 por 4.096, e excedendo as dimensões máximas ou área "renderiza o canvas inutilizável" com comandos de desenho com falha silenciosa. Não há exceção para capturar. Você obtém uma imagem em branco ou nada. Os números por navegador são coletados no Resultados do teste do tamanho da tela, que é a referência que vale a pena verificar antes de assumir um número.
Portanto, o layout é reduzido para caber em um lado longo de 8.000 pixels, em vez de ser autorizado a falhar. Para essa grade de doze fotos, o fator de escala é de 0,494, com 16.208 por 9.136 para 8.000 por 4.509, que é 36 megapixels. Cada foto chega a aproximadamente 1.976 por 1.483 em vez de 4.032 por 3.024.
Essa é uma perda real de resolução, e é a troca honesta: uma imagem de 36 megapixels que existe supera uma imagem de 148 megapixels que o navegador se recusa a desenhar. Se você precisar da resolução total de doze fotos, mescle-as em menos, peças maiores ou use uma ferramenta de desktop sem tela no caminho.
O resultado deve ser PNG ou JPG?
JPG para fotografias, PNG para capturas de tela e qualquer coisa com texto ou cor plana.
Esta é a regra comum e a fusão não a altera, mas a fusão faz com que seja mais importante, porque a saída é grande. Uma fusão de 5.429 por 3024 de duas fotografias é um arquivo que você notará em tamanhos PNG e não na qualidade JPEG 0,92, que é o que ele exporta.
O reverso é válido para capturas de tela. A subamostragem e a transformação de blocos do JPEG Chroma produzem franjas visíveis em torno de bordas de texto nítidas, e uma faixa mesclada de capturas de tela é principalmente bordas de texto nítidas. PNG não tem perdas, então o texto permanece exatamente tão nítido quanto era.
Uma fusão mista não tem uma resposta certa. Se uma de suas entradas for uma captura de tela com texto e outra for uma fotografia, escolha por qual um leitor irá olhar.
A mesclagem perde qualidade?
O desenho não tem, mas o dimensionamento pode, e vale a pena saber qual é qual.
Os pixels desenhados em seu tamanho nativo são copiados, não recomprimidos. Em uma fusão lado a lado de duas fotos de paisagem da mesma câmera, nada é dimensionado, então cada pixel na saída veio de um pixel de entrada.
A escala é onde a qualidade vai. Qualquer imagem ampliada para combinar com um vizinho mais alto é reamostrada, o que inventa pixels que nunca foram fotografados. Uma captura de tela ampliada 3,4 vezes para corresponder à largura de uma foto é suave de uma forma que nenhuma configuração aqui se resolve. Nada é aumentado após a maior entrada do eixo que está sendo combinado, então há um teto, mas uma pequena foto ao lado de uma grande ainda é esticada para alcançá-lo.
Depois, há a exportação. A escolha do JPG recodifica tudo, incluindo as entradas que já eram JPEGs, que é uma segunda geração de compressão com perdas. É o mesmo mecanismo descrito em O guia de áudio sobre como extrair uma faixa, em um meio diferente: decodificar algo com perdas e comprimi-lo novamente nunca é gratuito. Com qualidade 0,92, o custo é pequeno e, para uma tira de foto mesclada, é a escolha certa.
Em que ordem as imagens entram?
A ordem que você os adicionou, da esquerda para a direita ou de cima para baixo, e a única maneira de alterá-la é removê-la e adicioná-la novamente.
Vale a pena saber antes de você selecionar doze arquivos de uma só vez, porque um seletor de arquivos os entrega em seu próprio pedido, que geralmente é alfabético por nome de arquivo e ocasionalmente não. Para uma sequência que importa, como um fluxo de checkout, adicioná-los um de cada vez na ordem que você deseja dá menos trabalho do que corrigi-la depois.
Trinta imagens é o teto. Esse não é um limite de tela, é um limite de sanidade: uma fusão de trinta fotos de telefone é uma grade de 30 megapixels após a tampa e um layout que ninguém pode ler.
O que uma imagem mesclada não lhe dá?
Tudo o que uma ferramenta de design faz, que é o limite honesto de uma ferramenta de fusão.
Não há bordas em torno de fotos individuais, cantos arredondados, sombras, nem legendas, rotação por imagem, sem sobreposição, sem cor de fundo além do branco. Cada imagem é desenhada em seu retângulo e esse é o conjunto de recursos.
Se você deseja uma colagem emoldurada com texto, isso é um trabalho de design e uma ferramenta de design. Se você quiser colocar três imagens em um arquivo para que algo que aceite uma imagem tenha os três, é isso. Tratar o segundo como uma versão fraca do primeiro é a fonte usual de decepção.
Duas ferramentas adjacentes cobrem os acompanhamentos comuns: Adicionando texto a uma imagem Para uma legenda, e O compressor de imagem Quando uma grade de fotos mescladas sai maior do que um limite de upload permite.
Por que isso funciona no navegador?
Como as imagens nunca precisam ir a lugar nenhum, e no momento em que o fazem, é uma decisão de outra pessoa o que acontece com eles.
Toda a mesclagem é uma operação de canvas. Seus arquivos são decodificados na memória da página, desenhados em uma tela na guia, e a tela é devolvida como download toBlob. Nenhuma solicitação carrega uma imagem, nada é gravado em um servidor e não há uma cópia armazenada para que ninguém vaze ou esqueça.
Para muitas fusão, isso é uma coisa importante. Para aqueles que envolvem uma captura de tela de um extrato bancário, uma foto de um documento, uma varredura médica ou uma foto de uma criança, é o motivo de usar uma ferramenta como essa em vez do primeiro resultado que pede para você fazer o upload.
O custo é o teto de tela descrito acima e o fato de que as mesclagens muito grandes são limitadas pela quantidade de memória que a guia pode conter. Para duas imagens, ou doze, nenhuma das duas é um limite que você encontrará.
