Tamaños de imagen social, y el único encuadre que sobrevive en todas partes

Las plataformas recortan, no añaden bandas

Un reproductor de vídeo que recibe la forma equivocada le pone bandas negras alrededor. Un feed social no, porque las bandas parecen un error en una columna que se desplaza y desperdician lo más escaso de la pantalla. Rellena el hueco en su lugar, lo que significa que parte de tu imagen no se muestra. Dónde cae el corte depende de la plataforma: unas recortan desde el centro, otras tiran hacia arriba suponiendo que ahí están las caras, otras usan un modelo de saliencia. No controlas cuál, y no deberías diseñar contra ninguna en particular.

Ese es el argumento a favor de un área segura. Si tu sujeto — una cara, un titular, un logo, un precio — está dentro de la región que sobrevive a todos los recortes que la imagen encontrará, la elección de la plataforma deja de importar. Queda saber qué tamaño tiene esa región, y resulta que tiene una respuesta lo bastante limpia para memorizarla.

El área segura es la proporción más estrecha dividida por la más ancha

Escribe la proporción del original como anchura sobre altura y llámala r. Un hueco objetivo de proporción t la recorta. Si t es más ancha que r, el recorte conserva toda la anchura y toma una banda horizontal de la altura; la fracción vertical que sobrevive es r dividida entre t. Si t es más estrecha que r, el recorte conserva toda la altura y toma una banda vertical de la anchura; la fracción horizontal que sobrevive es t dividida entre r. A lo largo de todo un conjunto de objetivos, solo los extremos atan: en horizontal te limita el objetivo más estrecho, en vertical el más ancho.

Así que la fracción de anchura que sobrevive es el objetivo más estrecho dividido entre r, y la fracción de altura que sobrevive es r dividida entre el objetivo más ancho — cada una con tope en uno, ya que un recorte no puede mostrar más que la imagen entera. Multiplícalas para el área y la r se cancela exactamente: el área segura es la proporción objetivo más estrecha dividida entre la más ancha, y no depende en absoluto de la forma del original, siempre que este se sitúe entre los dos extremos. Ese es el resultado que vale la pena llevarse, y no está publicado en ninguna parte.

Ponle números. Un conjunto realista, para una marca que publica en formato de vídeo vertical, feed en retrato, cuadrado, vídeo apaisado y vista previa de enlace, va de 9:16 en el extremo estrecho a 1,91:1 en el ancho. Eso es 0,5625 dividido entre 1,91, o sea el 29,45 %. Menos de tres píxeles de cada diez de lo que diseñaste tienen garantizado que se vean. Quita el formato de vídeo vertical y el rango pasa a 4:5 hasta 1,91:1, dando el 41,88 %. Diseña solo para cuadrado y vistas previas de enlace y obtienes el 52,36 %. En el otro sentido, usa un original cinematográfico de 2,35:1, más ancho que todos los objetivos, y caes al 23,94 %; un banner de 3:1 cae al 18,75 %.

El mismo resultado en píxeles

Sobre un lienzo cuadrado de 1080 píxeles de lado, la caja segura para todo el rango 9:16 a 1,91:1 mide 608 por 565 píxeles — el 29,45 % del área, exactamente como dice la fórmula. Sobre un lienzo en retrato 4:5 de 1080 por 1350 mide 759 por 565. Sobre un lienzo de vista previa de enlace de 1200 por 628 mide 353 por 628. Sobre un lienzo vertical de 1080 por 1920 mide 1080 por 565. Cuatro lienzos distintos, cuatro cajas distintas, y el mismo 29,45 % cada vez.

El 565 recurrente no es casualidad. La altura segura es la anchura del lienzo dividida por la proporción objetivo más ancha, y 1080 entre 1,91 son 565,4. Todo lo que quieras que sobreviva a un recorte de 1,91:1 tiene que vivir en una banda horizontal de 565 píxeles de alto, hagas lo que hagas por lo demás. De igual modo, la anchura segura es la altura del lienzo multiplicada por la proporción objetivo más estrecha, y por eso el lienzo vertical no pierde nada en horizontal.

