Cómo arreglé las miniaturas borrosas en WordPress (sin perder calidad)

Si alguna vez has subido fotografías de alta resolución a WordPress y las has visto borrosas o pixeladas en los listados, probablemente hayas sufrido el mismo problema que uno de mis clientes. Tras pedirme ayuda, te cuento exactamente qué pasó y cómo lo solucioné.

El problema: resolución insuficiente en thumbnails

WordPress genera automáticamente versiones reducidas de cada imagen que subes —las llamadas miniaturas— con un tamaño predefinido. El ajuste por defecto era:


// Tamaño de thumbnail por defecto en WordPress
add_image_size('thumbnail', 300, 230, true);

El tema mostraba estas miniaturas en contenedores CSS de 300×230 px en dispositivos estándar, pero en pantallas de alta densidad (Retina, HDPI) el navegador necesita el doble de píxeles para mostrar la imagen nítida. Con solo 300×230 px reales, la imagen se estiraba y se veía borrosa.

La causa raíz: píxeles físicos vs. píxeles CSS

Las pantallas modernas tienen un device pixel ratio (DPR) mayor que 1. Esto significa que cada «píxel CSS» que defines equivale a 2 o más píxeles físicos en pantalla.

Tipo de pantalla	DPR	Necesitas para 300×230 CSS
Monitor estándar	1×	300×230 px
Retina / HDPI típico	2×	600×460 px
Móvil de alta gama	3×	900×690 px

Regla de oro: genera tus thumbnails al doble del tamaño que necesitas mostrarlos en CSS. Luego reduce con CSS.

La solución en 3 pasos

1. Cambiar el tamaño de thumbnail en functions.php
Duplica las dimensiones del thumbnail para que WordPress genere imágenes a resolución 2×:


// Antes (resolución insuficiente para pantallas Retina)
// add_image_size('thumbnail', 300, 230, true);

// Después: el doble de resolución
add_image_size('thumbnail', 600, 460, true);

2. Reducir el tamaño visual con CSS
Aunque la imagen tiene 600×460 px reales, el layout debe seguir viendo 300×230 px. Se fuerza con CSS:


/* Forzar tamaño visual a la mitad del tamaño real */
.post-thumbnail img,
.entry-thumbnail img {
  width:      300px;
  height:     230px;
  max-width:  100%;   /* responsive para móvil */
  object-fit: cover;  /* Recorte limpio */
  display:    block;
}

Tip: object-fit: cover asegura que la imagen recorte limpiamente si las proporciones no son exactas, sin deformarse.

3. Regenerar todas las miniaturas existentes
El cambio solo aplica a imágenes subidas de aquí en adelante. Para arreglar las imágenes ya existentes instala el plugin Regenerate Thumbnails y ejecútalo. O si prefieres la terminal con WP-CLI:


# Con WP-CLI desde la terminal (sin plugin)
wp media regenerate --yes

# Solo para imágenes sin miniatura generada:
wp media regenerate --only-missing --yes

Aviso: si tienes muchas imágenes, este proceso puede tardar varios minutos. Hazlo en horas de bajo tráfico.

Código final completo

Functions.php


/**
 * Thumbnail a resolución 2× para pantallas Retina/HDPI
 * El CSS se encarga de mostrarlo al tamaño visual correcto
 */
function mi_tema_image_sizes() {
    // Elimina el tamaño por defecto si existía
    remove_image_size('thumbnail');

    // Registra el nuevo tamaño 2×
    add_image_size('thumbnail', 600, 460, true);
}
add_action('after_setup_theme', 'mi_tema_image_sizes');

style.css


/* Muestra el thumbnail a tamaño visual estándar */
.post-thumbnail img {
  width:      300px;
  height:     230px;
  max-width:  100%;   /* Responsive */
  object-fit: cover;  /* Recorte limpio */
  display:    block;
}

Resumen del cambio

Antes	Después	Multiplicador
300×230 px	600×460 px	2× (Retina)

Resultado: las fotografías se ven nítidas tanto en monitores estándar como en pantallas Retina o móviles de alta densidad, sin cambiar el tamaño visual del layout ni romper el diseño.

¿Tienes este problema en tu web o uno parecido? Ofrezco consultoría WordPress. Contáctame y lo vemos juntos.