Optimización de imágenes en Shopify: guía técnica para ecommerce

Si tu tienda Shopify va lenta, casi con total seguridad el problema son las imágenes. Lo veo en cada auditoría. El Web Almanac de HTTP Archive reporta que las imágenes son, de media, el 42,3% del peso total de una página móvil, más que cualquier otro recurso (HTTP Archive Web Almanac, 2024). En Shopify el dato empeora: los themes modernos cargan hero, colecciones y productos con imágenes grandes de serie, y casi nadie toca el código Liquid para ajustarlo. Este post es la guía técnica que me hubiera gustado tener: formatos, img_url, lazy loading, alt text a escala, y qué hace (y qué no hace) el CDN de Shopify. Para el contexto más amplio de posicionamiento, mi guía de Shopify SEO ecommerce 2026 cubre el resto de la arquitectura.

Puntos clave

• Las imágenes representan el 42,3% del peso medio de una página móvil (HTTP Archive, 2024)
• Shopify sirve automáticamente WebP cuando el navegador lo soporta, desde 2021 (Shopify.dev)
• El filtro image_url con width y el helper image_tag generan el srcset responsive por ti, no hace falta escribirlo a mano (Shopify.dev)
• El atributo nativo loading="lazy" está soportado en más del 95% de navegadores según Can I Use (Can I Use, 2025); no necesitas Intersection Observer salvo casos muy concretos
• El LCP debe ocurrir en menos de 2,5 segundos en el percentil 75 para clasificar como “Bueno” (web.dev)

¿Por qué las imágenes son el cuello de botella número uno en Shopify?

El Web Almanac de HTTP Archive sitúa las imágenes como el 42,3% del peso medio de una página móvil, por delante de JavaScript y CSS juntos (HTTP Archive, 2024). En Shopify el efecto se amplifica porque los themes cargan hero a pantalla completa, colecciones densas y galerías de producto sin que el merchant ajuste nada.

La causa raíz es doble. Primero, los themes traen settings por defecto pensados para que “se vea bonito” en el editor, no para pasar Core Web Vitals. Segundo, las apps de Shopify inyectan sus propias imágenes, widgets y scripts sin pedir permiso. En una marca de cosmética que audité a principios de 2026 con 200+ SKUs, el hero de la home pesaba 1,4 MB en móvil. Solo ese archivo ya rompía el presupuesto de LCP.

¿Cómo afecta esto al LCP de tu tienda?

El LCP (Largest Contentful Paint) es, en el 72-81% de las páginas web según análisis de Google, una imagen (web.dev, 2024). En una ficha de producto Shopify, el LCP casi siempre es la primera foto del producto. Si ese archivo pesa 800 KB y no tiene fetchpriority="high", el LCP se dispara a 4-5 segundos en 4G. Google marca “Bueno” solo por debajo de 2,5 segundos en el percentil 75 (web.dev).

Cápsula de citación: Las imágenes representan el 42,3% del peso medio de una página móvil según el Web Almanac 2024 de HTTP Archive, y en el 72-81% de las webs el elemento LCP es precisamente una imagen (HTTP Archive, 2024; web.dev, 2024).

Formatos de imagen: ¿cuándo usar WebP, AVIF o JPG en Shopify?

Shopify convierte automáticamente tus imágenes a WebP cuando el navegador las soporta, desde 2021 (Shopify.dev). Es decir: si subes un JPG de 2 MB, Shopify sirve WebP de ~600 KB sin que toques nada. Pero si subes un PNG sin optimizar, la conversión ocurre igual, solo que partes de un archivo fuente innecesariamente pesado.

AVIF todavía no se sirve de forma nativa por el CDN de Shopify a día de hoy. Según Can I Use, AVIF está soportado en el 93,9% de navegadores a principios de 2026 (Can I Use, 2025), pero Shopify no lo entrega automáticamente en la mayoría de themes. Si lo quieres, tienes que usar apps externas o servir desde un CDN propio, lo cual rompe el pipeline estándar.

Tabla comparativa: WebP vs AVIF vs JPG

