Cómo cambiar el tamaño de la imagen destacada en WordPress: una guía técnica completa

Las imágenes destacadas — también llamadas miniaturas de publicación — son el ancla visual principal de cualquier sitio WordPress. Aparecen en listados de publicaciones, páginas de archivo, vistas previas en redes sociales y feeds RSS, lo que hace que sus dimensiones sean un factor directo en la consistencia del diseño y la calidad visual percibida. Cambiar el tamaño de la imagen destacada en WordPress significa redefinir las dimensiones en píxeles que WordPress registra en el momento de la carga, actualizar cómo su tema solicita esas dimensiones en el momento del renderizado, o ambas cosas — y no abordar ambos lados es la razón más común por la que las imágenes redimensionadas se ven incorrectas en el front end.

Esta guía cubre todos los métodos disponibles, desde la configuración del panel sin código hasta la personalización directa en PHP, con contexto técnico preciso para cada enfoque.

Cómo gestiona WordPress los tamaños de imagen

Antes de modificar cualquier configuración, debe comprender el proceso. Cuando carga una imagen, WordPress no almacena un solo archivo — genera múltiples archivos derivados basados en definiciones de tamaño registradas. Estas definiciones residen en la base de datos y son registradas por el núcleo de WordPress, su tema activo o los plugins instalados.

Los tres tamaños que WordPress registra por defecto son:

• Miniatura — normalmente 150x150 px, recortada de forma fija por defecto
• Mediana — hasta 300x300 px, escalada proporcionalmente
• Grande — hasta 1024x1024 px, escalada proporcionalmente

Su tema registra tamaños adicionales usando add_image_size(). Cuando una plantilla llama a the_post_thumbnail('large'), WordPress busca el archivo que fue generado para ese tamaño registrado en el momento de la carga. Este es el punto arquitectónico crítico: cambiar una definición de tamaño no redimensiona retroactivamente las imágenes ya cargadas. Debe regenerar las miniaturas después de cualquier cambio de tamaño.

Método 1: Ajustar el tamaño de la imagen destacada mediante la configuración de medios de WordPress

Este es el punto de partida correcto para sitios donde el tema usa uno de los tres tamaños principales para su salida de imagen destacada.

Paso 1: Actualizar la configuración de medios

Navegue a Ajustes > Medios en su panel de WordPress. Verá tres grupos de tamaños. Identifique qué tamaño usa su tema para las imágenes destacadas — revise la documentación de su tema o inspeccione el HTML renderizado para confirmar la clase CSS (p. ej., wp-image-* junto a size-large).

Ajuste los campos de ancho y alto para el tamaño correspondiente. Establecer cualquiera de las dimensiones en 0 indica a WordPress que escale proporcionalmente a lo largo del otro eje en lugar de recortar.

Haga clic en Guardar cambios.

Paso 2: Regenerar las miniaturas existentes

Las nuevas cargas usarán las dimensiones actualizadas de inmediato. Para las imágenes que ya están en su biblioteca de medios, debe regenerar los archivos derivados. La herramienta más fiable para esto es el plugin Regenerate Thumbnails de Alex Mills.

Después de instalarlo y activarlo, vaya a Herramientas > Regen. Thumbnails y haga clic en Regenerate All Thumbnails. En bibliotecas grandes, esta es una operación que consume muchos recursos — ejecútela durante las horas de menor tráfico, y si está en un plan de Hosting VPS, considere aumentar temporalmente max_execution_time y memory_limit de PHP en php.ini para evitar tiempos de espera agotados.

Error común: Si su tema registra su propio tamaño personalizado con la misma etiqueta que un tamaño principal, el panel de configuración de medios no lo afectará. La llamada add_image_size() del tema tiene prioridad.

Método 2: Usar el Personalizador de WordPress o el panel de opciones del tema

Muchos temas comerciales exponen controles de tamaño de imagen sin requerir cambios en el código.

Paso 1: Revisar el Personalizador

Vaya a Apariencia > Personalizar. Busque en secciones etiquetadas como Opciones del tema, Configuración del blog, Diseño o Configuración de publicaciones. Algunos temas muestran aquí una sección dedicada a Imagen destacada.

Si existen controles, ajuste el ancho y el alto, luego haga clic en Publicar. El tema actualizará su definición de tamaño registrado y, en algunas implementaciones, regenerará automáticamente las imágenes afectadas.

Paso 2: Revisar un panel de opciones del tema dedicado

Los temas premium construidos sobre frameworks como Redux o Kirki suelen tener un elemento de menú independiente de Opciones del tema o Panel del tema en la barra lateral del panel. Busque subsecciones llamadas Configuración de imágenes, Miniaturas de publicaciones o Diseño de archivo.

