Por qué es importante la optimización de la imagen
Las imágenes suelen representar 50–80 % del peso total de la página en las tiendas Shopify. Una sola foto de producto sin comprimir puede tener entre 3 y 8 MB, cuando debería tener entre 100 y 300 KB. Esto impacta directamente:
40–70%
of page weight comes from images
LCP
La imagen principal suele ser el elemento LCP
SEO
La búsqueda de imágenes genera un importante tráfico de comercio electrónico
Las imágenes no optimizadas ralentizan la carga de tu página, dañan tus Core Web Vitals (especialmente LCP), aumenta las tasas de rebote y perjudica las conversionesy desperdiciar los datos móviles de tus visitantes. La buena noticia: la optimización de imágenes es una de las mejoras de velocidad más fáciles e impactantes que puedes realizar. ¿Quieres ver dónde se encuentra tu tienda? Prueba la velocidad de tu tienda para descubrir cuánto te ralentizan las imágenes.
La solución fácil: optimización automática de imágenes
Antes de sumergirnos en las técnicas manuales a continuación: Thunder Page Speed Optimizer maneja la optimización de imágenes automáticamente, junto con el aplazamiento de secuencias de comandos, la inserción de CSS y la optimización de fuentes.
Qué maneja Thunder automáticamente:
Carga diferida inteligente
Carga diferida las imágenes de la página inferior y mantiene las imágenes destacadas ansiosas por un LCP rápido
WebP/Tamaño adaptable
Garantiza que las imágenes se publiquen en formato y dimensiones óptimos
Aplazamiento del guión
Pospone secuencias de comandos que bloquean el procesamiento para que las imágenes se carguen antes
CSS crítico + optimización de fuentes
Optimización completa de la velocidad de la página, no solo de las imágenes
Mejora media: +27 puntos PageSpeed
Thunder optimiza las imágenes como parte de una solución de velocidad completa. Configuración de 30 segundos, sin cambios de código, funciona con todos los temas.
Plan gratuito disponible · No se requiere tarjeta de crédito · Configuración de 30 segundos · Funciona con todos los temas
Formatos de imagen: WebP, AVIF, JPEG, PNG
El formato que utiliza tiene un impacto enorme en el tamaño del archivo. Esto es lo que necesita saber:
WebP: mejor opción general
Entre un 25 % y un 35 % más pequeño que JPEG con una calidad equivalente. Compatible con más del 97 % de los navegadores. El CDN de Shopify se convierte automáticamente a WebP cuando usas el imagen_url Filtro de líquido.
AVIF: más eficiente (emergente)
50% más pequeño que JPEG. Codificación más lenta y ligeramente menos compatibilidad con navegadores (~93%). Lo mejor para tiendas que necesitan la máxima compresión. Shopify aún no se convierte automáticamente a AVIF.
JPEG: el estándar
Ideal para fotografías. Sube archivos JPEG de alta calidad y deja que la CDN de Shopify se encargue de la conversión WebP. Utilice una calidad del 80 al 85 % para obtener el mejor equilibrio entre tamaño y calidad.
PNG — Sólo para transparencia
Utilice PNG sólo cuando necesite transparencia (logotipos, iconos). Los PNG son entre 3 y 10 veces más grandes que los JPEG para fotografías. Nunca utilice PNG para fotografías de productos.
Compresión: Cómo reducir el tamaño del archivo
⚡ Omita este paso: Thunder optimiza la entrega de imágenes automáticamente. Pero comprimir antes de cargar sigue siendo una buena práctica para obtener mejores resultados.
Shopify sí no comprime tus cargas originales. Si carga una imagen de 5 MB, ese archivo de 5 MB se almacena tal cual. Debes comprimir antes de cargar:
- Calabaza : la herramienta gratuita de Google. Arrastre, suelte y ajuste el control deslizante de calidad. Lo mejor para imágenes únicas.
- PequeñoPNG — Compresión por lotes. Sube hasta 20 imágenes a la vez (nivel gratuito).
- Objetivo: Menos de 200 KB por imagen de producto, menos de 150 KB para miniaturas de colección, menos de 300 KB para imágenes destacadas.
Resultados típicos de la compresión:
Foto original del producto: 3,2 MB (4000×4000 PNG)
Después de cambiar el tamaño a 2048 px: 1,8 MB
Después de la conversión JPEG: 420 KB
Después de calidad 82%: 180 KB ← Sube esto a Shopify
Shopify sirve como WebP: ~130 KB ← Lo que descargan los visitantesTamaño: cargue las dimensiones correctas
Subir imágenes de gran tamaño es uno de los errores más comunes. Una imagen de 4000×4000px que se muestra a 800×800px desperdicia el 96% de sus píxeles. Esto es especialmente costoso para visitantes móviles, que suelen tener conexiones más lentas y pantallas más pequeñas.
| Tipo de imagen | Tamaño recomendado | Tamaño de archivo objetivo |
|---|---|---|
| Imágenes del producto | 2048×2048px (cuadrado) | 100–200 KB |
| Miniaturas de colección | 800×800px | 50–100 KB |
| Imágenes de héroe/banner | 1600–2000 px de ancho | 150–300 KB |
| Imágenes de publicaciones de blog | 1200px de ancho | 100–200 KB |
| Logotipos/iconos | Según sea necesario (se prefiere SVG) | Menos de 20 KB |
Carga diferida: cargar imágenes a pedido
La carga diferida retrasa la carga de imágenes hasta que el usuario se desplaza cerca de ellas. Esto reduce drásticamente el peso de la página inicial: un página de colección con 40 productos solo carga las primeras 4 a 8 imágenes por adelantado. Para profundizar en las estrategias de implementación, consulte nuestro sitio web dedicado. Guía de carga diferida de Shopify.
<!-- ✅ Below-fold images: lazy load -->
<img src="product.jpg" loading="lazy" alt="...">
<!-- ✅ Hero/LCP image: load eagerly -->
<img src="hero.jpg" loading="eager" fetchpriority="high" alt="...">
<!-- ❌ Don't lazy-load your hero image -->
<img src="hero.jpg" loading="lazy" alt="...">Regla crítica: Nunca cargues de forma diferida tu imagen principal o imágenes de producto en la mitad superior de la página. Esto perjudica a LCP porque el navegador retrasa intencionalmente la imagen más importante. Thunder maneja esta distinción automáticamente.
Imágenes responsivas con srcset
Las imágenes responsivas tienen diferentes tamaños para diferentes tamaños de pantalla. Un teléfono obtiene una imagen de 400 px; un escritorio obtiene 1200px. Esto ahorra ancho de banda en el móvil.
<img
src="{{ image | image_url: width: 800 }}"
srcset="
{{ image | image_url: width: 400 }} 400w,
{{ image | image_url: width: 800 }} 800w,
{{ image | image_url: width: 1200 }} 1200w
"
sizes="(max-width: 768px) 100vw, 50vw"
width="800" height="800"
alt="{{ image.alt }}"
loading="lazy"
>
Los temas de Shopify más modernos incluyen
Soporte conjunto de origen . Consulte las secciones de imágenes de su tema para verificar.
Texto alternativo para SEO
El texto alternativo tiene dos propósitos: accesibilidad (lectores de pantalla) y SEO (búsqueda de imágenes de Google). Un buen texto alternativo es descriptivo, conciso y natural.
alt="IMG_4523" - sin sentido
alt="bolso bolso de cuero bolso bandolera bolso de mujer" - relleno de palabras clave
alt="Bolso bandolera de piel roja con herrajes dorados" — descriptivo y natural
En Shopify, configura el texto alternativo en cada imagen de producto en el editor de productos. Para imágenes de temas, agregue texto alternativo en la configuración de la sección o directamente en la plantilla de Liquid.
CDN de imágenes integradas de Shopify
Shopify automatically serves your images through a CDN (via Cloudflare), meaning they're delivered from servers close to your visitors worldwide. The CDN also handles:
- Conversión automática de WebP — cuando usas el
imagen_urlFiltro de líquido - Cambio de tamaño sobre la marcha — solicitar tamaños específicos con
| image_url: ancho: 800 - Almacenamiento en caché : las imágenes se almacenan en caché en ubicaciones de borde para una entrega rápida
No necesita una CDN de imágenes ni un servicio de optimización por separado. Pero la CDN no comprime sus originales ni maneja la carga diferida; esa es su responsabilidad (o la de Thunder). Para obtener un tutorial completo de cada palanca de optimización disponible, lea nuestro guía completa de optimización de velocidad de Shopify.
Optimización manual de imágenes frente a Thunder
📸 Actualización 2026: Novedades en la optimización de imágenes de Shopify
- → El soporte AVIF está creciendo. Si bien WebP sigue siendo el valor predeterminado seguro (más del 97 % de compatibilidad con el navegador), AVIF ofrece archivos entre un 20 % y un 30 % más pequeños que WebP. El CDN de Shopify aún no sirve automáticamente AVIF, pero está por llegar. Por ahora, WebP es tu mejor opción.
- → LCP es el Core Web Vital número uno para imágenes. Tu imagen de héroe es casi siempre el elemento LCP. NO debe tener carga diferida: use
fetchpriority="alta"en su lugar. Vea nuestro Guía de optimización de LCP. - → Las tiendas con muchas imágenes obtienen las mayores ganancias de velocidad. Las tiendas con más de 50 productos suelen tener entre el 40% y el 70% del peso de la página en imágenes. Una optimización adecuada puede aumenta las conversiones entre un 8% y un 15% solo por mejoras de velocidad.
- → Las páginas de recopilación son las peores infractoras. Una colección con 48 productos que cargan todas las imágenes a la vez puede agregar entre 5 y 15 MB al peso de la página. Optimización específica de la colección es esencial.
Comprueba el rendimiento de la imagen de tu tienda: Realiza una prueba de velocidad gratuita →
Preguntas frecuentes
¿Cuál es el mejor formato de imagen para Shopify?
WebP es el mejor formato general para Shopify en 2026: es compatible con más del 97 % de los navegadores y proporciona archivos entre un 25 % y un 35 % más pequeños que JPEG con una calidad equivalente. El CDN de Shopify sirve automáticamente WebP cuando usas el filtro image_url Liquid. Thunder también garantiza que todas las imágenes se muestren automáticamente en formatos óptimos.
¿Qué tamaño deben tener las imágenes de los productos de Shopify?
Cargue imágenes de productos a una resolución máxima de 2048 × 2048 px: esto proporciona una calidad nítida en las pantallas retina y, al mismo tiempo, mantiene los tamaños de archivo manejables. La CDN de Shopify ofrece diferentes tamaños según el dispositivo de visualización. Para miniaturas de colecciones, 800×800px es suficiente. Las imágenes de héroe/banner deben tener entre 1600 y 2000 píxeles de ancho.
¿Shopify optimiza las imágenes automáticamente?
Parcialmente. El CDN de Shopify sirve automáticamente el formato WebP y proporciona un tamaño responsivo a través del filtro image_url Liquid. Sin embargo, Shopify NO comprime tus cargas originales; si subes una imagen de 5 MB, ese archivo de 5 MB se almacena tal cual. Debe comprimir las imágenes antes de cargarlas o utilizar Thunder, que maneja la optimización de las imágenes automáticamente.
¿Debería usar una aplicación de optimización de imágenes en Shopify?
Para tiendas con más de un puñado de productos, sí. Comprimir manualmente cada imagen requiere mucho tiempo y es fácil de olvidar. Thunder maneja la optimización de imágenes como parte de su optimización completa de la velocidad: carga diferida, tamaño responsivo y conversión de formato junto con el aplazamiento de secuencias de comandos y la inserción de CSS. Este enfoque integral generalmente produce una mejora de +27 puntos en PageSpeed.
¿Cómo escribo un buen texto alternativo para las imágenes de productos de Shopify?
Un buen texto alternativo es descriptivo, conciso y natural. Describe lo que hay en la imagen: 'Bandolera de cuero rojo con herrajes dorados' es mejor que 'bolso' o 'IMG_4523'. Incluya el nombre de su producto de forma natural. Mantenlo por debajo de 125 caracteres. No rellenes palabras clave: escribe para una persona que no puede ver la imagen.
¿La optimización de imágenes afecta el SEO de Shopify?
Sí, de múltiples formas. Las imágenes optimizadas mejoran la velocidad de la página (Core Web Vitals), que es una señal directa de clasificación de Google. El texto alternativo descriptivo ayuda a clasificar en la Búsqueda de imágenes de Google. Las imágenes con el tamaño adecuado evitan el cambio de diseño (CLS), otro Core Web Vital. Thunder optimiza todos estos aspectos automáticamente.
¿Cómo optimizo imágenes en Shopify sin una aplicación?
Antes de cargarlas: comprima las imágenes con TinyPNG o Squoosh a menos de 200 KB, guárdelas como WebP o JPEG (no PNG para fotos) y cambie su tamaño a un máximo de 2048 px. En las plantillas de Liquid, utilice el filtro image_url con parámetros de ancho para un tamaño adaptable. Agregue cargando='lazy' a las imágenes de la página inferior y fetchpriority='high' a su imagen principal. Agrega texto alternativo descriptivo a cada imagen en el panel de administración de Shopify.
¿Cuál es el tamaño máximo de archivo de imagen para Shopify?
Shopify permite imágenes de hasta 20 MB y 4472×4472 píxeles. Sin embargo, nunca debes cargar imágenes de ese tamaño; intenta tener menos de 200 KB por imagen después de la compresión. Los archivos grandes ralentizan significativamente el tiempo de carga de tu tienda, incluso con el CDN de Shopify. Para imágenes de productos, 100-150 KB comprimidos a 2048 × 2048 px ofrecen el mejor equilibrio entre calidad y velocidad.