El error más común que veo: merchants que instalan apps “convertidoras a WebP” sin saber que Shopify ya lo hace. Acaban con conversión doble, peor calidad y un coste mensual que no aporta nada.

¿Qué pasa con los PNG transparentes?

PNG sigue siendo el formato correcto para logos, iconos y cualquier imagen con transparencia de aristas limpias. Shopify también los convierte a WebP en los navegadores modernos, pero si el archivo fuente es 1 MB, el WebP resultante también va a ser pesado. Pasa el PNG por TinyPNG o Squoosh antes de subirlo.

El filtro image_url y image_tag en Liquid: responsive sin sufrir

Shopify reemplazó el antiguo filtro img_url por image_url en 2022, y el nuevo helper image_tag genera automáticamente el srcset, sizes, loading y atributos de ancho/alto (Shopify.dev). Si todavía usas img_url en tu theme, estás dejando sobre la mesa la optimización más fácil del stack.

El patrón moderno es este. En lugar de hardcodear un tamaño fijo, pides una lista de anchos al filtro y el navegador elige el que necesita según viewport y densidad de pantalla.

Snippet Liquid: hero responsive con image_tag

{%- comment -%}
  Hero responsive con srcset generado automáticamente.
  Añade fetchpriority="high" solo en el LCP (normalmente el primer hero).
{%- endcomment -%}

{{ section.settings.hero_image | image_url: width: 2000
   | image_tag:
     loading: 'eager',
     fetchpriority: 'high',
     sizes: '100vw',
     widths: '400, 600, 800, 1200, 1600, 2000',
     alt: section.settings.hero_image.alt | default: section.settings.heading
}}

Este bloque genera un <img> con srcset completo, width y height automáticos (evitando CLS), loading="eager" y fetchpriority="high" porque es el LCP. No lo pongas en imágenes below-the-fold. Google indica explícitamente que fetchpriority="high" mal usado penaliza el rendimiento (web.dev, 2023).

Snippet Liquid: tarjeta de producto en colección

{%- comment -%}
  Imagen de producto en grid de colección.
  Lazy por defecto, con aspect-ratio para prevenir CLS.
{%- endcomment -%}

<a href="{{ product.url }}" class="product-card">
  {{ product.featured_image | image_url: width: 600
     | image_tag:
       loading: 'lazy',
       sizes: '(min-width: 990px) 25vw, (min-width: 750px) 33vw, 50vw',
       widths: '200, 300, 400, 600, 800',
       alt: product.featured_image.alt | default: product.title
  }}
</a>

Los sizes tienen que reflejar tu grid real. Si tu colección es 4 columnas en desktop, 3 en tablet y 2 en móvil, los breakpoints anteriores son correctos. Si usas otros, ajústalos. Pasar sizes: '100vw' en una tarjeta pequeña significa descargar una imagen enorme para nada.

Lazy loading en Shopify: ¿nativo o Intersection Observer?

El atributo nativo loading="lazy" está soportado por el 95,7% de navegadores según Can I Use (Can I Use, 2025). La regla mental es simple: una sola línea de HTML sustituye a toda la lógica de Intersection Observer que antes había que escribir a mano. Úsalo en todo lo que esté below-the-fold.

Pero cuidado con un anti-patrón muy frecuente. Si pones loading="lazy" en el hero o en la primera imagen de producto above-the-fold, destrozas el LCP. La propia documentación de web.dev lo marca como error común (web.dev, 2023). Regla: el LCP va eager, todo lo demás lazy.

¿Cuándo sí necesitas Intersection Observer?

Rara vez. El caso útil es cuando quieres cargar no solo la imagen sino todo un bloque pesado (un carrusel con JavaScript, un mapa embebido, un vídeo). En ese caso el Observer te permite retrasar también los scripts asociados. Para imágenes puras, loading="lazy" basta.

En la auditoría de cosmética de 2026, había una app de “lazy load avanzado” instalada. Desactivándola y usando el loading="lazy" nativo del theme Dawn, el LCP bajó de 3,8 s a 2,1 s sin tocar nada más. Menos código, mejor resultado.

Alt text a escala: el problema real cuando tienes 200 SKUs

