Medio Píxel es la Razón de que tu Carrusel se Vea Borroso
Divide una foto ancha en cuatro diapositivas de carrusel y lo primero que ocurre es una cuenta: ancho entre cuatro. En una foto de 1170 píxeles eso da 292,5 píxeles por diapositiva, y medio píxel no es algo que un lienzo pueda cortar.
Lo que hace en su lugar es la parte interesante, y es peor que una costura torcida.
Qué hace un navegador con medio píxel
Cuando se le pide una porción de 292,5 píxeles, un lienzo no redondea a 292 y sigue. Remuestrea — reconstruye cada píxel del bloque como un promedio ponderado de los que lo rodean, porque la rejilla de píxeles que le piden ya no coincide con la que le dieron.
Eso es fácil de medir. Construye un origen de franjas blancas y negras de un píxel, corta una porción en un píxel entero y otra en 292,5, y lee los píxeles de vuelta:
| Porción | Píxeles que volvieron | Contraste del borde |
|---|---|---|
| Píxel entero | 0, 255, 0, 255 | 255 — exacto |
| 292,5 | 111, 143, 111, 143 | 32 |
El blanco y el negro volvieron como dos grises separados por un once por ciento. Doscientos cincuenta y cinco escalones de contraste de borde se convirtieron en treinta y dos — ochenta y siete por ciento, perdido.
Y no se queda en la costura. El bloque entero se reconstruye, así que todo detalle fino dentro de él se ablanda igual. En franjas es evidente. En una fotografía no verás nada tan ordenado; verás un carrusel algo más borroso que la imagen de partida, sin nada en pantalla que diga por qué.
El arreglo es aritmética, no un filtro de enfoque
Aquí no hay nada que corregir después. El bloque solo tiene que caer en píxeles enteros, y puede, si el ancho se hace divisible antes de cortar nada.
Toma el mayor ancho en píxeles enteros que divida exacto entre el número de diapositivas, céntralo y corta ahí. Cada porción empieza y termina entonces en un entero, así que nada se remuestrea — y todas las diapositivas salen del mismo tamaño, que es lo que un carrusel necesita igualmente, porque todas comparten una sola proporción.
El coste son unos pocos píxeles de ancho. Medido en cinco anchos habituales de móvil:
| Ancho de la foto | Diapositivas | Porción ingenua | Porción entera | Píxeles 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 |
Como mucho cuatro píxeles, y ninguno en los dos anchos que ya dividen exacto. Ese es todo el intercambio: hasta cuatro píxeles de ancho, contra cada píxel de cada bloque reconstruido a partir de sus vecinos.
La regla general es que la pérdida es como mucho uno menos que el número de diapositivas. Diez diapositivas pueden costarte nueve píxeles de una foto de varios miles.
Lo otro que decide cuánto sobrevive
Todas las diapositivas de un carrusel comparten una proporción. Solo esa restricción ya decide el ancho de la franja utilizable, porque la franja es la proporción de la diapositiva multiplicada por su número:
- Cuadrada 1:1 en tres diapositivas pide una franja 3:1.
- Vertical 4:5 en tres diapositivas pide 2,4:1 — diapositivas más altas, así que una franja más estrecha las llena.
- Horizontal 1,91:1 en tres diapositivas pide 5,73:1, que casi ninguna fotografía es.
Una foto 16:9 es 1,78:1. Frente a un objetivo de 2,4:1 no es demasiado estrecha — es demasiado baja, así que se recortan los lados para que cuadre la proporción. Frente a 3:1 se recorta más. Por eso las diapositivas verticales conservan más de una foto normal que las cuadradas, lo contrario de lo que casi todo el mundo supone.
Qué significa esto al publicar
- Redimensiona la foto a un ancho divisible entre tu número de diapositivas si te importa cada píxel — 1080 para tres, 1200 para cuatro, 1500 para cinco.
- Si no, un buen divisor debería descartar un par de píxeles en vez de cortar una porción fraccionaria. La diferencia es invisible en ancho y muy visible en nitidez.
- Elige vertical 4:5 cuando quieras conservar lo máximo de la foto, cuadrada cuando el feed sea variado, y horizontal solo para panorámicas de verdad.
- Las costuras exactas al píxel son lo que controla un divisor. Lo que no controla es la aplicación: algunos feeds ponen un pequeño hueco o una esquina redondeada entre diapositivas, así que un borde duro cruzando una costura todavía puede leerse como junta por exacto que fuera el corte.
Pruébalo
Nuestro divisor de carrusel hace la aritmética de arriba: recorta a un ancho divisible, corta en píxeles enteros y te dice exactamente cuántos píxeles descartó y con qué tamaño salió cada diapositiva. Todo ocurre en tu navegador — la foto nunca se sube.
Si la foto aún no tiene el ancho adecuado, el redimensionador de imágenes lo resuelve antes, y el comprobador de área segura muestra lo que la propia aplicación tapará una vez publiques.
FAQ
¿Por qué importa medio píxel si ni siquiera puedo ver uno?
Porque el navegador no lo descarta — reconstruye el bloque entero a su alrededor. El coste medido en un borde duro fue de 255 escalones de contraste a 32, y ese ablandamiento afecta a cada píxel de la diapositiva, no solo a la costura.
¿No puedo enfocar las diapositivas después y ya?
El enfoque devuelve contraste a los bordes que logra encontrar; no recupera detalle que se promedió, y añade halos propios. Cortar en píxeles enteros cuesta unos pocos píxeles de ancho y no necesita corrección alguna.
¿A qué ancho debo redimensionar antes de dividir?
A cualquier múltiplo del número de diapositivas. 1080 divide entre tres, cuatro, cinco, seis, ocho y nueve. 1200 divide entre tres, cuatro, cinco, seis, ocho y diez. Si ya sabes la cantidad, la regla más simple es redondear el ancho hacia abajo al múltiplo más cercano.
¿Esto vale fuera de Instagram?
Vale en cualquier sitio donde una imagen se corte en piezas iguales, porque es una propiedad del lienzo y no de la aplicación. En los carruseles se nota más porque las diapositivas quedan una al lado de otra e invitan a comparar.
¿Serán las costuras realmente invisibles?
Los píxeles encajarán exactamente. Que la junta se lea como invisible depende también del feed, que puede añadir un hueco o una esquina redondeada entre diapositivas, y de la imagen: el detalle sobre la costura la esconde, el color plano y las líneas rectas no.