Un corolario elegante: la proporción de la propia caja segura es el objetivo más estrecho por el más ancho, dividido por la proporción del original. Iguálalo a uno y obtienes una zona segura cuadrada exactamente cuando el original está en la media geométrica de los dos extremos — la raíz de 0,5625 por 1,91, o sea 1,0365 a 1, esencialmente un cuadrado. Así que si quieres la mayor zona segura cuadrada en el rango más amplio de ubicaciones, diseña sobre un lienzo apenas más ancho que alto.

Dimensión de subida, dimensión de visualización y el multiplicador retina

Tres números distintos se llaman «el tamaño». La dimensión de subida es lo que envías. La dimensión de visualización es cuántos píxeles CSS de ancho tiene el hueco en la pantalla del lector. La razón de píxeles del dispositivo multiplica la segunda para dar el número de píxeles reales de que dispone la pantalla. Un hueco de 360 píxeles CSS de ancho necesita 720 píxeles de dispositivo en una pantalla de dos veces y 1080 en una de tres veces — que es justo por qué el 1080 reaparece en las guías y por qué enviar menos produce algo visiblemente blando en un móvil moderno.

Las dimensiones publicadas que existen conviene conocerlas y fecharlas. La documentación de compartición de Meta recomienda imágenes de al menos 1200 por 630 píxeles para dispositivos de alta resolución, da 200 por 200 como dimensión mínima permitida, pide mantenerse lo más cerca posible de una proporción de 1,91:1 para que la imagen no se recorte en el feed, y limita el archivo a 8 MB. La ayuda de Instagram documenta que una foto de entre 320 y 1080 píxeles de ancho conserva su resolución original siempre que la proporción esté entre 1,91:1 y 4:5. Ambas están vigentes al escribir esto y ambas cambiarán; las proporciones que contienen son la parte duradera.

La compresión, y lo que hace al texto dentro de una imagen

Cada plataforma vuelve a codificar lo que subes, con un ajuste de calidad que no publica y que cambia sin avisar. La compresión con pérdida es más dura justo con el contenido que los marketeros meten en las imágenes: bordes nítidos entre dos colores planos, que es lo que es la tipografía. Una fotografía pierde detalle que nunca mirabas; un rótulo gana un halo que sí ves.

El paso de redimensionado lo agrava, y esta parte es aritmética y no intuición. Diseña un rótulo de 48 píxeles en un lienzo de 1080 de ancho y llega a 48 píxeles. Diseña el mismo rótulo de 48 píxeles en un lienzo de 1440 y, tras reducir a 1080, llega a 36. En un lienzo de 2160 llega a 24 — la mitad del tamaño que dibujaste, y el tamaño al que un grosor fino deja de ser legible en un móvil sostenido con el brazo extendido. Trabajar más grande por seguridad es exactamente lo contrario de seguro si la plataforma normaliza la anchura.

La vista previa de enlace es otra proporción más

El propio protocolo Open Graph define las propiedades — og:image, og:image:width, og:image:height, og:image:type, og:image:alt — y no especifica dimensión en píxeles alguna. La forma 1,91:1 que hoy usan todos los generadores de vistas previas vino de la guía de compartición de Facebook, que aconseja mantenerse lo más cerca posible de esa proporción y usar al menos 1200 por 630 píxeles. Todo lo demás la heredó porque alinearse con la plataforma dominante era más fácil que negociar.

Para el cálculo del área segura, la vista previa de enlace importa más de lo que sugiere su cuota de tráfico, porque a 1,91:1 es la proporción más ancha de casi todos los conjuntos, y la proporción más ancha es la que fija la altura de la caja segura. Quítala y todo el cálculo mejora: un conjunto que va de 4:5 a 16:9 tiene un área segura del 45,00 % en vez del 41,88 %, únicamente porque 16:9 es más estrecho que 1,91:1. Si tu imagen de vista previa se produce aparte de tu imagen social — y debería, porque una es una tarjeta y la otra una publicación — puedes sacar el 1,91:1 del conjunto que la imagen social debe sobrevivir, y esa sola decisión vale más que cualquier cantidad de encuadre cuidadoso.