Ajuste los valores, guarde y luego regenere las miniaturas manualmente usando el método de plugin descrito anteriormente, ya que la mayoría de los paneles de temas no activan la regeneración automáticamente.

Método 3: Definir tamaños de imagen personalizados en functions.php

Este es el método técnicamente correcto para desarrolladores y cualquier persona que necesite un control preciso sobre las dimensiones, el comportamiento de recorte y la nomenclatura de tamaños. También es el único método que permite registrar tamaños que no entren en conflicto con los valores predeterminados del núcleo.

Paso 1: Registrar el tamaño personalizado

Edite el archivo functions.php de su tema hijo. Nunca edite directamente los archivos de un tema padre — las actualizaciones sobrescribirán sus cambios. Si no tiene un tema hijo, cree uno antes de continuar.

Añada lo siguiente dentro de una función enlazada:

function mytheme_custom_image_sizes() {
    add_theme_support( 'post-thumbnails' );
    add_image_size( 'featured-hero', 1200, 600, true );
    add_image_size( 'featured-card', 400, 300, true );
}
add_action( 'after_setup_theme', 'mytheme_custom_image_sizes' );

Desglose de parámetros para add_image_size():

• Argumento 1 — el identificador de tamaño (cadena), usado al llamar la imagen en las plantillas
• Argumento 2 — ancho en píxeles
• Argumento 3 — alto en píxeles
• Argumento 4 — modo de recorte: true para recorte fijo a dimensiones exactas; false para escalado proporcional; un array como array( 'left', 'top' ) para recorte posicional

Caso especial: Pasar true como argumento de recorte usa por defecto el recorte centrado. Si sus imágenes destacadas tienen sujetos consistentemente descentrados (p. ej., fotografía de retratos), use un array posicional — array( 'center', 'top' ) — para evitar que se recorten las cabezas.

Paso 2: Llamar al tamaño personalizado en los archivos de plantilla

Localice el archivo de plantilla responsable de renderizar la imagen destacada. Los candidatos más comunes son single.php, archive.php, content.php o template-parts/content-single.php. Busque the_post_thumbnail para encontrar la llamada exacta.

Reemplace el argumento de tamaño existente:

// Before
the_post_thumbnail( 'large' );

// After
the_post_thumbnail( 'featured-hero' );

Para mayor control sobre el marcado de salida, use get_the_post_thumbnail() con atributos personalizados:

echo get_the_post_thumbnail(
    get_the_ID(),
    'featured-hero',
    array(
        'class' => 'hero-image lazyload',
        'alt'   => get_the_title(),
        'loading' => 'lazy',
    )
);

Paso 3: Hacer que el tamaño personalizado sea seleccionable en el cargador de medios (opcional)

Por defecto, los tamaños personalizados registrados con add_image_size() no aparecen en el menú desplegable de tamaños del cargador de medios de WordPress. Para exponerlos para uso editorial, añada este filtro:

function mytheme_add_image_sizes_to_selector( $sizes ) {
    return array_merge( $sizes, array(
        'featured-hero' => __( 'Featured Hero (1200x600)', 'mytheme' ),
        'featured-card' => __( 'Featured Card (400x300)', 'mytheme' ),
    ) );
}
add_filter( 'image_size_names_choose', 'mytheme_add_image_sizes_to_selector' );

Paso 4: Regenerar miniaturas

Ejecute el plugin Regenerate Thumbnails como se describe en el Método 1. Todas las imágenes cargadas previamente tendrán nuevos archivos derivados generados con las nuevas dimensiones.

Método 4: Ajustar el tamaño de la imagen destacada en un constructor de páginas

Los constructores de páginas como Elementor, Divi y Bricks Builder abstraen la capa de plantillas, por lo que las ediciones en los archivos de plantilla pueden no aplicarse. Cada constructor tiene sus propios controles de tamaño de imagen.

Elementor

1. Abra la página o publicación en Elementor.
2. Seleccione el widget de Imagen destacada o un widget de Publicaciones que muestre la miniatura.
3. En el panel izquierdo, localice Tamaño de imagen bajo la pestaña Contenido.
4. Elija un tamaño registrado del menú desplegable o seleccione Personalizado para introducir dimensiones en píxeles.
5. Haga clic en Actualizar.

