Guía completa
Las imágenes de perfil circulares dominan las interfaces modernas. WhatsApp, Slack, Twitter, LinkedIn, Discord, comentarios de Instagram, Zoom y docenas de aplicaciones muestran avatares como círculos independientemente de cómo los subas. El problema: su algoritmo de recorte automático utiliza el centro de la imagen y, a menudo, recorta la parte superior de la cabeza, los hombros o el contexto del fondo que debería estar encuadrado.
¿Por qué recortar usted mismo en un círculo?
Mejor control de la composiciónAuto-cropping centers on the image center pixel. Manual cropping lets you put the eye line in the upper third (the rule of thirds), follow the eyes' direction, and frame your face the way you want.
Bordes verdaderamente transparentesA square photo with a "circular" CSS mask still has square pixels underneath. A true circular PNG has transparent corners, which means it works correctly on any background — colored, patterned, gradient, or photographic.
Consistencia multiplataformaLas diferentes plataformas se recortan de forma ligeramente diferente. Un PNG circular precortado parece idéntico en todas partes.
apariencia profesionalA perfectly framed circular crop with clean edges signals attention to detail. It's a small thing buyers, recruiters, and clients notice subconsciously.
Donde los cultivos circulares son esenciales - WhatsApp / Telegram / Signal: íconos de perfil y grupo - Slack / Discord: avatares del espacio de trabajo e íconos de bot - Twitter / X: foto de perfil (recortada automáticamente en un círculo) - LinkedIn: foto de perfil, logotipo de la empresa - Instagram: perfil, círculos de historias - Zoom: avatar con cámara web apagada - Contactos de iOS / Android: fotos de contactos - Diseño de canales de Podcast y YouTube: elementos de marca circulares - Logotipos para insignias circulares, stickers, íconos de aplicaciones
Consejos de composición para fotos de perfil circular
Para disparos a la cabeza- Eyes should sit in the upper third of the circle - Crown of head should have ~10% margin from circle edge - Chin should have ~5% margin from bottom of circle - Shoulders should be visible (don't crop too tight)
Para logotipos- Los elementos importantes deben estar dentro del cuadrado inscrito - Evite colocar detalles críticos cerca del borde del círculo (pueden estar cortados por marcos o anillos) - Pruebe cómo se lee el logotipo en tamaños pequeños (40–60 px)
Para perfiles de animales/mascotas- Centre los ojos, no la nariz - Mantenga las orejas dentro del círculo si es posible - Utilice un fondo contrastante para una mejor visibilidad
Para avatares abstractos/decorativos- Los diseños simétricos funcionan mejor en círculos - Utilice formas simples y llamativas que se lean en tamaños pequeños - Alto contraste entre el sujeto y el fondo
La mejor resolución para cultivos circulares
| Plataforma | Tamaño de pantalla | Fuente recomendada |
|---|
| WhatsApp | 192×192 | 500×500 |
| flojo | 192×192 | 500×500 |
| Gorjeo | 400×400 | 1000×1000 |
| LinkedIn | 400×400 | 1000×1000 |
| Instagram | 320×320 | 1000×1000 |
| discordia | 128×128 | 500×500 |
| Ampliar | 200×200 | 500×500 |
Errores comunes - Recortar demasiado apretado: corta la frente o la barbilla, hace que el avatar se sienta apretado -Sujeto descentrado: la colocación de la cara parece más accidental que intencional -Fuente de baja resolución: produce un avatar borroso en tamaños de pantalla retina -Guardar como JPG: reemplaza las esquinas transparentes con fondo blanco -Usando un fondo ocupado: distrae la atención del rostro/sujeto -Olvidar los requisitos de la plataforma: algunas plataformas imponen una relación de aspecto de 1:1 para los avatares
El caso para mantener las versiones originales + circularesMantenga siempre la foto cuadrada o rectangular original en su archivo. Es posible que diferentes plataformas necesiten cultivos diferentes en el futuro y los archivos fuente le brindan la máxima flexibilidad. El PNG circular es un activo derivado, fácil de regenerar según sea necesario.
Herramientas relacionadas
Recortador de imágenesRecortar imagen en línea gratisEliminador de fondo In-Depth Guide, Best Practices & Expert FAQs
Revisado por Abdulkeni Abdelwahid, editor · Last updated July 20, 2026
A true circular crop needs an alpha channel — otherwise the four corners around your circle stay white and look like a bad Photoshop mistake wherever the destination background isn't also white. Our circle cropper draws a clipping path on an HTML5 canvas, then exports as PNG-24 with genuine transparency in the corners. The center of the crop is aligned to a smart-detected face when present, so team photos come out with the head correctly centered instead of the neck. This page explains the difference between visual circles (masked with CSS `border-radius`) and true circular images (needed for print, PDF, and any app that doesn't apply CSS), how to size the source correctly so the circle isn't pixelated, and how to add a stroke or drop shadow that renders on any background.
Para quién es esta herramienta
Fotos de perfil para LinkedIn, Slack y Zoom
La mayoría de las aplicaciones muestran avatares como círculos incluso si subes un cuadrado. El recorte previo evita el incómodo autocentrado en la oreja.
Páginas del equipo en sitios web de la empresa
Los disparos a la cabeza circulares consistentes en la página de un equipo se ven mucho más pulidos que los cuadrados y círculos mixtos.
Avatares de firma de correo electrónico
Las firmas se encuentran en Gmail/Outlook, donde CSS es limitado: los verdaderos PNG circulares se muestran correctamente en todos los clientes.
Materiales impresos y certificados en PDF.
El software de impresión ignora CSS. Sólo los verdaderos PNG circulares se representan como círculos en tarjetas de presentación, folletos y premios.
Arte del episodio del podcast
Spotify, Apple Podcasts y Overcast recortan el arte de los episodios de varias maneras. Proporcionar una verdadera versión circular mantiene la foto del anfitrión centrada.
Flujo de trabajo paso a paso
- 1
Sube una foto de origen cuadrada
Portrait framing works best; the closer to 1:1, the less you'll lose to the crop.
- 2
Centra la cara automáticamente o arrastra manualmente
La detección de rostros coloca el centro de recorte en el rostro. Ajústelo con la manija de arrastre si lo desea más bajo (hombros visibles) o más alto (foto en la cabeza).
- 3
Elige el diámetro
Tamaños comunes: 400 px (Slack), 500 px (LinkedIn), 640 px (Discord), 1024 px (arte de podcast), 2048 px (impresión).
- 4
Añade contorno o sombra opcional
Un trazo blanco de 4 px ayuda a que el círculo se destaque en fondos oscuros de la página del equipo.
- 5
Exportar como PNG (no JPG)
PNG conserva la transparencia en las esquinas; JPG los llenará de blanco.
Ejemplos reales
Actualización de la página del equipo de inicio
Se rediseñó una página de equipo de 12 personas con avatares circulares. El recorte por lotes en una sesión produce 12 PNG enmarcados consistentemente a 500 px en menos de 5 minutos.
Foto del autor de un libro.
Un editor necesita una foto circular de 1200 px para la solapa de la contraportada. Recortar a PNG verdadero permite a la impresora colocarlo en cualquier color de fondo.
Cambio de marca del podcast
Un espectáculo intercambia fotografías cuadradas del presentador por otras circulares que combinan con nuevas obras de arte. Los PNG circulares funcionan en Apple Podcasts, Spotify y el sitio web del programa.
Buenas prácticas de nuestros editores
- Comience con una fuente de al menos 2 veces el diámetro del objetivo para que la reducción de escala sea nítida.
- Centrarse en los ojos: la clásica regla del retrato de los tercios coloca los ojos en el tercio superior del corte.
- Use PNG for anywhere transparency matters; use JPG only if you're baking in a specific background color.
- Agregue un trazo sutil de 1 a 2 px que coincida con el color de su marca para las páginas del equipo: ayuda a la coherencia.
- Verifique el recorte con fondos claros y oscuros antes de publicarlo.
- Keep the aspect ratio of the source close to 1:1 so you're not wasting a large portion of the photo.
Comparación de un vistazo
| Enfoque | ¿Trabaja en impresión? | ¿Funciona en correo electrónico? | Extensión de archivo |
|---|
| si | si | .png |
| No | Rara vez | .jpg/.png + CSS |
| No | No | .png+SVG |
Errores comunes y cómo solucionarlos
✗ Exportar como JPG
✓ JPG llena las esquinas de blanco. Exporte siempre cultivos circulares como PNG.
✗ Subir una fuente de baja resolución
✓ A 200 px source can't produce a sharp 500 px circle. Start with at least 2× the final diameter.
✗ Centrar el cultivo en la cabeza en lugar de en la cara
✓ Centrar la cabeza deja la boca baja en el círculo. Céntrese en los ojos para lograr una apariencia clásica de retrato en la cabeza.
✗ Agregar un fondo de color dentro del círculo
✓ Los fondos sólidos dentro del círculo anulan el punto: mantén el sujeto y deja que el círculo sea transparente por fuera.
Solución de problemas
Síntoma: Las esquinas son blancas en Slack
Causa: Exportaste como JPG.
Solución: Reexportar como PNG.
Síntoma: El círculo parece pixelado
Causa: La resolución de origen es menor que el diámetro de destino.
Solución: Cargue una fuente más grande o reduzca el diámetro del objetivo.
Síntoma: La cara está descentrada
Causa: La detección automática falló en el perfil lateral o en la cara ocluida.
Solución: Arrastre el centro de recorte manualmente para reposicionarlo.
Preguntas frecuentes de expertos
¿La salida es realmente transparente? + Sí, el PNG exportado tiene un canal alfa adecuado: las cuatro esquinas son transparentes.
¿Qué tamaño debo elegir para LinkedIn? + LinkedIn's max is 8 MB and it displays avatars at 400×400 px, but they accept up to 20000×20000. 800 px is a safe high-quality choice.
¿Puedo añadir un contorno alrededor del círculo? + Sí, el ancho y el color del trazo se pueden configurar hasta 8 px.
¿Funcionará para imprimir tarjetas de visita? + Sí, exporte a 300 DPI (diámetro objetivo × 300/72) y entregue el PNG a su impresora.
¿Puedo recortar a un óvalo en lugar de un círculo perfecto? + Esta herramienta se bloquea en un círculo 1:1. Utilice nuestro Image Cropper para relaciones de aspecto arbitrarias.
¿Elimina los datos EXIF? + Sí, la recodificación del lienzo elimina EXIF, incluido el GPS de forma predeterminada.
¿Qué tamaño puede tener la fuente? + Hasta 50 MP en navegadores de escritorio. Los archivos más grandes pueden fallar en dispositivos con poca RAM.
¿Puedo procesar varias fotos por lotes? + Sí, el modo por lotes recorta hasta 20 fotografías a la vez usando el mismo desplazamiento central.
Referencias & lecturas adicionales
- MDN: CanvasRenderingContext2D.clip()
Continúa con herramientas relacionadas
Recortador de imágenesEliminador de fondoRedimensionador de imágenesConversor de imágenes