Un amigo me envió una foto del teléfono y una captura de pantalla y les pidió en una imagen para una lista. Dejé caer ambos en un lienzo en sus propios tamaños y obtuve algo que nadie aceptaría: una foto 4032 por 3024 con una captura de pantalla estrecha de 1170 por 2532 junto a él, una banda de blanco vacío debajo de la captura de pantalla y todo el asunto 5202 píxeles de ancho. Las fotos estaban bien. El arreglo era el problema, y cada vez es el mismo problema, porque los dos archivos casi nunca comparten una dimensión. Decidir qué eje tiene que alinear es todo el trabajo, y todo lo demás se desprende de él.
TL;Dr: Fusionar imágenes es una decisión de escalado antes de que sea una de dibujo. Lado a lado coincide cada imagen con la altura más alta, apilando coincide con el ancho más ancho, y una cuadrícula coincide con ambos, por lo que una cuadrícula también tiene que elegir entre recortar y dejar espacio. Medida en una foto de 4032x3024 junto a una captura de pantalla de 1170x2532: Side by Side produce un lienzo de 5429x3024 con la captura de pantalla ampliada a 1397x3024, el apilamiento produce un lienzo de 4032x11750 con la captura de pantalla ampliada por un factor de 3.4, y una cuadrícula de dos celdas en modo de cobertura mantiene el 70,2% de la foto y 49.4% de pantalla. Elija el modo por el que el eje que desea conservar. los Fusión de imagen Lo dibuja todo en la pestaña del navegador, por lo que no se carga nada.
¿Por qué las imágenes fusionadas se ven mal?
Porque las entradas son de diferentes formas y la mayoría de las herramientas las dibujan en cualquier tamaño que lleguen.
Una foto de teléfono es 4032 por 3024 en paisaje. Una captura de pantalla del teléfono es 1170 por 2532. Un escaneo es lo que el escáner decida. Coloque dos cualquiera de estos en una fila en tamaño nativo y uno de ellos se eleva sobre el otro, con espacio muerto llenando lo que quede de la dimensión más alta. Eso se lee como un error en lugar de un diseño, incluso para alguien que no podría decirte por qué.
La solución es normalizar, y la única pregunta es en qué eje. En una fila, las partes superiores e inferiores son lo que sigue el ojo, por lo que las alturas deben coincidir y cada imagen tiene cualquier ancho que le dé su propia relación de aspecto. En una columna, los bordes izquierdo y derecho son la línea, por lo que los anchos coinciden en su lugar. Una cuadrícula tiene ambos bordes para sostener, por lo que tiene que coincidir con ambos, y ese es el modo donde algo tiene que dar.
Ese es todo el diseño. Todo lo que sigue es lo que se deduce de él.
¿Qué le hace lado a lado a una captura de pantalla alta?
Lo agranda, a veces más de lo que quieres.
Aquí está el resultado medido para el par anterior, tomado del código de diseño en lugar de estimado:
| modo | lona | foto dibujada en | Captura de pantalla dibujada en |
|---|---|---|---|
| juntos | 5429 x 3024 | 4032 x 3024 | 1397 x 3024 |
| apilado | 4032 x 11750 | 4032 x 3024 | 4032 x 8726 |
Lado a lado coincidió con ambos con 3024, el más alto de las dos alturas, por lo que la captura de pantalla pasó de 2532 a 3024 píxeles de alto. Eso es una ampliación del 19%, que en una captura de pantalla de texto es visible si lo buscas e invisible si no lo haces.
El apilamiento es el dramático. Coincidir con la imagen más ancha tomó la captura de pantalla de 1170 a 4032 píxeles de ancho, un factor de 3.4, y el lienzo salió de 11.750 píxeles de alto. La captura de pantalla es ahora el objeto dominante en una imagen muy larga, y cada letra en ella se ha ampliado más de tres veces, lo que ninguna cantidad de remuestreo hace nítida.
La lección no es que un modo sea mejor. Es que el modo decide qué imagen se amplía, así que elige la que coincida con el eje que ya están de acuerdo en tus imágenes. Dos fotos de teléfono en paisaje comparten una altura y van una al lado de la otra sin escala. Dos capturas de pantalla del mismo teléfono comparten un ancho y se apilan perfectamente.
¿Cuándo deberías apilar en lugar de ir uno al lado del otro?
Cuando el contenido se lee hacia abajo, o cuando las imágenes ya tienen el mismo ancho.
El apilamiento es correcto para una secuencia: tres capturas de pantalla de un flujo de pago, un antes y un después donde el después pertenece el after, una conversación capturada en partes. También es correcto cuando las entradas provenían del mismo dispositivo en la misma orientación, porque entonces los anchos ya coinciden y no se escala nada.
Lado a lado es correcto para comparar, donde el ojo debe moverse en lugar de hacia abajo, y para cualquier cosa que se vea en línea en una publicación, porque una imagen de 4032 por 11.750 se desplaza en lugar de ver.
Hay una razón práctica para preferir la fila también. La mayoría de los lugares que aceptan una imagen lo muestran a un ancho fijo, por lo que una fusión muy alta se encoge a una astilla. Una fila de tres fotos a la misma altura permanece legible en ese ancho de una manera que nunca lo hace una columna de tres.
¿Qué tiene que decidir una cuadrícula que no tiene una tira?
Qué hacer con una imagen que no es la forma de la celda, que es una pregunta que una tira nunca tiene que hacer porque solo fija un eje.
Una rejilla fija ambos. Cada celda tiene el mismo tamaño, y una foto de 4:3 no encaja en una celda con forma de una captura de pantalla de 9:19.5. Solo hay dos respuestas honestas, y la herramienta te pide que elijas entre ellas:
- refrenar Se ajusta a toda la imagen dentro de la celda y deja espacio a su alrededor. Nada se pierde, y la cuadrícula parece un poco irregular porque cada imagen se encuentra en su propio parche de fondo.
- Cubierta Llena la celda por completo tomando un recorte centrado de la imagen. La cuadrícula parece uniforme, y los bordes de las imágenes se han ido.
Tampoco es correcto en general. Contener es correcto para capturas de pantalla, documentos, diagramas y cualquier cosa donde un borde transmita información. La cubierta es adecuada para las caras, el paisaje y la textura, donde una cosecha centrada es lo que una persona habría hecho de todos modos.
El valor predeterminado aquí es Cover, porque la razón más común para construir una cuadrícula es que debería leerse como un solo objeto.
¿Cuánto de una imagen tira la portada?
Más de lo que la gente espera cuando las entradas tienen formas diferentes, y nada en absoluto cuando coinciden.
El tamaño de la celda es el promedio de las entradas, por lo que dos imágenes muy diferentes producen una celda que no se adapta a ninguno de los dos. Para el par de capturas de pantalla y fotos, en una cuadrícula de dos celdas, el código de diseño informa exactamente qué se dibuja:
| image | Nativo | Región de origen dibujada | píxeles guardados |
|---|---|---|---|
| Foto | 4032 x 3024 | 2831 x 3024 | 70.2% |
| captura de pantalla | 1170 x 2532 | 1170 x 1250 | 49,4% |
La mitad de la captura de pantalla se ha ido. No comprimido, no escalado: recortado, arriba y abajo, porque una imagen alta y estrecha forzada en una celda casi cuadrada tiene que perder sus extremos. Si esa captura de pantalla era un recibo, el total ya no está en la imagen.
La misma operación en doce fotos de la misma cámara no recoge nada, porque cada entrada ya tiene la forma de la celda. La cobertura es barata cuando las entradas están de acuerdo y caras cuando no lo hacen, y la herramienta no puede saber en qué caso se encuentra. Cambie para contener el momento en que sus imágenes son formas diferentes y los bordes importan.
¿Cuántas columnas debe tener una cuadrícula?
Suficiente para que el resultado sea más ancho que alto, lo que para la mayoría de los recuentos significa la raíz cuadrada redondeada hacia abajo.
Las filas se siguen de las columnas y el conteo, y la aritmética no perdona. Doce imágenes en cuatro columnas son tres filas completas. Siete imágenes en tres columnas son tres filas con dos celdas vacías al final, que el diseño deja como fondo en lugar de estirar la última imagen para llenarlas.
| Imágenes | columnas | Resultado |
|---|---|---|
| 4 | 2 | 2 x 2, sin huecos |
| 6 | 3 | 2 x 3, sin huecos |
| 7 | 3 | 3 filas, dos celdas vacías |
| 9 | 3 | 3 x 3, sin huecos |
| 12 | 4 | 3 x 4, sin huecos |
Vale la pena apuntar a un conteo que factores limpiamente valen. Si tienes siete fotos y te molesta el rincón vacío, las correcciones honestas son soltar una, agregar una o aceptarla, porque ningún arreglo de siete celdas iguales es un rectángulo.
¿Por qué hay una configuración de brecha y cuál debería ser?
Porque tocar imágenes se lee como una imagen, y a veces eso está mal.
Una brecha de cero es la correcta para un panorama, para un antes y después de eso debería parecerse a un cuadro, y para cualquier cosa donde la costura sea el punto. Es el valor predeterminado aquí por esa razón.
Una brecha es correcta cuando las imágenes son cosas separadas que están en un archivo: tres tomas de productos, un conjunto de capturas de pantalla, un collage. En algún lugar entre 8 y 24 píxeles hace el trabajo con imágenes de unos pocos miles de píxeles, y el control deslizante va a 80 para trabajos más grandes. La brecha se aplica tanto en el exterior como en el medio, por lo que el resultado tiene un borde en lugar de imágenes que se desangran en el borde.
Una cosa que debe saber antes de elegir PNG para una combinación de brecha: la brecha se llena de blanco, no se deja transparente. El lienzo se pinta de blanco antes de que se dibuje algo, porque JPEG no tiene un canal alfa y un hueco sin pintar exporta como negro. Por lo tanto, un PNG de esta herramienta tiene canaletas blancas en lugar de transparentes, lo que importa si planeaba colocar el resultado sobre un fondo de color.
¿Qué tan grande es la imagen fusionada?
Más grande que las entradas, y en el caso apilado mucho más grande, porque nada se está comprimiendo.
Las dimensiones del lienzo son predecibles desde el modo. Lado a lado, el ancho es la suma de los anchos escalados y la altura es la entrada más alta. Apilado, el ancho es la entrada más ancha y la altura es la suma. Una cuadrícula es columnas multiplicada por la celda más los huecos.
Doce fotos de teléfono en una cuadrícula de cuatro columnas llegan a 16.208 por 9.136 píxeles, que es de 148 megapíxeles. Ahí es donde comienza la siguiente sección.
¿Por qué la salida se detiene a 8.000 píxeles?
Porque pasado un cierto tamaño de un navegador deja de funcionar y no lo dice.
El límite no es una especificación. MDN lo pone claramente: La mayoría de los navegadores superan los 10.000 por 10.000 píxeles, los dispositivos iOS se han limitado históricamente a 4.096 por 4.096, y superan las dimensiones máximas o el área "Renderiza el lienzo inutilizable" con los comandos de dibujo fallando silenciosamente. No hay excepción a la captura. Obtienes una imagen en blanco, o nada en absoluto. Las cifras por navegador se recogen en el Resultados de la prueba de tamaño de lienzo, que es la referencia que vale la pena verificar antes de asumir un número.
Por lo tanto, el diseño se reduce para adaptarse a un lado largo de 8.000 píxeles en lugar de que se permita que falle. Para esa cuadrícula de doce fotos, el factor de escala es 0,494, tomando 16.208 por 9.136 hasta 8.000 por 4.509, que es de 36 megapíxeles. Cada foto aterriza aproximadamente a 1.976 por 1.483 en lugar de 4.032 por 3.024.
Esa es una verdadera pérdida de resolución, y es el intercambio honesto: una imagen de 36 megapíxeles que existe supera a una imagen de 148 megapíxeles que el navegador se niega a dibujar. Si necesita la resolución completa de doce fotos, combínelas en menos piezas más grandes o use una herramienta de escritorio sin lienzo en el camino.
¿El resultado debe ser PNG o JPG?
JPG para fotografías, PNG para capturas de pantalla y cualquier cosa con texto o color plano.
Esta es la regla ordinaria y la fusión no la cambia, pero la fusión hace que importe más, porque la salida es grande. Una fusión de 5429 por 3024 de dos fotografías es un archivo que notará en tamaños PNG y no tendrá una calidad JPEG 0.92, que es a lo que se exporta.
La marcha atrás se mantiene para capturas de pantalla. El submuestreo de croma y la transformación de bloques de JPEG producen flecos visibles alrededor de bordes de texto nítidos, y una tira de capturas de pantalla fusionada es en su mayoría bordes de texto nítidos. PNG no tiene pérdidas, por lo que el texto permanece tan nítido como lo era.
Una fusión mixta no tiene una respuesta correcta. Si una de sus entradas es una captura de pantalla con texto y otra es una fotografía, elija por cuál mirará un lector.
¿La fusión pierde calidad?
El dibujo no lo hace, pero el escalado podría, y vale la pena saber cuál es cuál.
Los píxeles que se dibujan en su tamaño nativo se copian, no se vuelven a comprimir. En una combinación de dos paisajes de la misma cámara, no se escala nada en absoluto, por lo que cada píxel de la salida proviene de un píxel de entrada.
La escala es donde va la calidad. Se vuelve a muestrear cualquier imagen ampliada para que coincida con un vecino más alto, lo que inventa píxeles que nunca fueron fotografiados. Una captura de pantalla ampliada 3.4 veces para que coincida con el ancho de una foto es suave de una manera que no se soluciona aquí. Nada se mejora más allá de la entrada más grande en el eje que se está emparejando, por lo que hay un techo, pero una pequeña imagen al lado de una grande todavía se estira para alcanzarlo.
Luego está la exportación. La elección de JPG vuelve a codificar todo, incluidas las entradas que ya eran JPEG, que es una segunda generación de compresión con pérdida en esos. Es el mismo mecanismo descrito en La audioguía sobre la extracción de una pista, en un medio diferente: decodificar algo con pérdida y comprimirlo de nuevo nunca es gratis. Con calidad 0.92 el costo es pequeño, y para una tira de fotos fusionada es la llamada correcta de todos modos.
¿En qué orden van las imágenes?
El orden que los agregaste, de izquierda a derecha o de arriba a abajo, y la única forma de cambiarlo es quitar uno y agregarlo de nuevo.
Vale la pena saberlo antes de seleccionar doce archivos a la vez, porque un selector de archivos los entrega en su propio orden, que generalmente es alfabético por nombre de archivo y, en ocasiones, no. Para una secuencia que importa, como un flujo de pago, agregarlos uno a la vez en el orden que desea es menos trabajo que arreglarlo después.
Treinta imágenes es el techo. Eso no es un límite de lienzo, es un límite de cordura: una combinación de treinta fotos del teléfono es una cuadrícula de 30 megapíxeles después de la gorra y un diseño que nadie puede leer.
¿Qué no te da una imagen fusionada?
Todo lo que hace una herramienta de diseño, que es el límite honesto de una herramienta de fusión.
No hay bordes alrededor de imágenes individuales, ni esquinas redondeadas, ni sombras paralelas, ni subtítulos, sin rotación por imagen, sin superposición, sin color de fondo que no sea el blanco. Cada imagen se dibuja en su rectángulo y ese es el conjunto de características completo.
Si desea un collage enmarcado con texto, ese es un trabajo de diseño y una herramienta de diseño. Si desea poner tres imágenes en un archivo para que algo que acepte una imagen se obtenga las tres, eso es todo. Tratar al segundo como una versión débil de la primera es la fuente habitual de decepción.
Dos herramientas adyacentes cubren los seguimientos comunes: Agregar texto a una imagen por un título, y El compresor de imagen Cuando una cuadrícula de fotos fusionada sale más grande de lo que permite un límite de carga.
¿Por qué se ejecuta esto en el navegador?
Debido a que las imágenes nunca necesitan ir a ninguna parte, y en el momento en que lo hacen, es decisión de otra persona lo que les sucede.
Toda la fusión es una operación de lienzo. Sus archivos se decodifican en la memoria de la página, se dibujan en un lienzo en la pestaña, y el lienzo se devuelve como una descarga a través de toBlob. Ninguna solicitud lleva una imagen, no se escribe nada en un servidor y no hay copia almacenada para que nadie se filtre u olvide.
Para muchas fusiones eso es un buen gusto. Para los que involucran una captura de pantalla de un extracto bancario, una foto de un documento, un escaneo médico o una imagen de un niño, es el motivo de usar una herramienta como esta en lugar del primer resultado lo que te pide que lo cargues.
El costo es el techo de lona descrito anteriormente y el hecho de que las fusiones muy grandes están limitadas por la cantidad de memoria que puede contener la pestaña. Por dos imágenes, o doce, ninguno es un límite que cumplirás.