Nota técnica: Cuando selecciona “Personalizado” en Elementor, no registra un nuevo tamaño de imagen de WordPress — usa JavaScript para redimensionar la imagen del lado del cliente o solicita la imagen a tamaño completo y la escala mediante CSS. Esto aumenta el peso de la página. Siempre prefiera un tamaño de WordPress registrado sobre una dimensión personalizada de Elementor para páginas donde el rendimiento es crítico.

Divi

En el Módulo de Blog o el módulo de Imagen destacada de publicación de Divi, la opción Tamaño de imagen bajo Avanzado controla qué tamaño de WordPress registrado se solicita. Divi también tiene su propia configuración de tamaño de imagen en Divi > Opciones del tema > General > Tamaños de miniatura, que registra derivados adicionales.

Método 5: Usar un plugin para tamaños de imagen personalizados sin código

Si editar PHP no es una opción, estos plugins replican la funcionalidad de add_image_size() a través de una interfaz de usuario:

Simple Image Sizes es el reemplazo más directo para add_image_size(). Después de instalarlo, navegue a Ajustes > Medios — el plugin añade una sección de tamaños personalizados debajo de los valores predeterminados del núcleo. Defina su tamaño, guarde y use la regeneración integrada del plugin para aplicarlo.

Comparación: todos los métodos de un vistazo

Consideraciones de rendimiento y optimización de imágenes

Registrar demasiados tamaños de imagen es un problema del lado del servidor que se pasa por alto con frecuencia. Cada tamaño registrado genera un nuevo archivo en la carga. Un sitio con 15 tamaños registrados y 2.000 imágenes en la biblioteca de medios tiene potencialmente 30.000 archivos de imagen en disco. En hosting compartido esto llena las cuotas; en cualquier servidor infla los tamaños de las copias de seguridad.

Audite sus tamaños registrados periódicamente. Use este fragmento en un plugin temporal o en functions.php para listar todos los tamaños registrados:

add_action( 'wp_loaded', function() {
    if ( current_user_can( 'manage_options' ) && isset( $_GET['show_image_sizes'] ) ) {
        echo '<pre>';
        print_r( wp_get_registered_image_subsizes() );
        echo '</pre>';
        exit;
    }
} );

Visite https://yoursite.com/?show_image_sizes=1 mientras está conectado como administrador para ver la lista completa.

Prácticas adicionales de rendimiento:

• Use el formato WebP. WordPress 5.8+ convierte las imágenes cargadas a WebP si la biblioteca GD o Imagick de su servidor lo admite. Verifique la compatibilidad en Herramientas > Estado del sitio.
• Implemente la carga diferida. WordPress añade loading="lazy" a las imágenes que están fuera de la pantalla por defecto desde la versión 5.5. Asegúrese de que sus llamadas personalizadas a the_post_thumbnail() preserven este atributo.
• Comprima antes de cargar. Herramientas como ShortPixel o Imagify se integran directamente en el proceso de medios de WordPress y comprimen los derivados automáticamente. TinyPNG funciona bien para la compresión manual previa a la carga.
• Use un CDN. Si su sitio sirve a una audiencia global, delegar la entrega de imágenes a un CDN reduce la latencia independientemente del número de tamaños registrados.

Para sitios con cargas de trabajo de imágenes intensas — portfolios de fotografía, sitios de noticias, tiendas WooCommerce — un VPS con cPanel le brinda el control a nivel de servidor para ajustar los límites de memoria de PHP, configurar Imagick directamente y gestionar las cuotas de disco que los entornos compartidos no pueden ofrecer.

Imágenes responsivas y el atributo srcset

WordPress genera automáticamente los atributos srcset y sizes para las imágenes en el contenido, extrayendo de todos los tamaños de imagen registrados. Esto significa que cada tamaño que registre contribuye a la capacidad del navegador para seleccionar la resolución más adecuada para la ventana gráfica y la densidad de píxeles del dispositivo del usuario.

Cuando llama a the_post_thumbnail(), WordPress genera un marcado similar a:

<img src="hero-1200x600.jpg"
     srcset="hero-400x300.jpg 400w, hero-800x400.jpg 800w, hero-1200x600.jpg 1200w"
     sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"
     alt="Post Title"
     loading="lazy">

El atributo sizes indica al navegador qué tan ancha se renderizará la imagen en varios anchos de ventana gráfica. WordPress genera un valor predeterminado de sizes, pero a menudo es inexacto para diseños complejos. Anúlelo usando el filtro wp_calculate_image_sizes o pasando un atributo sizes personalizado en el array $attr de get_the_post_thumbnail().

Contexto de SSL, dominio y hosting

