Optimizar imágenes en WooCommerce y Shopify para mejorar los Core Web Vitals
Publicado el 28 de septiembre de 2026 · Lectura de 6 minutos
En una tienda online, la imagen del producto es el elemento más grande de la pantalla y, por tanto, el que más pesa en el LCP. Una ficha con diez fotos de 3 MB cada una puede tardar varios segundos en ser interactiva en 4G, con el impacto directo que eso tiene en la tasa de conversión. Optimizar imágenes no es un detalle estético: es una palanca de negocio.
Tamaños recomendados para productos
Elige dimensiones coherentes con la plantilla y fija un peso objetivo por imagen:
| Elemento | Dimensiones | Peso objetivo (WebP) |
|---|---|---|
| Miniatura de catálogo | 600×600 px | < 60 KB |
| Imagen principal de ficha | 1200×1200 px | < 150 KB |
| Ficha con zoom | 1600×1600 px | < 250 KB |
| Banner de categoría | 1600×600 px | < 200 KB |
| Slider de portada | 1920×1080 px | < 300 KB |
Si tus originales superan estos valores, redimensiona antes de convertir. En nuestro conversor puedes fijar el ancho máximo y mantener la proporción; el resultado llega listo para subir.
WooCommerce: cómo automatizar WebP
WooCommerce genera automáticamente varios tamaños por cada imagen que subes, pero no convierte a WebP por sí solo. Tienes tres vías:
- Plugin de optimización (ShortPixel, Imagify, EWIF o Smush): convierten a WebP al subir y sirven el formato correcto según el navegador. Son la opción más cómoda.
- Conversión manual previa: convierte el catálogo con nuestra herramienta (permite lotes y descarga en ZIP) y sube ya los archivos optimizados. Ideal para catálogos pequeños o migraciones puntuales.
- CDN con transformación: servicios como Cloudflare Images reescriben las URLs al vuelo. Aportan también caché global, pero añaden coste recurrente.
Si el plugin de tu plantilla ya sirve WebP, comprueba que no se pierda el respaldo JPG para navegadores antiguos y que el atributo alt se mantenga relleno con el nombre del producto.
Shopify: qué control tienes
Shopify entrega las imágenes a través de su CDN con parámetros de redimensionado en la propia URL, y las plantillas modernas usan srcset para servir el tamaño adecuado. No obstante, Shopify no reemplaza la calidad del original: si subes un JPEG de 4 MB, esa pesa. Buenas prácticas:
- Sube archivos ya redimensionados y con el peso controlado (convertidos a WebP o JPG de calidad 80-85).
- Usa nombres de archivo descriptivos con guiones:
zapatillas-rojas-vista-lateral.webp. - Evita el texto incrustado en la imagen: el buscador no lo lee y fuerza imágenes más pesadas.
- Rellena siempre el campo de texto alternativo con palabras clave naturales del producto.
Errores habituales en tiendas online
- Galerías sin lazy loading. Carga diferida solo lo que está fuera de la pantalla; la imagen principal del producto sí debe cargarse con prioridad (
fetchpriority="high"). - GIF animados de fondo. Pueden superar el millón de bytes; sustitúyelos por vídeo corto o por una imagen fija en WebP.
- Watermarks gigantes. Un texto grande incrustado obliga a mantener resoluciones altas; mejor una marca de agua discreta.
- Convertir dos veces. Parte siempre del original: reconversiones acumulativas degradan la foto.
Cómo medir el resultado
Ejecuta PageSpeed Insights sobre fichas de producto reales (no solo la home) y revisa LCP, CLS y el ahorro de bytes de imagen. Un benchmark realista: tras convertir un catálogo completo de JPG a WebP con calidad 80 y redimensionado a 1200 px, la mayoría de tiendas reduce el peso total de imágenes entre un 50% y un 70%.
Si necesitas profundizar en la métrica, consulta cómo mejorar el LCP; para elegir entre formatos modernos, revisa WebP vs AVIF; para el paso a paso de conversión, la guía de JPG a WebP; y para cuadrar pesos y dimensiones de cada ficha, la guía de tamaño de imágenes para web.