Tutorial WordPress: Hacer imágenes redondas para avatares y testimonios con CSS

Introducción

Convertir imágenes cuadradas en círculos para avatares y testimonios es una técnica sencilla pero muy efectiva para mejorar el aspecto visual de un tema de WordPress. En este artículo encontrarás explicaciones detalladas, mejores prácticas, ejemplos prácticos (CSS, HTML y PHP) y consideraciones de accesibilidad y rendimiento. Todos los ejemplos de código están listados para copiar y pegar directamente en tu tema o child theme.

Por qué usar imágenes redondas

Estética: los círculos aportan un aspecto moderno y uniforme.
Jerarquía visual: facilitan la identificación rápida del autor o testimonial.
Consistencia: ayudan a que imágenes con distintos encuadres se presenten de forma coherente.

Requisitos y recomendaciones previas

Procura generar miniaturas cuadradas (ej. 150×150) para evitar deformaciones.
Usa object-fit: cover o background-size: cover para conservar el encuadre importante de la imagen.
Optimiza las imágenes (compresión y tamaños) para no cargar archivos excesivos en la web.

CSS básico para imágenes redondas

La forma más común y compatible es usar border-radius: 50%. A continuación un ejemplo mínimo que cubre la mayor parte de los casos y añade un borde y sombra opcional:

.avatar,
.testimonial-avatar img {
  display: block            / evita espacios no deseados en inline images /
  width: 80px               / tamaño controlable /
  height: 80px              / mantener cuadrado para círculo perfecto /
  border-radius: 50%        / hace el círculo /
  overflow: hidden          / recorta contenido si aplica /
  object-fit: cover         / conserva encuadre y recorta el resto /
  box-shadow: 0 2px 6px rgba(0,0,0,0.12)
  border: 2px solid #fff
}

Explicación rápida

width/height: asegúrate de que la caja sea cuadrada para que border-radius:50% forme un círculo perfecto.
object-fit: cover: mantiene la proporción rellenando la caja y recortando lo necesario, ideal para imágenes insertadas con ltimggt.
overflow: hidden: protege contra contenidos que se salgan del contenedor.

Uso con background-image (cuando quieres controlar posición y tamaño con CSS)

Para elementos que usan background-image (por ejemplo avatares generados por CSS), el enfoque es igualmente sencillo:

.avatar-bg {
  width: 100px
  height: 100px
  border-radius: 50%
  background-image: url(/wp-content/uploads/2025/01/persona.jpg)
  background-position: center center
  background-size: cover
  background-repeat: no-repeat
}

clip-path como alternativa

Clip-path ofrece un recorte exacto y puede ser útil para animaciones o formas no circulares, pero no es tan necesario aquí y tiene soporte algo menor en navegadores antiguos. Ejemplo:

.avatar-clip {
  width: 120px
  height: 120px
  -webkit-clip-path: circle(50% at 50% 50%)
  clip-path: circle(50% at 50% 50%)
  object-fit: cover
}

Nota sobre compatibilidad

Border-radius funciona en prácticamente todos los navegadores modernos y antiguos (IE9 ). Clip-path funciona en la mayoría de los navegadores actuales pero puede requerir prefijos o un fallback con border-radius.

Integración con WordPress — generar miniaturas cuadradas

Para asegurar que WordPress genere un tamaño cuadrado ideal para tus avatares o testimonios, añade una imagen personalizada en functions.php:

// functions.php (child theme)
add_action(after_setup_theme, function() {
  add_image_size(avatar-square, 150, 150, true) // 150x150 recortado
})

Después de añadir esto, regenera miniaturas con un plugin como Regenerate Thumbnails para que las imágenes existentes obtengan la nueva tamaño.

Mostrar la miniatura en plantillas

Ejemplo sencillo para mostrar la miniatura en loop de entradas, testimonios o perfiles:

if ( has_post_thumbnail() ) {
  the_post_thumbnail(avatar-square, array(class => testimonial-avatar))
} else {
  // fallback a una imagen por defecto
  echo ltimg src= . get_stylesheet_directory_uri() . /assets/img/default-avatar.png class=testimonial-avatar alt=Avatar /gt
}

Ejemplo completo de HTML para un bloque de testimonio