Si está migrando un sitio WordPress a un nuevo dominio o cambiando de HTTP a HTTPS después de obtener un Certificado SSL, las URL de imágenes almacenadas en los metadatos de publicación (referencias _thumbnail_id) son relativas al ID del archivo adjunto y no se ven afectadas por los cambios de dominio. Sin embargo, las URL de imágenes codificadas de forma fija en el contenido de publicaciones u opciones del tema necesitarán actualizarse mediante una operación de búsqueda y reemplazo usando WP-CLI:

wp search-replace 'http://olddomain.com' 'https://newdomain.com' --skip-columns=guid

Si está configurando una nueva instalación de WordPress desde cero, registrar su dominio a través del Registro de dominios y combinarlo con un entorno de hosting correctamente configurado garantiza que las rutas de carga de medios y las reglas de reescritura .htaccess sean correctas desde el principio, evitando patrones de URL de imágenes rotos que son tediosos de depurar retroactivamente.

Lista de verificación para la toma de decisiones técnicas

Use esta matriz para seleccionar el enfoque correcto para su situación:

• Necesita cambiar un tamaño principal (miniatura/mediana/grande) y no edita código — use Ajustes > Medios, luego regenere las miniaturas.
• Su tema premium tiene un panel de opciones del tema — revíselo primero antes de tocar cualquier archivo.
• Necesita un tamaño con dimensiones exactas en píxeles y recorte fijo — use add_image_size() en el functions.php de un tema hijo.
• Su temática requiere recorte no centrado — pase un array posicional como cuarto argumento a add_image_size().
• Usa Elementor o Divi — use el control nativo de tamaño de imagen del constructor, pero prefiera los tamaños de WordPress registrados sobre “Personalizado” para el rendimiento.
• No puede editar PHP y necesita un tamaño personalizado — instale Simple Image Sizes, defina el tamaño, regenere.
• Tiene una biblioteca de medios grande — use Regenerate Thumbnails Advanced, que permite la regeneración selectiva por nombre de tamaño para evitar el procesamiento redundante.
• El rendimiento es una prioridad — audite los tamaños registrados, habilite WebP, implemente un CDN y asegúrese de que la carga diferida esté activa.
• Está en hosting compartido y tiene errores de memoria o tiempo de espera agotado durante la regeneración — considere migrar a un plan de Hosting VPS donde los límites de PHP son configurables.

Preguntas frecuentes

¿Por qué mis imágenes destacadas siguen mostrando el tamaño antiguo después de cambiar la configuración de medios?

WordPress genera derivados de imagen en el momento de la carga. Cambiar una definición de tamaño en Ajustes > Medios solo afecta a las nuevas cargas. Debe ejecutar una herramienta de regeneración de miniaturas — como el plugin Regenerate Thumbnails — para redimensionar los archivos que ya están en su biblioteca de medios.

¿Cuál es la diferencia entre add_image_size() con true versus false como parámetro de recorte?

Pasar true obliga a WordPress a recortar la imagen al ancho y alto exactos que especifique, centrado por defecto. Pasar false escala la imagen proporcionalmente de modo que ninguna dimensión supere los valores especificados, lo que significa que las dimensiones de salida reales pueden ser menores que las especificadas si la relación de aspecto original es diferente.

¿Registrar muchos tamaños de imagen personalizados ralentizará mi sitio?

No en el momento del renderizado — WordPress sirve archivos pregenerados. El costo de rendimiento ocurre en el momento de la carga, cuando Imagick o GD deben generar un derivado por cada tamaño registrado. Los sitios con muchos tamaños y alto volumen de cargas pueden experimentar respuestas de carga lentas y un crecimiento significativo del uso del disco.

¿Puedo eliminar los tamaños de imagen que ya no necesito?

Sí. Use remove_image_size( 'size-name' ) en su functions.php para dejar de generar un tamaño para nuevas cargas. Los archivos existentes para ese tamaño permanecen en disco hasta que se eliminen manualmente. El comando WP-CLI wp media regenerate --only-missing puede ayudar a limpiar generando solo los tamaños faltantes sin recrear todos los derivados.

¿Cambiar el tamaño de la imagen destacada afecta cómo aparecen las imágenes cuando se comparten en redes sociales?

No directamente. Las plataformas sociales como Facebook y Twitter leen las metaetiquetas Open Graph (og:image) para determinar qué imagen mostrar. Estas etiquetas son establecidas típicamente por un plugin SEO como Yoast SEO o Rank Math, que registra su propio tamaño de imagen (comúnmente 1200x630) específicamente para compartir en redes sociales. Cambiar el tamaño de la imagen destacada de su tema no altera la imagen Open Graph a menos que su plugin SEO esté configurado para usar el mismo identificador de tamaño.