Un panorama publicado en Instagram como una sola imagen se convierte en una franja delgada en el feed. El mismo panorama cortado en tres o cuatro diapositivas y publicado como un carrusel llena la pantalla, y deslizar el dedo se mueve a lo largo de la imagen como si estuvieras panorámica de una cámara. El efecto es fácil de describir y fácil de equivocar un poco: una diapositiva a un píxel de distancia o una última diapositiva más estrecha que el resto, y el deslizamiento salta.
Esta guía explica cómo funciona un carrusel sin costuras, cuántas diapositivas necesita un panorama determinado, cómo se ve la aritmética de corte con recuentos de píxeles reales y cómo usarla Generador de desplazamiento carrusel en Toolz para realizar el corte en su navegador.
TL;Dr: Un carrusel sin costuras es una imagen ancha cortada en diapositivas iguales que comparten sus bordes exactamente, publicada en orden para que deslizar el dedo desplace la imagen. El recuento de diapositivas es la relación de aspecto panorámica 's dividida por la diapositiva 's relación de aspecto: un panorama 3:1 son 3 diapositivas cuadradas o 4 diapositivas verticales (4:5). El generador de desplazamiento del carrusel sugiere que el recuento recorta la imagen exactamente a tantas diapositivas ' valor de ancho, corta los límites de píxeles completos y exporta diapositivas de 1080 px de ancho como JPEG, PNG o WebP en una cremallera numerada. Se ejecuta en el lado del cliente, no se carga nada, es gratuito y no hay registro.
¿qué es un carrusel de Instagram sin interrupciones?
Un carrusel sin costuras es una publicación de carrusel cuyas diapositivas son piezas consecutivas de una imagen. En lugar de pasar de una foto a la siguiente, el espectador desliza y la imagen continúa a través del espacio. Los fotógrafos de paisajes lo utilizan para panoramas, los diseñadores lo utilizan para ilustraciones largas y las marcas lo utilizan para líneas de tiempo o líneas de productos que abarcan varios fotogramas.
Funciona porque un carrusel muestra diapositivas una al lado de la otra en una tira, y cada diapositiva de un poste tiene el mismo tamaño. Si la diapositiva 1 termina en la columna de píxeles 1200 del original y la diapositiva 2 comienza en la columna 1200, la unión es invisible. Si la diapositiva 2 comienza en la columna 1198 o 1203, una porción de la imagen se repite o desaparece, y en un horizonte recto o un borde de edificio que se muestra como un paso visible.
Dos reglas de plataforma dan forma a todo lo demás. Al momento de escribir este artículo, Instagram acepta hasta 20 diapositivas en un carrusel, y todas las diapositivas de una publicación comparten la relación de aspecto de la primera; una diapositiva con una forma diferente se recorta para que coincida. Las plataformas cambian estos detalles de vez en cuando, así que trátelos como un comportamiento actual en lugar de una especificación fija.
¿Qué forma de diapositiva deberías elegir?
El retrato 4:5 es la opción habitual, porque es la forma más alta que muestra el feed de Instagram y ocupa la mayor parte de la pantalla de un teléfono. El cuadrado y el paisaje están ahí cuando la composición les conviene.
El generador ofrece las tres formas de carrusel, cada una exportada de 1080 px de ancho:
| Forma de diapositiva | Tamaño de salida | Relación (ancho/alto) | Diapositivas para un panorama 3:1 | Diapositivas para un panorama 4:1 |
|---|---|---|---|---|
| Retrato (predeterminado) | 1080 x 1350 | 0.8 | 4 | 5 |
| Cuadrado | 1080 x 1080 | 1.0 | 3 | 4 |
| Paisaje | 1080 x 566 | 1.91 | 2 | 2 |
Los recuentos de diapositivas en la tabla provienen de una división, que se trata en la siguiente sección. El patrón a tener en cuenta es que las diapositivas más estrechas necesitan más para cubrir el mismo ancho. Las diapositivas de retrato muestran la mayor altura del panorama por diapositiva, que suele ser lo que hace que una foto de paisaje parezca grande, pero necesitan más deslizamientos. Las diapositivas de paisaje muestran un panorama en menos fotogramas y más cortos y se adaptan a imágenes muy anchas y poco profundas, como los horizontes.
¿cuántas diapositivas necesita un panorama?
Divida la relación de aspecto panorámica 's por la diapositiva 's relación de aspecto, luego redondee a la diapositiva completa más cercana.
slides = round( (image width / image height) / (slide width / slide height) )
Para un panorama 3:1 en diapositivas de retrato: 3 / 0,8 = 3,75, que se redondea a 4. En diapositivas cuadradas: 3 / 1 = 3. En diapositivas de paisaje: 3 / 1,908 = 1,57, que se redondea a 2.
Para un panorama 4:1, como una imagen de 6000 x 1500: 4 / 0,8 = 5 diapositivas de retrato, 4 / 1 = 4 diapositivas cuadradas y 4 / 1,908 = 2,1, es decir, 2 diapositivas de paisaje.
los herramienta de panorama a carrusel ejecuta este cálculo tan pronto como agrega una imagen, fija la respuesta entre 1 y 10 y le establece el control deslizante Diapositivas con una línea como "4 coincide más estrechamente con su imagen's proporciones." El control deslizante en sí se ejecuta de 2 a 10. Una vez que lo mueve, la sugerencia deja de anular su elección; Agregar una nueva imagen o elegir una forma de diapositiva diferente devuelve la sugerencia.
El recuento rara vez se divide perfectamente, por lo que algo tiene que ceder. Redondear un poco más de molduras de diapositivas desde la parte superior e inferior del panorama. Redondear hacia abajo a menos molduras de diapositivas desde la izquierda y la derecha. El generador hace ese recorte una vez, centrado, antes de cortar, por lo que cada diapositiva sale del mismo tamaño.
¿cómo corta la herramienta las correderas sin costura?
Funciona en tres pasos y cada uno existe para detener un tipo específico de costura.
Paso 1: recortar la tira. Las diapositivas juntas forman una tira larga cuya relación es la relación de diapositivas multiplicada por el recuento de diapositivas. Para 4 diapositivas de retrato que es 1080 x 4 / 1350 = 3,2. La herramienta toma la región centrada más grande de la imagen con exactamente esa relación. Si la imagen es más ancha que la tira, se recortan los lados; si es más alto, se recortan la parte superior e inferior.
Paso 2: divida la tira en columnas de píxeles completos. El ancho de la tira se redondea a un número entero de píxeles, dividido por el recuento de diapositivas, y los píxeles sobrantes se reparten uno a la vez a las diapositivas principales. Una tira de 3199 px en 3 diapositivas se convierte en 1067 + 1066 + 1066. Las columnas son consecutivas, por lo que cada diapositiva comienza exactamente en el píxel después de que finalizó la anterior. Ninguna columna se cuenta dos veces y no se omite ninguna.
Paso 3: escale cada diapositiva al tamaño de salida. Cada columna se dibuja en un lienzo en el tamaño preestablecido completo, 1080 x 1350 para retrato, usando el navegador 's lienzo drawImage operación definida en el Estándar HTML WHATWG, con suavizado de imágenes de alta calidad.
¿por qué no rodear cada diapositiva y la posición #39;s de forma independiente? Porque los límites fraccionarios se desplazan. Si una tira tiene 3201 px de ancho y 4 diapositivas se calculan como 800,25 px cada una, redondear cada inicio y ancho por sí solo puede colocar una diapositiva y #39; el borde derecho un píxel más allá de la siguiente diapositiva y #39; el borde izquierdo. Al extender el resto a través de las diapositivas principales, cada límite es un número entero y cada diapositiva está dentro de un píxel de origen de los demás. En el caso 1.067 frente a 1.066, ese píxel de origen adicional cambia la escala horizontal de la salida en menos del 0,1%, lo que no es visible.
Un ejemplo trabajado con recuentos de píxeles reales
Tome un panorama de 4000 x 1333, una relación de aspecto de 30008 y elija diapositivas de retrato.
El recuento sugerido. 3.0008 / 0,8 = 3.751, que redondea a 4 diapositivas.
La tira para 4 diapositivas. La relación de tira es 3,2 y la relación de imagen de 3,0008 es menor que eso, por lo que la imagen es relativamente más alta que la tira. La herramienta mantiene el ancho total de 4000 px y recorta la altura: 4000 / 3,2 = 1250 px. Eso elimina 83 px, aproximadamente 41,5 px desde arriba y 41,5 px desde abajo.
Las diapositivas. 4000 / 4 = 1000 px cada uno sin resto, por lo que cuatro porciones de 1000 x 1250, cada una aumentada entre 1,08 y 1080 x 1350.
4000 x 1333 panorama, portrait, 4 slides
strip: x 0-4000, y 41.5-1291.5 (4000 x 1250)
slide 1: columns 0-999 -> 1080 x 1350
slide 2: columns 1000-1999 -> 1080 x 1350
slide 3: columns 2000-2999 -> 1080 x 1350
slide 4: columns 3000-3999 -> 1080 x 1350
Elegir 3 diapositivas en su lugar. Arrastre el control deslizante a 3 y la relación de tiras caerá a 2,4. Ahora la imagen es más ancha que la tira, por lo que la herramienta mantiene la altura total de 1333 px y recorta el ancho: 1333 x 2,4 = 3199,2 px, redondeado a 3199. Aproximadamente 400 px salen de cada lado. Dividir en 3, es decir 1.067 + 1.066 + 1.066 px, por lo que la primera diapositiva obtiene el píxel sobrante.
Empujándolo demasiado lejos. En 6 diapositivas, la relación de tiras sería 0,8 x 6 = 4,8, mucho más ancha que la imagen. El generador muestra una advertencia cuando la relación imagen's cae por debajo del 75% de la relación de tiras. Para esta imagen, 0,8 x 6 x 0,75 = 3,6, y 3,0 es inferior a 3,6, por lo que la página dice: " Esta imagen no es lo suficientemente ancha para 6 diapositivas con esa forma, por lo que cada diapositiva se recortará con fuerza arriba y abajo." En 5 diapositivas el umbral es 3,0 y la imagen simplemente lo borra.
Un segundo ejemplo muestra un panorama que encaja exactamente. Una imagen de 6000 x 1500 es 4:1. En las diapositivas de retrato la sugerencia es 4 / 0,8 = 5, la relación de tiras es 5 x 0,8 = 4,0 y no se recorta nada en absoluto: cinco porciones de 1200 x 1500, cada una reducida de 0,9 a 1080 x 1350. Cambie a diapositivas cuadradas y la sugerencia es 4, nuevamente sin recortar: cuatro porciones de 1500 x 1500, escaladas a 1080 x 1080.
¿cómo se hace el carrusel paso a paso?
- Añade el panorama. Abre el Divisor de carrusel de Instagram y suelte una imagen, haga clic para navegar o pegue una del portapapeles. Cualquier imagen que el navegador pueda decodificar funciona, lo que en la práctica significa PNG, JPEG, WebP, GIF y AVIF.
- Elija la forma de la diapositiva. El retrato 4:5 es el predeterminado. La nota debajo del selector reafirma para qué sirve la forma.
- Verifique el recuento de diapositivas. Acepte la sugerencia o mueva el control deslizante. La tira de vista previa se vuelve a dibujar inmediatamente y el encabezado muestra la salida, por ejemplo "4 x 1080x1350".
- Elija un formato y descárguelo. Presione "Descargue los 4 como zip" para todo el conjunto, o use "Deslizar 1", "Deslizar 2" botones para guardar diapositivas individuales.
Los archivos reciben su nombre original con un número relleno de cero: harbor.jpg se convierte en harbor-01.jpeg, harbor-02.jpeg y así sucesivamente por dentro harbor-carousel.zip. El relleno mantiene las diapositivas en orden de deslizamiento en cualquier administrador de archivos, lo cual importa cuando las seleccionas todas en tu teléfono. La biblioteca zip se carga solo cuando presiona el botón zip, por lo que la página en sí permanece liviana.
Sube las diapositivas a Instagram en orden numérico como una publicación de carrusel único. Publicarlas fuera de orden es la forma más común en que un conjunto correcto de diapositivas termina pareciendo roto.
¿debería exportar JPEG, PNG o WebP?
JPEG es la opción predeterminada y correcta para fotografías. Instagram vuelve a codificar las cargas como JPEG de todos modos, por lo que un archivo sin pérdidas compra una carga mayor y nada visible al final. La compresión JPEG está definida en Recomendación UIT-T T.81, y el generador codifica con una calidad de 0,92.
PNG no tiene pérdidas, especificado por Recomendación W3C PNG, y se adapta a panoramas que son ilustraciones, diagramas o contienen texto, donde los artefactos JPEG alrededor de bordes duros se mostrarían antes de la propia compresión de Instagram & # 39.
WebP ofrece los archivos más pequeños con una calidad similar y también utiliza 0,92 para su codificación con pérdida. Es una opción sensata para diapositivas dirigidas a otro lugar que no sea Instagram, como una galería de sitios web.
Si necesita las diapositivas en otro formato después, o una carpeta de ellas convertida en masa, la guía para conversión de formato de imagen cubre qué cambia entre JPG, PNG y WebP y cuándo vale la pena cada uno.
¿la división reducirá la calidad de la imagen?
Cortar no; escalar puede. Cada diapositiva se toma de la fuente con resolución completa y luego se escala a 1080 px de ancho.
Cuando una porción es más ancha que 1080 px, como en el ejemplo de 6000 x 1500 donde cada porción es 1200 px, la diapositiva se reduce, lo que no pierde detalles visibles. Cuando una porción es más estrecha que 1080 px, la diapositiva se amplía y se verá más suave. La imagen de 4000 x 1333 en 4 diapositivas de retrato da 1000 porciones de px, una suave ampliación de 1,08 x. Una imagen de 2000 px de ancho dividida en 5 diapositivas da 400 porciones de px, agrandadas 2,7 x y se verá suave en un teléfono.
De la aritmética se sigue una regla general: para diapositivas nítidas, la fuente debe tener al menos 1080 px de ancho por diapositiva, por lo que 4320 px para 4 diapositivas y 5400 px para 5. Si un panorama es más pequeño que eso, menos diapositivas se verán más nítidas. Para obtener más información sobre por qué ampliar no puede agregar detalles, consulte la guía en cambiar el tamaño de las imágenes sin perder calidad, que camina a través de la reducción, ampliación y remuestreo.
¿Qué causa una costura visible y cómo se fija?
La mayoría de las costuras provienen de una de cinco causas y el generador elimina las dos primeras.
| Síntoma | Causa probable | Arreglar |
|---|---|---|
| Una tira delgada repetida o faltante en una unión | Límites de cortes fraccionados redondeados de forma independiente | Utilice corte de píxeles completos, como lo hace el generador |
| La última diapositiva parece estirada o interrumpida | Píxeles restantes arrojados en una diapositiva | Distribuya el resto por las diapositivas principales |
| Se desliza fuera de secuencia | Subido en el orden incorrecto | Publicar en orden de número de archivo, 01 primero |
| Una diapositiva recortada de manera diferente al resto | Relaciones de aspecto mixtas en un poste | Exporte cada diapositiva en la misma forma |
| Sujeto cortó por la mitad de una cara o letrero | El límite de deslizamiento aterriza sobre el sujeto | Cambie el recuento de diapositivas para que se mueva un límite |
La última fila es un problema de composición, no técnico. Con 4 diapositivas, los límites se sitúan en el 25%, 50% y 75% de la tira; con 3 diapositivas, al 33% y 67%. Si la cara de una persona ' aterriza exactamente en una unión, una diapositiva más o menos generalmente mueve el corte a algún lugar inofensivo. Las caras y el texto de una unión sobreviven al deslizamiento, pero parecen incómodos cada vez que el espectador se detiene en una sola diapositiva.
¿Cuáles son los límites de la herramienta?
El control deslizante va de 2 a 10 diapositivas. Instagram permite más, pero después de las diez, un panorama típico ya no tiene suficiente ancho para darle a cada diapositiva detalles reales, y cada diapositiva se convierte en una tira estrecha que deja de leerse como una imagen.
El cultivo siempre está centrado. Si la parte importante del panorama se encuentra cerca del borde superior o inferior y el recuento elegido recorta la altura, cambie el recuento o recorte la fuente primero con el recortador de imágenes de redes sociales, que te permite elegir el punto focal.
La entrada tiene que ser un archivo que el navegador identifica como imagen y puede decodificar. Un archivo que no es una imagen se rechaza con un mensaje que lo nombra, y una imagen corrupta o en un formato que el navegador no puede leer obtiene " Esa imagen no se pudo leer." La mayoría de los navegadores no decodifican las fotos HEIC de un iPhone, así que conviértalas primero.
Como todas las herramientas del sitio, las descargas cuentan para un límite de uso diario. No hay marca de agua ni cuenta necesaria.
¿El panorama está subido a alguna parte?
No. La imagen se decodifica, recorta, corta y codifica en un lienzo HTML de su navegador, y la cremallera se ensambla localmente. No se envía nada a un servidor, se almacena ni se registra, y la página sigue funcionando con la red desconectada una vez que se ha cargado. Eso es importante para tomas de productos inéditas o trabajos de clientes que aún no has publicado.
Herramientas relacionadas para postes de carrusel
El generador de desplazamiento se encuentra junto a un puñado de otras herramientas de imagen creadas para publicaciones sociales, todas ellas del lado del cliente.
los recortador de imágenes de redes sociales recorta una sola imagen a quince tamaños de plataforma con una cuadrícula focal de nueve puntos. El generador mate coloca una imagen no cuadrada sobre un cuadrado o retrato mate para que la imagen completa sobreviva al feed, que se adapta a un poste de portada que muestra el panorama completo pequeño ante el carrusel. El generador de tarjetas fotográficas crea tarjetas de cotizaciones y gráficos estilo noticias a partir de plantillas, y el marcador de agua agrega un logotipo o una marca de agua distintiva, en una esquina o en mosaico, antes de publicar. Cada herramienta del conjunto aparece en el centro de herramientas de imagen social.
