Cómo cambiar el tamaño de la imagen destacada en WordPress (y cuáles son los mejores tamaños)

WordPress crea automáticamente varios tamaños de imagen al subir un archivo, incluida una imagen destacada. Esto desempeña un papel fundamental en cómo se muestra tu contenido en los archivos, los listados del blog y las vistas previas de búsqueda. Sin embargo, el tamaño puede variar mucho según el tema y la configuración, lo que puede provocar diseños incoherentes o problemas de rendimiento.

Esta guía explica cómo cambiar manual y automáticamente el tamaño de la imagen destacada en WordPress. También aprenderás las mejores prácticas para las dimensiones de las imágenes destacadas, los errores habituales que debes evitar y cómo afecta el tamaño de la imagen al rendimiento y al diseño.

¿Qué es una imagen destacada en WordPress?

Una imagen destacada es una miniatura o imagen de cabecera compatible con el tema y asociada a una entrada, página o tipo de contenido personalizado. Normalmente se muestra:

• En las páginas de archivo del blog
• En widgets o carruseles de entradas
• Como imagen de Open Graph para compartir en redes sociales
• En las plantillas de entradas individuales

Los temas utilizan las imágenes destacadas de distintas formas. Algunos muestran imágenes grandes con estilo de banner, mientras que otros recurren a miniaturas más pequeñas. Como la imagen cambia de tamaño automáticamente según la configuración del tema o unas dimensiones codificadas, es habitual que haya proporciones desajustadas e imágenes recortadas.

Tamaños de imagen predeterminados de WordPress

Al subir una imagen, WordPress crea varias versiones de forma predeterminada:

• Miniatura: 150×150 píxeles (recortada)
• Mediana: 300×300 píxeles (escalada)
• Grande: 1024×1024 píxeles (escalada)
• Tamaño completo: Resolución original de la imagen

Puedes editar estos ajustes en Ajustes → Medios, pero cambiarlos no afecta retroactivamente a las imágenes subidas anteriormente ni a los tamaños definidos por tu tema.

¿Por qué deberías cambiar el tamaño de la imagen destacada?

Estos son algunos motivos habituales para modificar las dimensiones de la imagen destacada:

• Tu tema muestra las imágenes de forma incoherente.
• El recorte elimina elementos visuales importantes.
• Los tiempos de carga empeoran debido a que las imágenes son demasiado grandes.
• Los diseños se ven mal en móviles o equipos de escritorio.
• Necesitas controlar mejor la proporción o la jerarquía visual.

Corregir el tamaño de la imagen destacada puede mejorar tanto la coherencia del diseño como métricas de rendimiento como Core Web Vitals.

Cómo cambiar el tamaño de la imagen destacada en tu tema

1. Modifica los tamaños de imagen del tema

Si estás creando o personalizando un tema, utiliza la función add_image_size() para definir nuevos tamaños de imagen. Si no estás acostumbrado a trabajar con código, es mejor que utilices uno de los otros métodos de esta guía. Antes de hacer cambios, asegúrate siempre de utilizar un tema hijo y de tener una copia de seguridad a mano.

Añade esta función al archivo functions.php de tu tema:

add_image_size( ‘custom-featured’, 800, 450, true );

• El primer parámetro es el nombre del tamaño de imagen.
• El segundo y el tercero son la anchura y la altura en píxeles.
• El cuarto (true/false) activa el recorte forzado.

Una vez definido, utiliza este tamaño de imagen en la plantilla de tu tema:

the_post_thumbnail( 'custom-featured' );

Utiliza nombres descriptivos como home-featured, single-featured o card-thumb si vas a definir varias variantes.

2. Regenera las miniaturas

Cambiar las definiciones de tamaño de imagen no afecta a las imágenes que ya están en tu sitio. Primero, edita los tamaños de imagen como se ha indicado antes en Ajustes → Medios. Después, utiliza un plugin como Regenerate Thumbnails para aplicar los nuevos tamaños a todas las imágenes actuales y futuras:

• Instala y activa el plugin Regenerate Thumbnails.
• Ve a Herramientas → Regenerate Thumbnails
• Elige entre regenerar las miniaturas de todos los archivos adjuntos o solo las imágenes destacadas.

Esto generará nuevas versiones de tus imágenes existentes según los ajustes de tamaño más recientes.

Cómo cambiar el tamaño de la imagen destacada con un plugin

Para quienes no desarrollan sitios o no tienen acceso al código, hay plugins que pueden simplificar el proceso. Ya hemos hablado de utilizar el plugin Regenerate Thumbnails para cambiar automáticamente el tamaño de las imágenes existentes y nuevas según los ajustes de tamaño actualizados.

Otra opción es el plugin Image Regenerate & Select Crop que permite sustituir las opciones de recorte integradas, registrar nuevos tamaños y regenerar imágenes en todo tu sitio.

Cada herramienta tiene su propia documentación, donde encontrarás instrucciones completas de instalación y configuración.

