RankEngineRespuesta rápida: El SEO de imágenes en Shopify es principalmente un problema de velocidad, no de palabras clave. Las fotos de productos son lo más grande en la página y generalmente el elemento de Largest Contentful Paint, por lo que el tamaño del archivo de imagen, las dimensiones de los píxeles y la prioridad de carga afectan más al ranking que los nombres de archivo. Sube a 2048 px en el borde más largo, mantén la primera imagen por debajo de unos 200 KB, establece ancho y alto, carga diferida solo por debajo del pliegue, y deja que el CDN de Shopify sirva las variantes redimensionadas en WebP. Esta guía cubre tamaños, tamaños de archivo, resolución, redimensionamiento y formatos; para texto alternativo, consulta texto alternativo de imágenes de producto, para la vista previa de compartición, consulta imágenes para compartir en redes sociales.
Shopify sirve imágenes a través de su propio CDN y genera variantes responsivas automáticamente, lo que significa que muchos consejos genéricos de SEO de imágenes no se aplican aquí. Lo que queda es una lista corta, y la mayoría se trata de peso y dimensiones.
Por qué las imágenes dominan los Core Web Vitals de Shopify
En una página de producto típica, la imagen principal es el elemento LCP — lo más grande en el viewport, y lo que Google mide. Si tarda 3.5 segundos en renderizarse, la página falla en LCP sin importar qué tan rápido sea el resto del tema.
Dos cosas lo hacen lento: el archivo es más grande que el espacio en el que se renderiza, y no está priorizado. Una imagen de 2400 px mostrada a 800 px desperdicia tres cuartas partes de los bytes. El filtro image_url de Shopify con un parámetro de ancho soluciona esto, y la mayoría de los temas modernos ya lo usan — pero las imágenes insertadas en campos de texto enriquecido, cuerpos de blogs y secciones personalizadas generalmente lo omiten por completo.
Tamaño de imagen, tamaño de archivo y resolución son tres cosas diferentes
La mayoría de los consejos sobre imágenes fallan porque los mezclan.
- Tamaño de imagen son las dimensiones en píxeles — 2048 × 2048. Decide qué tan nítida puede ser la imagen y qué tan grande puede mostrarse.
- Tamaño de archivo son los bytes en disco — 180 KB. Decide cuánto tiempo tarda en descargarse la imagen. Depende de las dimensiones, el formato, la compresión y cuánto detalle contiene la foto.
- Resolución (DPI) es una instrucción de impresión. Los navegadores la ignoran. Una imagen de 1600 px a 72 DPI y la misma imagen a 300 DPI son la misma imagen web; la regla de "guardar a 72 DPI para web" no cambia nada excepto los metadatos.
La variable que sí importa junto con los píxeles es la relación de píxeles del dispositivo. Un teléfono con una pantalla 2× necesita aproximadamente el doble del ancho CSS en píxeles reales para verse nítido: una tarjeta de producto de 400 px de ancho quiere una imagen de 800 px en ese dispositivo y una imagen de 400 px en un monitor 1×. Para eso están srcset y sizes — el tema enumera las variantes que Shopify puede generar y el navegador elige la que se ajusta. Los temas construidos sobre el filtro image_tag de Shopify emiten estos automáticamente; una etiqueta img escrita a mano en una sección personalizada obtiene un tamaño para todos.
Objetivos de tamaño de archivo de imagen según su ubicación
Una única regla de "mantener imágenes por debajo de 100 KB" es incorrecta en ambas direcciones — demasiado laxa para miniaturas, demasiado estricta para un banner de ancho completo. Trabaja según la ubicación:
| Ubicación | Ancho de visualización típico | Objetivo de tamaño de archivo | Por qué |
|---|---|---|---|
| Imagen principal de la página de inicio / banner de ancho completo | 1600–2000 px | ≤ 200 KB (WebP), ≤ 300 KB (JPEG) | Casi siempre el elemento LCP en la página de inicio |
| Primera imagen de producto (líder de galería) | 800–1200 px | ≤ 200 KB | Elemento LCP en la página de producto |
| Imágenes adicionales de galería | 800–1200 px | ≤ 100–150 KB | Cargadas al interactuar o de forma diferida |
| Tarjetas de cuadrícula de colección | 300–500 px | ≤ 50 KB | Docenas por página; la suma es lo que duele |
| Imágenes en línea de blogs | 700–900 px | ≤ 100 KB | Generalmente omiten la lógica de variantes del tema |
| Logos, iconos, insignias | ≤ 300 px | ≤ 10 KB, SVG donde sea posible | Repetidos en cada página |
Estos son objetivos de trabajo, no leyes: un primer plano detallado de una tela necesitará más bytes que un producto sobre un fondo blanco en las mismas dimensiones. La prueba que importa es si la primera imagen en la página cumple con el presupuesto de LCP.
Formatos: JPEG, PNG, WebP y lo que Shopify hace por ti
- JPEG para fotografías. La calidad de exportación 75–82 es el rango donde una foto de producto deja de cambiar visiblemente pero el archivo sigue reduciéndose.
- PNG solo para gráficos planos que necesitan transparencia — logos, insignias, ilustraciones con bordes definidos. Una fotografía en PNG es rutinariamente cinco veces el tamaño del mismo JPEG.
- WebP es más pequeño que ambos para la misma calidad visual, y el CDN de Shopify sirve WebP automáticamente a los navegadores que lo aceptan. Convertir antes de subir no gana nada en la tienda; lo que sí ayuda es que una aplicación que reemplace un original sobredimensionado con una versión WebP reduce cada variante que Shopify genera a partir de él.
- SVG para logos e iconos: independiente de la resolución y generalmente unos pocos kilobytes.
Redimensionar imágenes para Shopify: dónde hacerlo
Hay tres lugares para redimensionar, y no son intercambiables.
Antes de subir (preferido para nuevas imágenes). Redimensiona a 2048 px en el borde más largo, luego comprime. Cualquier editor de imágenes o un compresor web gratuito hace esto, y significa que el original que Shopify guarda ya es liviano. Exporta por lotes toda una sesión al mismo tamaño y relación de aspecto para que la cuadrícula de la colección se mantenga uniforme.
Dentro de Shopify, por el tema. Las variantes de Shopify son la capa de entrega: el tema solicita un ancho y el CDN devuelve ese tamaño. Esto es automático y correcto, pero solo reduce dimensiones — un original pesado y ruidoso aún produce variantes más pesadas de lo que un original limpio haría.
Por una aplicación que reescribe el original. Esta es la única ruta que corrige imágenes ya en el catálogo sin volver a subirlas. Autopilot de RankEngine tiene una regla de Compresión Automática de Imágenes que convierte imágenes de producto sobredimensionadas a WebP y reemplaza el original a través del Admin API (productCreateMedia, luego productDeleteMedia), y su registro de actividad registra cada conversión con el tamaño antes y después — consulta Configuración de reglas de Autopilot. Volver a subir manualmente tiene un costo que la ruta de la aplicación evita: cambia la URL de la imagen, lo que rompe enlaces y referencias en caché al archivo antiguo.
El compromiso entre rendimiento y calidad, honestamente
Las guías de compresión tienden a prometer ninguna pérdida visible. La versión honesta: hay una pérdida, y la pregunta es si un comprador puede verla al tamaño en que se muestra la imagen. Verifica el resultado en la página real del producto al 100%, en un teléfono, no en la vista previa ampliada del editor. Bandas en un degradado suave, halos en bordes duros y textura de tela borrosa son las tres señales; si las ves, aumenta la calidad cinco puntos y exporta de nuevo. La ganancia de 82 a 60 es pequeña en bytes y grande en artefactos, por lo que el rango útil es estrecho.
Qué hacer realmente
Sube a 2048 px en el borde más largo. Shopify genera variantes más pequeñas a partir del original, por lo que subir más grande desperdicia almacenamiento sin mejorar nada. Subir más pequeño significa que la vista de zoom es suave.
Deja que Shopify sirva WebP. Lo hace automáticamente basado en el encabezado Accept del navegador. Convertir manualmente antes de subir no gana nada y te cuesta el fallback JPEG.
Establece atributos de ancho y alto. Las dimensiones faltantes causan un cambio de diseño a medida que se carga la imagen, lo que es una penalización directa de CLS. Los temas que usan image_tag obtienen esto gratis; las etiquetas img escritas a mano en una sección personalizada generalmente no.
Carga diferida de todo lo que esté por debajo del pliegue — y nada por encima de él. Un atributo lazy en la imagen principal retrasa el elemento LCP y empeora la puntuación. La primera imagen debe tener una alta prioridad de carga en su lugar.
| Posición de la imagen | Estrategia de carga | Razón |
|---|---|---|
| Por encima del pliegue (imagen principal / elemento LCP) | fetchpriority="high", sin carga diferida | La carga diferida mueve el elemento de pintura visible más grande más tarde y empeora la puntuación |
| Por encima del pliegue (otras imágenes) | Eager (el valor predeterminado) | Las imágenes visibles no deben diferirse |
| Por debajo del pliegue | loading="lazy" | Las imágenes fuera de pantalla se difieren, reduciendo el peso inicial de la página y liberando ancho de banda para el elemento LCP |
Comprime antes de subir si la fuente es un archivo de cámara. El procesamiento de Shopify no es agresivo. Un JPEG de DSLR de 6 MB se convierte en una variante de 900 KB; la misma imagen pasada por un compresor primero se convierte en 200 KB sin diferencia visible.
Nombres de archivo y texto alternativo: la versión honesta
Los nombres de archivo son una señal débil. Renombrar IMG_4821.jpg a bufanda-merino-azul.jpg vale la pena cuando estás subiendo de todos modos, y no vale la pena un proyecto de re-subida masiva — volver a subir rompe las URLs de imágenes existentes y cualquier enlace a ellas.
El texto alternativo importa más, principalmente para accesibilidad y Google Images, y está cubierto adecuadamente en texto alternativo de imágenes de producto. El generador gratuito de texto alternativo lo escribe una imagen a la vez en el navegador.
La única cosa que vale la pena medir
Pasa una página de producto por PageSpeed Insights y mira solo dos números: el elemento LCP (nombrará la imagen) y su tamaño. Si el elemento LCP es una imagen de más de 200 KB, ese es todo el proyecto.
Todo lo demás — nombres de archivo, sitemaps, datos EXIF — es un error de redondeo al lado de la imagen que tarda dos segundos en renderizarse.
Hacerlo en todo un catálogo
La versión por página de esto es sencilla. La versión del catálogo no lo es: en 800 productos las imágenes sobredimensionadas son un subconjunto, generalmente las más antiguas o un lote importado de un feed de proveedor.
El informe de auditoría de velocidad de RankEngine informa LCP por URL con la imagen ofensiva nombrada, y sus herramientas de imagen señalan archivos sobredimensionados y dimensiones faltantes en todo el catálogo en lugar de por página; las reglas de compresión y texto alternativo luego las corrigen en la ejecución diaria de Autopilot dentro del límite de corrección por tienda, con cada cambio verificado contra la tienda y reversible desde el registro.
Lista de verificación para tu próximo lote de imágenes
- Misma relación de aspecto para cada imagen en la colección.
- 2048 px en el borde más largo, exportado a calidad JPEG 75–82 (o WebP).
- Primera imagen en la página por debajo de 200 KB; miniaturas de cuadrícula por debajo de 50 KB.
- Nombre de archivo descriptivo si estás subiendo de todos modos; nunca una re-subida solo para renombrar.
- Texto alternativo escrito para el producto, no la palabra clave.
- Después de publicar: PageSpeed Insights en una página de producto — confirma el elemento LCP y su tamaño.
Relacionado
- Texto alternativo de imágenes de producto — qué hace el texto alternativo, qué no hace y cómo escribirlo.
- Imágenes para compartir en redes sociales — la vista previa de Open Graph, que es una imagen diferente con reglas diferentes.
- Auditoría SEO gratuita — lo que la auditoría de la tienda verifica más allá de las imágenes, incluyendo LCP por URL.