Introducción

En dispositivos móviles muchas imágenes se ven pixeladas cuando se escalan más allá de su resolución nativa o cuando el navegador no sirve una variante con suficiente densidad de píxeles (retina / high-DPR). Este tutorial explica con todo lujo de detalles por qué ocurre esto y qué soluciones aplicar en WordPress usando CSS correcto, uso de srcset/sizes y ajustes en el tema/servidor para que las imágenes se vean nítidas en móviles.

Resumen rápido de causas

• Imagen de baja resolución: la imagen original no tiene suficientes píxeles para el tamaño visual requerido.
• Escalado CSS: declarar un ancho mayor que la resolución intrínseca hace que el navegador reescale y pierda nitidez.
• Alta densidad de píxeles (devicePixelRatio): pantallas retina requieren imágenes con más píxeles por cada unidad CSS para mantener la nitidez.
• Falta de srcset/sizes o mal uso: el navegador no recibe variantes con suficiente resolución.
• Background images sin adaptabilidad: los background-image usados sin art direction o variantes para retina pueden verse borrosos.

Buenas prácticas CSS para imágenes responsivas (evitar pixelación)

Antes de ver cómo generar variantes de imagen, aplica estas reglas CSS básicas para que las imágenes escalen correctamente sin deformarse ni perder relación de aspecto.

img, picture, .post img {
  max-width: 100%   / evita que la imagen exceda el contenedor /
  height: auto      / mantiene la proporción y evita deformaciones /
  display: block    / elimina espacios en línea si es necesario /
  -webkit-backface-visibility: hidden / opcional para suavizar render en algunos casos /
  backface-visibility: hidden
}

Explicación:

• max-width:100% height:auto evita que el navegador estire la imagen fuera de su caja manteniendo la relación de aspecto.
• Si necesitas que la imagen ocupe exactamente la caja sin distorsión, usa object-fit: cover en imágenes que actúen como objetos (img con tamaño fijo).

.responsive-cover {
  width: 100%
  height: 200px
  object-fit: cover / recorta y conserva proporciones /
}

Usar srcset y sizes para servir imágenes de mayor resolución

WordPress (desde 4.4) genera automáticamente srcset y sizes para adjuntos. Aun así, debes entender cómo funciona para garantizar que el navegador elija la variante adecuada:

• srcset proporciona una lista de URLs con sus anchuras (w) o con descriptors x (1x, 2x).
• sizes indica al navegador cuánto espacio en la pantalla ocupará la imagen (en unidades CSS), para que el navegador seleccione el recurso más adecuado del srcset.

Ejemplo básico con descriptors de anchura (w)

En este caso, en pantallas estrechas el navegador considera que la imagen ocupará 100vw y elegirá la variante más adecuada (por ejemplo 800 o 1600) según la DPR del dispositivo. Para retina, si el elemento ocupa 400 CSS px y el devicePixelRatio es 2, el navegador buscará ~800px de ancho para mantener la nitidez.

Ejemplo con descriptors x (1x / 2x)

Este método es útil cuando las variantes no están definidas por anchuras concretas sino por densidades. Sin embargo, la aproximación por anchura (w) es más flexible y recomendada.

Cómo asegurarte de que WordPress sirva variantes adecuadas

1. Registrar tamaños adecuados en functions.php: añade tamaños que cubran las necesidades del diseño (incluyendo variantes más grandes para devices de alta densidad).

// En functions.php
add_theme_support( post-thumbnails )
add_image_size( card, 600, 400, true )    // tamaño usado en tarjetas
add_image_size( card@2x, 1200, 800, true ) // variante 2x para retina

Después de añadir tamaños, regenera las miniaturas (plugin Regenerate Thumbnails) para que existan las variantes en las imágenes ya subidas.

2. Usar funciones que imprimen srcset automáticamente: si usas the_post_thumbnail() o wp_get_attachment_image(), WordPress incluirá srcset/sizes automáticamente si existen los tamaños registrados.

// En un template de WordPress
if ( has_post_thumbnail() ) {
  the_post_thumbnail( card ) // WordPress añadirá srcset/sizes
}