Tamaños recomendados para imágenes destacadas según el caso de uso

No existe una solución única para todos los casos. Las dimensiones de la imagen destacada deben adaptarse a tu diseño, estrategia de visualización y estética. Dicho esto, estas dimensiones habituales funcionan bien en la mayoría de los casos:

Mejor práctica: Utiliza una proporción coherente (16:9, 3:2, 4:3) en todo tu sitio para evitar cambios de diseño y recortes poco estéticos.

Cómo comprobar qué tamaño de imagen destacada utiliza tu tema

Antes de hacer cambios, revisa cómo gestiona tu tema las imágenes destacadas:

• Inspecciona los archivos del tema: Busca en index.php, single.php, content.php o en las partes de plantilla de the_post_thumbnail().
  
• Usa las herramientas para desarrolladores: Haz clic con el botón derecho en una imagen de tu sitio y elige Inspeccionar elemento. Comprueba:
  • El tamaño real de la imagen cargada (p. ej., -300×200.jpg)
  • Los atributos srcset y sizes de la imagen
    
• Usa el plugin Query Monitor: Esta herramienta avanzada muestra los tamaños de las imágenes y las referencias a los archivos de plantilla, lo que resulta útil para depurar.

Consideraciones sobre SEO y rendimiento

Cambiar el tamaño de la imagen destacada tiene efectos más amplios que el diseño del sitio, entre ellos:

• Tiempos de carga de las páginas: Las imágenes demasiado grandes ralentizan tu sitio. Usa tamaños adecuados para distintos contextos y dispositivos, y activa una CDN de imágenes para ofrecer versiones optimizadas según la ubicación del visitante y la resolución de su pantalla. Jetpack Boost incluye una CDN de imágenes gratuita que se encarga automáticamente de esta optimización.
• Adaptación a dispositivos móviles: Usa los atributos srcset y sizes para ofrecer versiones escaladas según el ancho de la pantalla.
• Carga diferida: WordPress carga las imágenes de forma diferida de manera predeterminada, pero asegúrate de que tu tema sea compatible con esta función.
• Compresión de imágenes: Comprime todas las imágenes destacadas con una herramienta como Jetpack Boost.
• Texto alternativo: Establece siempre un texto alternativo relevante para las imágenes destacadas con el fin de facilitar la accesibilidad y la optimización para motores de búsqueda (SEO).

Comprobaciones finales

Antes de terminar de actualizar los tamaños de las imágenes, pregúntate:

• ¿Se han regenerado todas las imágenes destacadas con las nuevas dimensiones?
• ¿Se muestran las imágenes de forma coherente en todas las plantillas y dispositivos?
• ¿Se muestran correctamente las imágenes de Open Graph y de redes sociales al compartirlas?
• ¿Has probado la velocidad de carga con herramientas como PageSpeed Insights o GTmetrix?

Cuando el tamaño de la imagen no es el problema

Si las imágenes destacadas siguen dando problemas después de ajustar los tamaños, puede que el problema esté en otro sitio. Es posible que:

• Tu tema pueda limitar la altura o el ancho de la imagen mediante CSS.
• El propio archivo de imagen sea demasiado pequeño o esté recortado de forma extraña.
• Tu CDN podría estar ofreciendo versiones almacenadas en caché.
• Un plugin o un maquetador de páginas podría sobrescribir la configuración predeterminada.

Inspecciona y prueba siempre antes de asumir que el tamaño de la imagen es la causa principal.

Preguntas frecuentes

¿Cuál es el tamaño ideal para una imagen destacada en WordPress?

El mejor tamaño para una imagen destacada en WordPress es de 1200×675 píxeles, con una relación de aspecto de 16:9. Este tamaño funciona bien en listados de blogs, entradas individuales y plataformas de redes sociales como Facebook y Twitter.

Sin embargo, el diseño de tu tema es el que determina en última instancia el tamaño más eficaz. Si tu diseño utiliza miniaturas cuadradas o banners de ancho completo, ajústalo en consecuencia. Mantener relaciones de aspecto coherentes evita cambios de diseño y mejora la alineación visual en todo el sitio.

¿Cómo creo un tamaño personalizado para imágenes destacadas en WordPress?

Para definir un tamaño de imagen destacada personalizado en WordPress, añade la función add_image_size() al archivo functions.php de tu tema. Por ejemplo:

add_image_size( 'custom-featured', 800, 450, true );

Esto crea una imagen recortada exactamente a 800×450 píxeles. Para usarla en tu tema, llama a:

the_post_thumbnail( 'custom-featured' );

Después de crear el nuevo tamaño, regenera las miniaturas con un plugin como Regenerate Thumbnails. Así te aseguras de que todas las imágenes subidas anteriormente se redimensionen con las nuevas dimensiones.

¿Cómo averiguo qué tamaño de imagen destacada utiliza realmente mi tema de WordPress?