Google y los lectores de pantalla usan el alt text para entender el contenido visual, y la guía oficial de Search Central lo confirma como señal de SEO de imágenes (Google Search Central). El problema no es conceptual. El problema es operativo: nadie escribe manualmente 800 alt texts para 200 productos con 4 imágenes cada uno.

En la marca de cosmética que audité a principios de 2026, 38 de los 212 productos tenían el alt text completamente vacío, y otros 94 tenían el alt igual al nombre del archivo (IMG_2341.jpg). Eso no es alt text, es ruido.

¿Cómo generar alt text masivo sin volverte loco?

Tres tácticas que funcionan:

1. Fallback inteligente en Liquid: si no hay alt text, usa el título del producto como fallback dentro del theme. Ya lo incluyo en los snippets anteriores con | default: product.title.
2. Exportación CSV del admin: Shopify permite exportar productos con sus imágenes. Edita los alt en Excel o Google Sheets y reimporta. Es tedioso pero escalable.
3. Apps con IA para alt text: hay apps (Alt Text AI, por ejemplo) que generan alt descriptivo a partir del contenido visual. Revísalos siempre, la IA alucina descripciones.

El alt text ideal en ecommerce es específico: “Sérum vitamina C 30 ml de Marca X en frasco ámbar con pipeta”, no “sérum”. Específico, no keyword stuffing.

¿Qué hace el CDN de Shopify y qué no hace?

El CDN de Shopify está servido por Fastly y entrega los assets desde puntos de presencia globales, según la documentación oficial (Shopify.dev). Hace cuatro cosas bien: conversión automática a WebP, redimensionado on-the-fly vía el parámetro width de la URL, caché agresiva en edge y HTTPS con HTTP/2.

Pero hay cuatro cosas que no hace. No genera AVIF nativamente. No comprime agresivamente las imágenes fuente que subes (si subes 2 MB, parte de ahí). No reorganiza el orden de carga ni añade fetchpriority por ti. Y no arregla tus sizes mal configurados. El CDN multiplica lo que le das: si le das una base buena, lo sirve rápido; si le das un PNG de 5 MB, lo entrega también, solo que tú cargas con el coste.

¿Cómo saber si el CDN está sirviendo WebP?

Abre DevTools, pestaña Network, filtra por “Img”. Mira la columna Type o el header Content-Type de la respuesta. Si ves image/webp, el CDN está haciendo su trabajo. Si ves image/jpeg en un navegador moderno, probablemente la URL está hardcodeada saltándose el filtro Liquid.

LCP e imágenes hero: caso de estudio en una marca de cosmética

El 72-81% de los elementos LCP en web son imágenes, según análisis de Google publicados en web.dev (web.dev, 2024). En la marca de cosmética que audité a principios de 2026 con 200+ SKUs, el LCP en móvil era de 4,2 s en el percentil 75, zona “Pobre” según los umbrales oficiales.

El archivo hero original era un JPG de 1,4 MB, servido sin width al filtro Liquid (que devolvía el tamaño original), con loading="lazy" por error y sin fetchpriority. Cuatro errores en una sola etiqueta.

Resultado tras el fix, medido con PageSpeed Insights en datos de campo de CrUX:

• LCP móvil: de 4,2 s a 2,0 s (caída del 52%)
• Peso del hero: de 1,4 MB a 180 KB (WebP, width 1600, srcset completo)
• Performance score móvil: de 42 a 81
• Clasificación Core Web Vitals: de “Pobre” a “Bueno”

El fix fueron tres cambios. Primero, reescribir la etiqueta del hero con image_tag, widths responsive y fetchpriority="high". Segundo, quitar el loading="lazy" del hero. Tercero, eliminar una app de “speed optimization” que estaba inyectando un preloader JS que bloqueaba el render.

¿Qué herramientas uso para auditar imágenes en Shopify?

Google clasifica las Core Web Vitals como factor de ranking oficial y publica los umbrales en Search Central (Google Search Central). La auditoría debe combinar datos de laboratorio y datos de campo, nunca uno solo.

Las cuatro herramientas que uso en cada auditoría

