Un banner de perfil no es una imagen en un sitio. Es una imagen recortada de forma distinta en un móvil, una tableta, un navegador de escritorio y, en algunas plataformas, una tele, y la única parte visible en todos ellos es una franja por el centro.
Diseñar para el lienzo entero y descubrir que el logotipo ha quedado cortado en el móvil es la experiencia de siempre. El lienzo es el tamaño de subida; el área de diseño es más pequeña.
¿Por qué la zona segura es tanto más pequeña?
Porque el diseño más ancho y el más estrecho se diferencian en más del doble. Un navegador de escritorio enseña una franja ancha y baja; un móvil enseña una porción mucho más estrecha del mismo archivo, sin los lados.
La imagen no se reajusta para cada uno. Se recorta desde el centro hacia fuera, así que el contenido va saliendo por los bordes a medida que la ventana se estrecha. Lo que está dentro de la franja central está a salvo en todas partes, y lo que queda fuera es decoración que algunos no verán nunca.
La consecuencia práctica es que un banner tiene que funcionar dos veces: como composición a todo lo ancho para el escritorio, y como la franja central sola para todos los demás.
Probarlo no cuesta nada y casi nadie lo hace. Estrechar la ventana del navegador desde el ancho completo hasta el de un móvil mientras miras una página de perfil enseña el recorte en directo, y en unos diez segundos sabes qué partes de un diseño sobreviven.
¿Dónde se coloca la foto de perfil?
Encima del banner, y su posición cambia con el diseño. Ese solapamiento es lo segundo que hay que prever, porque el avatar tapa una esquina del banner en escritorio y otra parte distinta en el móvil.
Un banner con el motivo justo donde cae el avatar es un banner con el motivo tapado para siempre en uno de los diseños. Dejar esa zona vacía a propósito es el arreglo, y no cuesta nada.
| Elemento | Qué cambia |
|---|---|
| Ancho del banner | se recorta desde el centro al estrecharse la pantalla |
| Posición del avatar | en una esquina en escritorio, a menudo centrado en el móvil |
| Forma del avatar | círculo en casi todas las plataformas, cuadrado en unas pocas |
| Texto superpuesto | algunas plataformas añaden un nombre sobre la imagen |
El recorte circular es el que pilla a los logotipos. Un logotipo cuadrado metido en un marco circular pierde las esquinas, así que la marca tiene que ir centrada y con margen alrededor en lugar de llenar el cuadrado.
¿Por qué portadas y banners son distintos?
Porque hacen trabajos distintos. Una portada va encima de una página y suele tener forma fija; un banner es una franja que se adapta. En la conversación se usan como sinónimos y se comportan de forma distinta.
Las portadas de eventos son las más limitadas de todas, porque la plataforma pone encima de parte de la imagen la fecha y el título, y ese texto no es opcional. Cualquier diseño que vaya ahí compite con él.
Las imágenes de panel de las plataformas de streaming son el caso contrario: pequeñas, fijas y mostradas en una cuadrícula, así que se parecen más a iconos que a banners y ganan si se leen de un vistazo en lugar de tener detalle.
¿Y las portadas de audio?
Son las más estrictas de todas, porque se muestran muy pequeñas y a menudo cuadradas. Las portadas de pódcast y de disco se ven al tamaño de una miniatura más veces que a tamaño completo, lo que hace que el detalle fino y el texto pequeño no valgan nada.
La prueba es reducirla más o menos al tamaño de una uña y ver si todavía se reconoce. La mayoría de diseños no la pasan, y casi todos se arreglan quitando algo.
Los formatos verticales pensados para una aplicación de música son el otro extremo: un visual corto en bucle a pantalla completa en vertical, donde el diseño tiene que sobrevivir a que lo tapen los controles de reproducción de abajo.
¿Cada cuánto cambian?
De vez en cuando, y rara vez mucho. Las plataformas ajustan las medidas cuando rediseñan una página, y la proporción suele sobrevivir aunque cambie el número de píxeles.
Ese es el argumento para diseñar a la proporción y exportar a la cifra actual, y no al revés. Un diseño construido alrededor de una proporción se vuelve a exportar en un minuto cuando una plataforma cambia; uno construido alrededor de unos píxeles concretos hay que rehacerlo.
Guardar el archivo de origen con márgenes generosos alrededor de la zona segura cubre el resto. Un banner que se puede volver a recortar sin redibujarlo es uno que sobrevive al siguiente rediseño.
Preguntas que hace la gente
¿Necesito un banner aparte para el modo oscuro? Las plataformas no los cambian, así que la misma imagen tiene que leerse en los dos. Evita fondos que den por hecho uno u otro.
¿El banner debe repetir mi logotipo? Una vez, pequeño y fuera de la zona del avatar. Ya está en la página como foto de perfil.
¿Puedo poner una URL en un banner? No se puede pulsar y a menudo queda recortada. Para eso está el campo de enlace del perfil.
¿Por qué mi banner se ve borroso? Se subió por debajo del ancho de la plataforma y se amplió. Súbelo al tamaño indicado o por encima.
¿Sirve un PNG transparente? La transparencia suele aplanarse sobre un fondo que no eliges. Exporta con el fondo que quieras.
Diseña el centro, decora los bordes. Recortar y girar imágenes aplica la máscara circular para que veas qué sobrevive, y redimensionar imágenes produce el original cuadrado. Las medidas en sí son una tabla, de momento en inglés: tamaños de imagen para redes sociales reúne los avatares de Instagram, Facebook y TikTok y los banners de X, LinkedIn, Twitch y sus paneles, Discord, Reddit, eventos de Facebook, tableros de Pinterest, portadas de pódcast y un Canvas de Spotify. Los banners de YouTube y las portadas de Facebook tienen página propia.