La forma más rápida es comprobar qué archivo de imagen está cargando WordPress en una entrada real. Abre una entrada en la vista pública. Haz clic con el botón derecho en la imagen destacada y elige Inspeccionar en tu navegador. Busca la URL de la imagen en el HTML. Muchos archivos de imagen de WordPress incluyen el tamaño en el nombre del archivo, como photo-1200×675.jpg.

Comprueba también srcset, que enumera varios tamaños entre los que WordPress puede elegir. Si el tema utiliza un nombre de tamaño personalizado, puede que no veas el nombre en el HTML, pero seguirás viendo los tamaños en píxeles en los nombres de archivo incluidos en srcset. Esto te indica qué tamaño utiliza realmente el tema, no el que has configurado en los ajustes de medios.

¿Cómo evito que WordPress recorte mis imágenes destacadas?

Para evitar que WordPress recorte tus imágenes destacadas, establece en false el parámetro de recorte de la función add_image_size():

add_image_size( 'custom-size', 800, 450, false );

Esto indica a WordPress que escale la imagen proporcionalmente en lugar de recortarla exactamente. La imagen completa permanece intacta, aunque puede no coincidir con las dimensiones exactas especificadas. Usa CSS para mantener la coherencia del diseño si los tamaños de las imágenes varían ligeramente debido al escalado proporcional.

¿Tengo que regenerar las miniaturas después de cambiar los tamaños de las imágenes en WordPress?

Sí, es necesario regenerar las miniaturas cada vez que añadas o modifiques tamaños de imagen. WordPress solo genera los tamaños de imagen en el momento de la subida.

Para aplicar las nuevas dimensiones a las imágenes subidas anteriormente, usa un plugin como Regenerate Thumbnails. Este procesa tu biblioteca de medios y crea nuevos archivos de imagen basados en la configuración actualizada, garantizando la coherencia en todo el sitio.

¿Por qué mis imágenes destacadas aparecen borrosas o pixeladas en WordPress?

Las imágenes destacadas borrosas suelen deberse a mostrar una imagen de baja resolución con un tamaño mayor. Entre las causas habituales se incluyen:

• Usar un tamaño de miniatura demasiado pequeño para su contenedor de visualización.
• Que WordPress amplíe una imagen en lugar de usar una versión adecuada.
• Subir imágenes con una resolución original baja.

Para solucionarlo, sube imágenes de alta resolución (al menos tan grandes como el área de visualización más grande), define tamaños de imagen personalizados adecuados y asegúrate de que las plantillas de tu tema utilicen el tamaño correcto.

¿Cómo hago que las imágenes destacadas sean adaptables en WordPress?

WordPress admite imágenes adaptables mediante los atributos srcset y sizes de forma predeterminada. Para garantizar que las imágenes destacadas sean adaptables:

• Usa la función the_post_thumbnail(), que incluye marcado adaptable.
• Sube imágenes de alta resolución para que WordPress pueda generar varios tamaños.
• Evita los estilos de ancho y alto fijados manualmente en tu CSS o HTML.
• Deja que el navegador seleccione la imagen óptima según el tamaño y la resolución de la pantalla.

Los temas y maquetadores de páginas que eliminan srcset o aplican tamaños fijos pueden impedir este funcionamiento, así que prueba en distintos dispositivos y anchos de pantalla.

¿Puedo establecer distintos tamaños de imagen destacada para diferentes tipos de entrada o plantillas?

Sí, puedes definir tamaños de imagen destacada únicos para tipos de entrada o plantillas específicos. En tu archivo functions.php registra varios tamaños de imagen personalizados:

add_image_size( 'news-featured', 600, 400, true );
add_image_size( 'portfolio-featured', 1200, 800, true );

En los archivos de plantilla de tu tema, llama al tamaño correspondiente:

the_post_thumbnail( 'news-featured' );

Para automatizar aún más este proceso, utiliza lógica condicional en tus plantillas para cargar dinámicamente los tamaños según el tipo de entrada. Esto ayuda a mantener la coherencia visual en distintos formatos de contenido.

¿Cuál es la diferencia entre el tamaño de la imagen destacada y el tamaño del archivo de imagen?

El tamaño de la imagen destacada hace referencia a sus dimensiones de visualización (p. ej., 1200 × 675 píxeles). El tamaño del archivo de imagen hace referencia al espacio de almacenamiento que ocupa (p. ej., 150 KB). Ambos afectan al rendimiento, pero de distintas formas:

• Unas dimensiones grandes pueden deformar el diseño o hacer que se cargue la variante equivocada.
• Los archivos grandes ralentizan la velocidad de carga de la página y aumentan el uso de ancho de banda.

Optimiza ambos aspectos:

• Elegir las dimensiones correctas según el diseño.
• Comprimir las imágenes al subirlas utilizando herramientas como Jetpack Boost.
• Servir tamaños adaptables mediante srcset para minimizar el peso de los archivos en dispositivos móviles.

Mantener ambos aspectos bajo control es esencial para conseguir sitios de WordPress rápidos y visualmente coherentes.