1. Lighthouse (Chrome DevTools): datos de laboratorio. Bueno para iterar rápido cuando tocas código. No refleja la experiencia real de tus usuarios.
2. PageSpeed Insights: combina Lighthouse con datos de CrUX (Chrome User Experience Report), que son datos de campo reales agregados de Chrome (web.dev). Esta es la fuente que Google usa para ranking.
3. Search Console, Core Web Vitals: la visión agregada a nivel de URL, a 28 días. Aquí ves tendencias y qué URLs están en zona roja.
4. Calibre o SpeedCurve: monitorización continua. Necesario solo si eres una marca con tráfico serio y quieres alertas cuando algo se rompe.

¿Cuál es la diferencia entre datos de laboratorio y datos de campo?

Los datos de laboratorio (lab data) se generan en un entorno simulado controlado (Lighthouse). Los datos de campo (field data, CrUX) vienen de usuarios reales con sus redes, dispositivos y conexiones reales. Google usa los datos de campo para ranking. Si tu Lighthouse da 95 pero tu CrUX da LCP de 4 s, el que cuenta es el CrUX.

Preguntas frecuentes

¿Shopify convierte automáticamente mis imágenes a WebP?

Sí. Desde 2021, el CDN de Shopify sirve automáticamente WebP cuando el navegador del usuario lo soporta, según la documentación oficial (Shopify.dev). No necesitas apps externas para esto. Lo que sí debes hacer es subir archivos fuente ya optimizados: la conversión reduce tamaño pero no arregla una imagen de 5 MB mal exportada.

¿Debo usar loading="lazy" en todas las imágenes de mi tienda Shopify?

No. Según la guía oficial de web.dev, usar loading="lazy" en el elemento LCP degrada el rendimiento porque retrasa su descarga (web.dev, 2023). La regla: la primera imagen visible va con loading="eager" y fetchpriority="high". Todo lo below-the-fold va con loading="lazy". El soporte nativo del atributo supera el 95% de navegadores (Can I Use, 2025).

¿Qué tamaño máximo debe tener una imagen de producto en Shopify?

Depende de cómo se muestre. Para una imagen de producto que ocupe pantalla completa en zoom, 2048 px de ancho es suficiente. Shopify sirve versiones más pequeñas automáticamente vía srcset si usas image_url con widths. La regla general de web.dev es que ninguna imagen servida al usuario debería superar en más del 30% el tamaño que realmente ocupa en pantalla (web.dev, 2024).

¿Cuánto mejora el LCP al pasar de JPG a WebP en Shopify?

Depende del punto de partida. WebP pesa entre 25% y 35% menos que un JPG equivalente a calidad visual similar según medidas de web.dev (web.dev, 2024). En tiendas donde el LCP es una imagen grande sin optimizar, el paso a WebP más el ajuste de width y srcset puede reducir el LCP entre 30% y 50%, como en el caso de la marca de cosmética descrito arriba.

¿Necesito una app para optimizar imágenes en Shopify?

Normalmente, no. El trío de optimizaciones que mueve la aguja, WebP automático, image_tag con srcset y loading="lazy" nativo, ya viene en los themes modernos como Dawn (Shopify.dev). Las apps de “speed optimization” muchas veces duplican lo que la plataforma ya hace y añaden JavaScript que empeora el rendimiento. Audita primero, instala después.

Conclusión

Las imágenes no son un tema decorativo. Son el 42,3% del peso medio de una página móvil y, en la mayoría de tiendas Shopify, la diferencia entre un LCP de “Pobre” y uno de “Bueno”. La buena noticia es que el stack de Shopify ya hace la mitad del trabajo: conversión automática a WebP, CDN rápido, image_tag con srcset generado. La otra mitad depende de ti: subir archivos ya optimizados, usar image_tag en lugar de img_url antiguo, poner loading="lazy" donde toca (y eager en el LCP), y escribir alt text específico. Ninguna de estas cosas requiere apps de pago. Requieren leer el theme, editar Liquid y medir antes y después con PageSpeed Insights y Search Console. Si quieres que le eche un vistazo a tu tienda conmigo, reserva una llamada de 30 minutos y revisamos tus Core Web Vitals en directo.