Las imágenes de productos son a menudo el mayor contribuyente al peso de la página en los sitios de ecommerce. Tras migrar de WooCommerce a Shopify, el manejo de imágenes cambia significativamente: el CDN de Shopify convierte automáticamente las imágenes a WebP y las sirve a través del CDN global de Shopify. Sin embargo, el propio proceso de migración puede introducir problemas (imágenes de baja resolución, texto alternativo ausente e imágenes de tamaño excesivo) que perjudican tanto el rendimiento como el SEO.

Cómo gestiona las imágenes Shopify de forma diferente a WooCommerce

Manejo de imágenes en WooCommerce

Imágenes almacenadas en wp-content/uploads/ en tu servidor de alojamiento
WordPress genera múltiples miniaturas de tamaño (thumbnail, medium, large, full)
Servidas desde tu servidor (o mediante un plugin de CDN como Cloudflare o BunnyCDN)
Formato: normalmente JPEG y PNG tal como se subieron
WebP: disponible mediante plugins (Imagify, ShortPixel, Cloudflare Polish) pero no automático

Manejo de imágenes en Shopify

Imágenes almacenadas en la infraestructura de Shopify (CDN de Shopify, con tecnología de Fastly)
Conversión automática a WebP cuando el navegador la admite
Servicio de imágenes responsive automático mediante parámetros de URL: image.jpg?width=800
Entrega mediante CDN global: no se necesita plugin adicional de CDN
Tamaño máximo de archivo: 20 MB por imagen subida
Dimensiones máximas: 5000×5000 px

Problemas de calidad de imagen durante la migración

Imágenes importadas con resolución reducida

Cuando k-sync importa imágenes de productos desde WooCommerce, las obtiene a través de la API del producto de WooCommerce, que devuelve las URLs de las imágenes en tamaño completo. Sin embargo, algunas tiendas WooCommerce sirven miniaturas de tamaño medio en sus respuestas de API en lugar de las imágenes en tamaño completo. Comprueba tras la migración que las imágenes de producto tengan al menos 1000×1000 px para una calidad de zoom adecuada en la galería de productos de Shopify.

Imágenes con calidad comprimida de subidas antiguas

Las imágenes subidas a WooCommerce hace años pueden haber sido comprimidas o redimensionadas en el momento de la subida original. Migrarlas a Shopify no mejora su calidad: llegan con la misma calidad con la que estaban almacenadas en WooCommerce. La migración es una oportunidad para auditar y reemplazar las imágenes de producto de baja calidad.

Texto alternativo no migrado

WooCommerce almacena el texto alternativo a nivel de la Biblioteca de Medios de WordPress (el campo alt en la publicación del adjunto). Esto es independiente del producto, y muchas herramientas de exportación de WooCommerce no lo incluyen. k-sync obtiene el texto alternativo de la API de WooCommerce cuando está disponible (campo images[].alt), pero muchas tiendas WooCommerce tienen el texto alternativo vacío incluso en WooCommerce.

Parámetros de URL de imágenes del CDN de Shopify

El CDN de imágenes de Shopify admite parámetros de URL para redimensionar al vuelo. Comprender esto ayuda en el desarrollo del tema y en las correcciones manuales post-migración:

// Original:
https://cdn.shopify.com/s/files/1/0000/0001/products/shirt.jpg

// Redimensionar a 800 px de ancho (mantiene la proporción):
https://cdn.shopify.com/s/files/1/0000/0001/products/shirt_800x.jpg

// Redimensionar a exactamente 800×600 (recorta si es necesario):
https://cdn.shopify.com/s/files/1/0000/0001/products/shirt_800x600.jpg

// O mediante parámetro de URL (en Liquid):
{{ product.featured_image | image_url: width: 800 }}

En Shopify Liquid, usa siempre image_url con un parámetro width en lugar de servir el original en tamaño completo. Esta es la mejora de rendimiento más significativa disponible.

LCP (Largest Contentful Paint) tras la migración

El LCP suele estar dominado por la imagen principal del producto en las páginas de producto o el banner principal en la página de inicio. Tras la migración, las regresiones del LCP son habituales porque:

El nuevo tema puede tener una imagen principal diferente y más grande
Las imágenes se sirven en resolución completa sin parámetros de ancho
El atributo loading="lazy" puede aplicarse incorrectamente a imágenes por encima del pliegue

La imagen principal por encima del pliegue siempre debe tener loading="eager" (o ningún atributo de carga) y un atributo fetchpriority="high" para activar la carga temprana del navegador. Comprueba el marcado de la galería de productos y la imagen principal de la página de inicio de tu tema tras la migración.

Estrategia de texto alternativo tras la migración

Cada imagen de producto debe tener texto alternativo descriptivo para:

Accesibilidad (usuarios de lectores de pantalla)
Visibilidad en Google Imágenes
Señales de relevancia SEO

Tras la migración de WooCommerce, el texto alternativo puede actualizarse en el panel de administración de Shopify de dos formas:

Panel de Shopify: Productos → [Producto] → Imágenes → pasa el ratón por encima de la imagen → Editar texto alternativo. Requiere mucho tiempo para catálogos grandes.
Masivo mediante la API de Shopify: La mutación productImageUpdate acepta altText. Un script puede actualizar el texto alternativo en lote desde una exportación CSV.

Una fórmula práctica de texto alternativo para imágenes de producto: "[Marca] [Nombre del producto] — [Color/Variante] [Descriptor clave]". Ejemplo: "Nike Air Max 90 — Triple Black zapatilla de running para hombre".

Nomenclatura de archivos de imagen tras la migración

Las imágenes de WooCommerce suelen tener nombres de archivo deficientes: product-12345.jpg o img_0042.jpg. Shopify conserva el nombre de archivo original al subirlo. Aunque la URL del CDN de Shopify no muestra el nombre del archivo de la misma forma que las URLs de WordPress, el nombre del archivo de imagen sí aparece en la Búsqueda de Imágenes de Google y puede influir en el posicionamiento.

Antes de la migración, cambia el nombre de las imágenes clave de producto por nombres descriptivos cuando sea posible: nike-air-max-90-triple-black-side-view.jpg.

Lista de verificación de imágenes post-migración

Todas las imágenes principales de productos tienen al menos 1000×1000 px en el tamaño de subida
Las imágenes por encima del pliegue tienen fetchpriority="high" y sin carga diferida
Todas las imágenes por debajo del pliegue usan loading="lazy"
Shopify Liquid usa image_url: width: N para toda la salida de imágenes (no en tamaño completo)
Texto alternativo del producto cumplimentado con palabras clave descriptivas (no vacío)
LCP de la imagen principal de la página de inicio medido en Google PageSpeed Insights: objetivo inferior a 2,5 s
Ninguna imagen supera el tamaño de subida de 5000×5000 px
Imágenes de variante asignadas a la variante correcta (no solo a la primera variante)
Carrusel/galería de imágenes funcionando correctamente en móvil tras el cambio de tema

Optimización de imágenes en Shopify después de migrar desde WooCommerce (2026)