¿Pedís contraseñas en el formulario?

No. El formulario público nunca solicita accesos. Los datos seguros se piden únicamente después de aprobar el alcance y el presupuesto.

¿Quién revisa la incidencia?

La solicitud llega a Jordi Ensenyat, fundador de Code Barcelona y especialista WordPress con más de 15 años de experiencia.

¿Se cambia algo antes del presupuesto?

No. Primero se revisan los síntomas visibles y se define el alcance. La intervención empieza tras la aprobación y con una vía de vuelta preparada.

¿Trabajáis con webs en inglés y fuera de España?

Sí. WP Repair atiende incidencias WordPress y WooCommerce en inglés y español, con servicio remoto.

WordPress sirve imágenes a tamaño completo en móvil: revisar srcset

Una página muestra una imagen a 360 píxeles en un teléfono, pero descarga un archivo de varios miles. Reducir siempre el original no es la solución: WordPress quizá ya tenga variantes correctas y sizes esté indicando al navegador que elija mal. También puede tratarse de un fondo CSS o código del constructor sin marcado adaptable.

Primero identifica qué archivo selecciona el navegador y por qué.

Inspeccionar `currentSrc`

Con srcset, src puede ser solo el fallback. Consulta la solicitud elegida:

const image = document.querySelector("main img");
console.log({
  src: image?.src,
  currentSrc: image?.currentSrc,
  naturalWidth: image?.naturalWidth,
  renderedWidth: image?.getBoundingClientRect().width
});

Usa un selector verificado. Compara ancho intrínseco y visual considerando window.devicePixelRatio. Una fuente de 700 píxeles para una caja CSS de 350 puede ser razonable en una pantalla 2×; una de 3000 resulta difícil de justificar.

Leer el HTML renderizado

Una imagen adaptable puede verse así:

<img
  src="/uploads/photo-1024.webp"
  srcset="/uploads/photo-480.webp 480w,
          /uploads/photo-768.webp 768w,
          /uploads/photo-1024.webp 1024w"
  sizes="(max-width: 700px) 100vw, 700px"
  width="1024"
  height="683"
  alt="Prueba de entrega de imágenes WordPress"
>

Revisa Elements o el código final después de que actúen plugins. La vista del editor no es la fuente definitiva.

srcset ofrece candidatos y sizes estima el ancho de diseño. Si declara 100vw para una imagen que ocupa un tercio de escritorio, el navegador escogerá una fuente excesiva. Escribe el valor a partir del CSS real:

sizes="(max-width: 767px) calc(100vw - 32px),
       (max-width: 1199px) 50vw,
       560px"

No copies el ejemplo sin medir relleno, columnas y máximos.

Confirmar que existen las variantes

WordPress registra tamaños mediante ajustes, tema y plugins. Una subida antigua puede ser anterior a un tamaño nuevo. Según la versión de WP-CLI:

wp media image-size

También puede inspeccionarse wp_get_registered_image_subsizes() en una prueba controlada. No regeneres toda la biblioteca hasta saber qué tamaños faltan: puede consumir almacenamiento y CPU.

Revisar el constructor

Los constructores ofrecen Miniatura, Mediano, Grande y Completo. Elegir «Completo» puede insertar el original o producir srcset incompleto. Comprueba tamaño seleccionado, ancho personalizado, fondo o <img>, ajustes móviles y carga diferida.

Cambiar el widget a un tamaño registrado adecuado puede resolver la entrega sin sustituir archivos.

Tratar por separado los fondos CSS

Un fondo no tiene srcset. Puedes usar consultas:

.service-hero {
  background-image: url("/uploads/hero-mobile.webp");
}

@media (min-width: 768px) {
  .service-hero {
    background-image: url("/uploads/hero-desktop.webp");
  }
}

image-set() ofrece selección moderna, pero necesita compatibilidad y fallback probados. Si la imagen aporta significado, <img> o <picture> será normalmente más accesible.

Usar `<picture>` para otro recorte

Cuando móvil necesita una composición diferente:

<picture>
  <source media="(max-width: 767px)"
    srcset="/uploads/hero-mobile-480.webp 480w,
            /uploads/hero-mobile-768.webp 768w">
  <img src="/uploads/hero-desktop-1200.webp"
    srcset="/uploads/hero-desktop-800.webp 800w,
            /uploads/hero-desktop-1200.webp 1200w"
    width="1200" height="700"
    alt="Especialista en rendimiento WordPress">
</picture>

Reserva proporciones para evitar CLS.

Comprobar reescrituras y cada contexto

Plugins y CDN pueden sustituir URL o formato. Verifica petición final, Content-Type, dimensiones, bytes, caché y parámetros. Limpia solo la caché relacionada después de corregir el marcado.

No elimines variantes grandes sin revisar usos: una misma imagen puede ser tarjeta, hero, zoom de producto o descarga de prensa. Corrige la selección en cada contexto.

Prueba teléfono estrecho y ancho, tableta, portátil, escritorio grande y alta densidad cuando sea importante. Registra ancho visual, currentSrc, ancho intrínseco y bytes.

Regenerar con copia y muestra

Si realmente faltan variantes, copia uploads y base de datos, registra tamaños, regenera primero una muestra, revisa recortes y disco, ejecuta un proceso acotado y verifica URL y calidad. No borres automáticamente archivos antiguos hasta entender referencias y reversión.

Para una evaluación aporta URL, imagen, viewport, currentSrc, anchos y cambios recientes. No hacen falta credenciales iniciales.

El arreglo debe reducir bytes en móvil manteniendo nitidez y usos legítimos de alta resolución.

Encargar la optimización de imágenes

Si necesitas corregir la entrega en tus plantillas, el servicio de optimización de imágenes WordPress incluye una muestra representativa, aceptación visual, revisión del recurso servido y una publicación reversible. Envía las URLs afectadas e identifica quién puede aprobar el detalle de producto y la calidad de las imágenes.