3. Controlar el atributo sizes para el tema: WordPress genera un atributo sizes por defecto, pero en diseños complejos deberías filtrar wp_calculate_image_sizes para devolver el tamaño correcto que ocupa la imagen en diferentes breakpoints.

// Ejemplo: optimizar sizes para imágenes de ancho completo y texto en 768px
add_filter( wp_calculate_image_sizes, mi_tema_imagen_sizes, 10, 2 )
function mi_tema_imagen_sizes( sizes, size ) {
  // Si la imagen usa la clase .content img (ejemplo), indicamos la fórmula de tamaños
  if ( strpos( _SERVER[REQUEST_URI], /ruta-ejemplo/ ) !== false ) {
    return (max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw
  }
  return sizes
}

Uso del elemento picture para art direction y variantes

Cuando necesitas servir distintas imágenes según el ancho o la densidad del dispositivo (por ejemplo, recortes distintos en móvil y escritorio), usa .

Evitar pixelación en background-images

Los background-image no admiten srcset por CSS puro. Para soporte responsive y retina usa:

• Hero responsive con picture img (posición: absolute si hace falta).
• Media queries CSS para servir imágenes de distinta resolución con background-image.

.header {
  background-image: url(bg-800.jpg)
  background-size: cover
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .header {
    background-image: url(bg-1600.jpg) / variante 2x /
  }
}

Consejos extra y rendimiento

• Optimiza y comprime las imágenes (WebP, AVIF donde sea soportado) para que subir la resolución no penalice demasiado la carga.
• Lazy-loading (loading=lazy) reduce coste de carga: WordPress incluye loading=lazy por defecto en imágenes añadidas con funciones nativas.
• Regenera miniaturas tras cambiar tamaños en functions.php (plugin Regenerate Thumbnails).
• Evita transformar imágenes con CSS para escalar más allá de la resolución nativa: si la imagen va a mostrarse más grande visualmente, sube una imagen de mayor resolución o añade una variante en srcset.
• Verifica la respuesta del servidor: CDN o configuraciones de optimización de imágenes pueden crear variantes automáticas (Cloudinary, Imgix, etc.). Asegúrate de que las variantes de alta densidad estén disponibles.

Checklist práctico para resolver pixelación en móviles

1. Revisa la resolución original de la imagen: ¿tiene suficientes píxeles para el tamaño visual?
2. Asegura CSS base: img { max-width:100% height:auto display:block }
3. Registra tamaños adecuados en functions.php y regenera miniaturas.
4. Comprueba que WordPress esté generando srcset/sizes en el HTML. Si no, usa wp_get_attachment_image() o the_post_thumbnail().
5. Define sizes correctos con filtros si el tamaño real en la página es distinto al estimado.
6. Para art direction o casos complejos usa picture y source con media queries.
7. Para background-image usa media queries para servir la versión 2x en pantallas de alta densidad.
8. Optimiza y usa formatos modernos (WebP/AVIF) y considera un CDN con soporte de variantes.

Ejemplos prácticos finales

1) Plantilla que muestra la entrada con thumbnail nítido en móvil

// functions.php (añadir tamaños)
add_theme_support( post-thumbnails )
add_image_size( single-thumb, 800, 500, true )   // tamaño principal
add_image_size( single-thumb@2x, 1600, 1000, true ) // 2x para retina

// single.php (usar la imagen)
if ( has_post_thumbnail() ) {
  // WordPress imprimirá srcset y sizes si existen las variantes registradas
  the_post_thumbnail( single-thumb, array( class => post-thumbnail ) )
}

2) CSS para que la miniatura no se pixelice y se ajuste al contenedor

.post-thumbnail {
  width: 100%    / ocupa ancho del contenedor /
  max-width: 800px / límite para no forzar más que la resolución nativa (ajusta según tu diseño) /
  height: auto
  display: block
}

Resumen final

La pixelación en móviles normalmente se resuelve asegurando que el navegador reciba una variante de imagen con suficiente resolución para la densidad del dispositivo y que el CSS no fuerce escalados inadecuados. En WordPress, registra tamaños apropiados, aprovecha srcset/sizes, filtra sizes si es necesario y utiliza picture o media queries para casos avanzados. Combina esto con optimización de imagen y regeneración de miniaturas y tus imágenes lucirán nítidas en dispositivos móviles.