La tienda transfiere menos bytes después de optimizar, pero las fotografías han perdido nitidez. Subir la calidad global no siempre lo arregla: el navegador puede ampliar una miniatura, elegir un candidato responsive pequeño o partir de un original ya degradado. Aumentar todos los archivos solo encarecería la carga.
Hay que localizar dónde se perdió el detalle.
Identificar la vista exacta
Prueba por separado tarjeta de categoría, productos relacionados, imagen principal, miniatura de galería, zoom o lightbox, variación, móvil y pantalla de alta densidad. Guarda URL, viewport y captura.
«Las imágenes están borrosas» suele describir un contexto concreto. Una miniatura correcta no demuestra que el zoom tenga resolución suficiente.
Comparar dimensiones visuales e intrínsecas
Selecciona la imagen en las herramientas de Chromium y ejecuta:
const image = $0;
console.log({
selected: image.currentSrc,
natural: [image.naturalWidth, image.naturalHeight],
rendered: [
image.getBoundingClientRect().width,
image.getBoundingClientRect().height
],
devicePixelRatio: window.devicePixelRatio
});$0 representa el elemento seleccionado. Si una fuente de 300 píxeles se muestra a 700 CSS, el problema principal es el escalado, no la compresión.
Revisar tamaños de WooCommerce y tema
Comprueba ancho de miniatura del catálogo, imagen de producto, recorte, soporte declarado por el tema y tamaño escogido en el constructor. Una actualización del tema puede cambiar las dimensiones esperadas mientras los adjuntos antiguos conservan variantes previas. Por eso las subidas nuevas pueden verse bien y las viejas no.
Define primero las necesidades del diseño. Cambiar medidas y regenerar repetidamente por ensayo consume recursos y dificulta volver atrás.
Verificar srcset, sizes y zoom
Consulta currentSrc, srcset y sizes en la galería. Si ocupa 600 píxeles CSS en una pantalla 2×, una fuente cercana a 1200 puede ser razonable. Un sizes incorrecto puede elegir una menor y ampliarla.
Prueba escritorio normal, teléfono de alta densidad y varios anchos. No fuerces el original más grande en todos los dispositivos.
El zoom necesita más resolución que la galería visible. Confirma dimensiones de galería, objetivo del zoom, original, fuente seleccionada y necesidad comercial. Conserva una variante detallada para ampliar sin obligar al listado a descargarla.
Comprobar la calidad del original
Ningún codificador recupera detalle inexistente. Si el proveedor entrega 500 píxeles, generar 1200 solo interpola. Busca el mejor original aprobado.
No apliques enfoque y ampliación indiscriminados: los bordes artificiales pueden representar mal materiales y colores. Si no existe una fuente mayor, adapta el diseño o desactiva el zoom.
Ajustar compresión según el producto
Joyería, tejidos, cabello, letras pequeñas y degradados muestran artefactos antes que formas simples. Prepara una muestra con detalle fino, fondos claros y oscuros, transparencia, etiquetas y texturas naturales.
Elige la calidad basándote en el ejemplo comercial más exigente. Compara el WebP entregado con el JPEG al tamaño de galería y zoom, buscando manchas, halos, bandas, cambios de color y pérdida de texto. Las escalas de calidad de JPEG y WebP no equivalen.
Mantén perfiles de color coherentes. Ahorrar bytes a costa de un color de producto incorrecto puede aumentar devoluciones.
Revisar recortes y masters dañados
El recorte cuadrado puede ampliar una porción estrecha de una fotografía vertical. Comprueba dimensiones generadas, posición del sujeto y coherencia del catálogo. Si conviven proporciones diferentes, un recorte duro universal quizá no sea apropiado.
Prueba un producto antes de aplicar el cambio en masa.
Si la optimización sobrescribió el original, regenerar crea derivados nuevos desde un master dañado. Recupera una fuente verificada de la copia, archivo fotográfico, proveedor o despliegue anterior y valida la restauración en staging.
Preservar asociaciones y caché
Reemplazar adjuntos puede alterar orden de galería, variaciones, metadatos, URL SEO, feeds y CDN. Usa un método que preserve relaciones o cree redirecciones deliberadas; no borres y vuelvas a subir toda la biblioteca sin mapa.
Después, identifica la URL borrosa y purga solo el activo y páginas relacionadas. El navegador, caché de página y CDN pueden mantener la variante vieja. Evita purgados completos repetidos sin saber qué capa está obsoleta.
Validar la experiencia de compra
Comprueba claridad y velocidad en categoría, galería, zoom, cambio de variación, gesto móvil, añadir al carrito, estabilidad de diseño y bytes transferidos.
La aceptación debe demostrar fuente correcta por viewport, ausencia de ampliación no intencionada, detalle y color aprobados, peso razonable y asociaciones intactas. No existe un límite universal para todos los productos.
Para una evaluación aporta URL, captura, currentSrc, dimensiones, original autorizado y cambio que provocó el problema. No se necesitan credenciales al principio.