Toda plataforma que muestra una foto de perfil la muestra como círculo. Tú subes un cuadrado; la app le aplica la máscara. Esa máscara es todo el problema, porque un anillo dibujado en el borde del cuadrado se traza centrado en la línea por donde la máscara corta — así que la mitad exterior del trazo cae fuera del círculo y se descarta.
Lo medimos trazando un anillo, aplicando la máscara circular y contando los píxeles que sobreviven en la línea del centro:
| Avatar | Anillo pedido | Anillo que sobrevive |
|---|---|---|
| 400 px | 20 px | 10 px |
| 400 px | 40 px | 20 px |
| 1000 px | 60 px | 30 px |
Exactamente la mitad, siempre, en cualquier tamaño. Y no se ve roto — se ve como un anillo más fino del que elegiste, y por eso nadie lo investiga. Simplemente te llevas, en silencio, un diseño distinto del que hiciste.
Traza el anillo en el radio R − A/2 en lugar de R, y el ancho entero cae dentro del círculo. Medido igual: 20 px pedidos, 20 px sobreviviendo; 40 por 40; 60 por 60. Esta herramienta hace eso, y te enseña el tercer panel de arriba — los mismos ajustes dibujados como siempre, después del recorte — para que veas la diferencia en vez de creernos.
Un círculo inscrito en un cuadrado cubre π/4 de él. Contar los píxeles que sobreviven a la máscara da 21,46 % de la imagen perdida, idéntico a 400 px y a 1000 px, que es exactamente 1 − π/4. Las esquinas nunca son tuyas. Todo lo que te importe — una cara, un logo, un texto — tiene que caber dentro del círculo inscrito, o no está en la foto.
El anillo entonces come hacia dentro de lo que queda:
| Avatar | Anillo | Foto restante | Foto oculta |
|---|---|---|---|
| 400 px | 8 px | 384 px | 7,8 % |
| 400 px | 20 px | 360 px | 19 % |
| 400 px | 40 px | 320 px | 36 % |
| 1000 px | 60 px | 880 px | 22,6 % |
Por eso aquí el ancho del anillo es un porcentaje del avatar y no una cuenta de píxeles. Un anillo del 5 % se ve igual en una exportación de 400 px y en una de 1500 px; 20 px no.
Cómo se contaron esos píxeles, y el código que los contó, está escrito en La mitad del anillo de tu foto de perfil se tira, y nada te avisa.
Como las esquinas se enmascaran igual, la exportación honesta las deja transparentes — lo que ves es lo que toda plataforma va a mostrar. Pero algunos sitios no recortan en círculo: ciertos foros, ciertas apps de chat y la versión grande de la foto en la página de perfil. Ahí, las esquinas transparentes salen con el color de fondo de esa página, y puede parecer un error. Si vas a publicar donde quizá se vea el cuadrado, rellena las esquinas con el color del anillo, blanco o negro.
No. El archivo lo lee tu navegador, se dibuja en un canvas de la página y se te devuelve como descarga. Nunca llega a un servidor, y por eso sigue funcionando con la pestaña sin conexión una vez cargada la página.
Porque lo es. Un anillo trazado en el borde del cuadrado queda cortado a la mitad por el recorte circular — medido en exactamente la mitad, en todos los tamaños que probamos. Mete el trazo hacia dentro la mitad de su ancho y el anillo entero sobrevive. Esa es la única diferencia.
800 × 800 queda cómodamente por encima de lo que muestra cualquier plataforma grande, así que sobrevive a su reducción con detalle de sobra. Ir a 1500 cuesta tamaño de archivo y no compra nada, salvo que la plataforma enseñe una versión grande en la página de perfil.
Para que el diseño sobreviva a un cambio de tamaño de exportación. Un anillo de 20 píxeles es contundente a 400 px y casi invisible a 1500 px; el 5 % es 5 % en ambos. La herramienta te enseña el ancho en píxeles que sale.
Normalmente sí — se enmascaran, así que la transparencia es el archivo honesto. Rellénalas solo si publicas donde se vea el cuadrado sin recortar, donde la transparencia tomaría el color de fondo de esa página.
Sí, y ahí importa más: un logo con un margen ajustado pierde sus esquinas contra el círculo. Deja aire alrededor de la marca, mantén el anillo fino y revisa la vista redonda en vez de la cuadrada.
Sí. El dibujo lo hace el mismo canvas que usa el escritorio. Las fotos muy grandes las limita la memoria del navegador, no la herramienta; si la descarga sale en blanco, redimensiona la foto antes.
Aquí no — la exportación es un PNG fijo. La mayoría de plataformas aplana un avatar animado a su primer fotograma de todos modos, así que la respuesta práctica es exportar ese fotograma y ponerle el anillo.