Preguntas frecuentes

¿Qué porcentaje de mi imagen está garantizado que se vea?

La proporción más estrecha en la que se mostrará, dividida por la más ancha. Esa es toda la respuesta, y es independiente de la forma sobre la que diseñaste mientras esa forma caiga entre ambas. De una ubicación vertical 9:16 hasta una vista previa de enlace 1,91:1, es el 29,45 %. De 4:5 a 1,91:1, el 41,88 %. De cuadrado a 1,91:1, el 52,36 %. De 4:5 a 16:9, el 45,00 %. Diseña fuera del rango y empeora en vez de mejorar: un original cinematográfico de 2,35:1 baja al 23,94 % y un banner de 3:1 al 18,75 %.

¿Sobre qué lienzo diseño si solo quiero hacer una imagen?

Cualquier forma entre la ubicación más estrecha y la más ancha da la misma área segura, así que la elección va de en qué dirección quieres que corra el margen desperdiciado, no de cuánto conservas. Si quieres que la zona segura sea ella misma cuadrada, diseña en la media geométrica de tus extremos: para un rango 9:16 a 1,91:1 eso es 1,0365 a 1, esencialmente un lienzo cuadrado, que da una caja segura de 608 por 565 dentro de 1080 por 1080. Si la mayoría de tus ubicaciones son en retrato, un lienzo 4:5 de 1080 por 1350 da una caja segura más ancha, 759 por 565, con el mismo 29,45 %. Simplemente no salgas del rango: más ancho que tu ubicación más ancha o más estrecho que la más estrecha y pierdes área para nada.

¿Por qué cambian constantemente las dimensiones publicadas en píxeles?

Porque son consecuencia de una decisión de producto, no de un estándar. Una plataforma ensancha su columna de feed, añade un formato, cambia cómo trata un recorte más alto o apunta a una nueva densidad de pantalla, y todos los tamaños recomendados aguas abajo se mueven. Por eso un artículo que codifica los números de este año caduca en un año, y por eso este está construido sobre proporciones. Las dimensiones que vale la pena conocer son las que una plataforma documenta y fecha ella misma: Meta pide actualmente al menos 1200 por 630 con un mínimo de 200 por 200, un tope de 8 MB y una forma lo más cercana posible a 1,91:1, e Instagram conserva actualmente la resolución original para anchuras entre 320 y 1080 cuando la proporción está entre 1,91:1 y 4:5. Comprueba ambas antes de usar cualquiera.

¿Debo subir una imagen mayor que la anchura recomendada?

Solo hasta el punto en que la plataforma deja de conservar tu resolución, y nunca por el texto. Subir por encima de la anchura a la que una plataforma normaliza implica que reduzca, y una reducción encoge la tipografía en proporción exacta: un rótulo de 48 píxeles diseñado en un lienzo de 1440 llega a 36 píxeles tras redimensionar a 1080, y en uno de 2160 llega a 24. Diseña a la anchura que la plataforma preserva, dimensiona tu tipografía contra esa anchura, y recuerda que la anchura de visualización en píxeles CSS es aún menor — un hueco de 360 puntos en una pantalla de tres veces consume exactamente 1080 píxeles de dispositivo, de ahí que ese número reaparezca.

¿Puedo usar la misma imagen para una publicación social y una vista previa de enlace?

Puedes, y te cuesta área real. La vista previa de enlace es la proporción más ancha de casi todos los conjuntos, a 1,91:1, y la proporción más ancha es la que limita la altura de tu caja segura — 1080 entre 1,91 son 565 píxeles, de ahí ese número recurrente. Quita la vista previa de enlace y un conjunto que va de 4:5 a 16:9 tiene un área segura del 45,00 % en vez del 41,88 %; quita también el formato de vídeo vertical y de cuadrado a 1,91:1 da el 52,36 %. Como una tarjeta de vista previa y una publicación de feed tienen trabajos distintos de todos modos, producirlas por separado suele ser la mejor respuesta, y mejora la geometría gratis.