Añade estructura semántica en tu plantilla o bloque. Si usas Gutenberg, aplica clases al bloque de imagen o a un grupo para aplicar CSS personalizado.

ltarticle class=testimonialgt
  ltfigure class=testimonial-figuregt
    ltimg src=/wp-content/uploads/2025/01/avatar-ejemplo.jpg alt=Foto de Juan Pérez class=testimonial-avatar width=100 height=100 /gt
  lt/figuregt
  ltdiv class=testimonial-contentgt
    lth3 class=testimonial-authorgtJuan Pérezlt/h3gt
    ltpgtComentario breve y convincente sobre el servicio.lt/pgt
  lt/divgt
lt/articlegt

CSS recomendado para diseño de testimonios

.testimonial {
  display: flex
  gap: 16px
  align-items: center
}
.testimonial-figure { margin: 0 }
.testimonial-avatar {
  width: 80px
  height: 80px
  border-radius: 50%
  object-fit: cover
  display: block
}
.testimonial-content .testimonial-author {
  margin: 0 0 4px 0
  font-weight: 600
}

Avatares de comentarios (get_avatar) — ajustar con CSS y filtros

WordPress tiene get_avatar() que imprime la imagen del avatar con clases. Puedes usar CSS para forzar la forma circular o usar un filtro si necesitas cambiar atributos:

// Forzar tamaño y clase en avatar (functions.php)
add_filter(get_avatar, function(avatar, id_or_email, size, default, alt) {
  // Cambiar la clase para que coincida con nuestro CSS
  avatar = str_replace(class=avatar, class=avatar avatar--circle, avatar)
  return avatar
}, 10, 5)

Y en CSS:

.avatar--circle {
  width: 64px
  height: 64px
  border-radius: 50% !important
  object-fit: cover
}
.avatar--circle img {
  width: 100%
  height: 100%
  object-fit: cover
  border-radius: 50%
}

Retina / HiDPI y srcset

Para pantallas de alta densidad, usa imágenes generadas por WordPress con srcset. Si utilizas the_post_thumbnail o wp_get_attachment_image, WordPress añadirá automáticamente srcset si hay tamaños disponibles. Asegúrate de que tu add_image_size incluya múltiples tamaños razonables para que srcset funcione correctamente.

Aspectos de accesibilidad

Siempre proporciona atributos alt descriptivos para las imágenes.
No uses solo la forma visual para transmitir información importante.
Asegura contraste suficiente en bordes y sombras si la imagen se mezcla con fondos similares.

Rendimiento y buenas prácticas

Genera miniaturas con las dimensiones que vayas a mostrar para evitar cargar imágenes demasiado grandes.
Usa lazy-loading cuando haya muchas imágenes en la página (WordPress 5.5 aplica lazy-loading por defecto con loading=lazy).
Evita aplicar filtros CSS pesados que requieran repintado continuo.

Problemas frecuentes y soluciones

La imagen aparece ovalada: asegúrate de que width y height sean iguales o de que la imagen sea cuadrada.
El encuadre corta elementos importantes: utiliza object-position o ajusta la imagen original.
Clip-path no funciona en un navegador: añade un fallback con border-radius.

Ejemplo final: CSS completo para producción

/ Avatar genérico reutilizable /
.u-avatar {
  display: inline-block
  width: 72px
  height: 72px
  border-radius: 50%
  overflow: hidden
  background-color: #f0f0f0 / fallback mientras carga /
  vertical-align: middle
}

.u-avatar img {
  width: 100%
  height: 100%
  object-fit: cover
  display: block
}

/ Variantes /
.u-avatar--small { width: 40px height: 40px }
.u-avatar--large { width: 120px height: 120px }

/ Testimonial card /
.testimonial {
  display: flex
  gap: 16px
  align-items: center
  padding: 12px
  border-radius: 8px
  background: #fff
}

Conclusión

Crear imágenes redondas en WordPress es una mezcla de buen CSS (border-radius y object-fit) y configuración adecuada en el servidor/WordPress (generar miniaturas cuadradas y usar srcset). Con las técnicas presentadas podrás aplicar avatares circulares y testimonios consistentes, accesibles y optimizados para la mayoría de dispositivos y navegadores.

SushiHost