Tamaño de archivo de imagen, velocidad de página y ventas: El vínculo directo que los vendedores de e-commerce no ven

La mayoría de los vendedores de e-commerce saben que las imágenes grandes son malas. Pocos lo tratan como un problema urgente de ingresos. Una investigación de Google y Deloitte lo cuantifica: cada 100ms adicionales de tiempo de carga cuesta a los sitios minoristas aproximadamente 1% en tasa de conversión. En un sitio que factura 100.000 € al mes, un segundo de retraso puede significar 12.000 € en ingresos anuales perdidos — solo por las imágenes. Esta guía cubre los objetivos de tamaño de archivo, la configuración de exportación, las correcciones técnicas y la auditoría rápida que te permite encontrar los problemas en menos de diez minutos.

La investigación: velocidad y conversiones

El vínculo entre la velocidad de página y las ventas está bien establecido. Un estudio de Google y Deloitte de 2019 sobre 37 sitios de venta minorista y viajes encontró que una mejora de 0,1 segundos en la velocidad de página móvil elevó las tasas de conversión en un promedio del 8%. Los sitios minoristas mostraron una mejora del 10% en el valor medio del pedido con la misma ganancia de velocidad. Los datos recientes de Google de la investigación de Core Web Vitals muestran que las páginas que cumplen el umbral LCP "Bueno" (menos de 2,5 segundos) convierten a tasas measurably más altas.

Las imágenes son el mayor contribuyente individual a los tiempos de carga lentos en la mayoría de las páginas de producto. Una página que carga 3 MB de imágenes no optimizadas antes de que el comprador haya pasado la imagen principal está dejando dinero sobre la mesa.

Objetivos de tamaño de archivo: lo que debes alcanzar

No hay una regla universal, pero los puntos de referencia del sector para las páginas de producto de e-commerce son consistentes:

• Imagen principal del producto (por encima del pliegue): Menos de 100 KB es ideal; 200 KB es un techo aceptable. Por encima de 200 KB, estás impactando measurably el LCP.
• Imágenes de galería (por debajo del pliegue): Menos de 200 KB cada una. Dado que se cargan de forma diferida en sitios correctamente configurados, son menos críticas que la imagen principal.
• Máximo absoluto para cualquier imagen mostrada en la web: 500 KB. Si publicas regularmente imágenes de más de 500 KB en tus páginas de producto, la optimización debe ser lo primero que corrijas.

Estos objetivos son alcanzables sin pérdida de calidad visible. Nuestro servicio de optimización de imágenes web maneja esto a escala para tiendas con grandes catálogos.

Comparación de formatos: WebP, JPEG y PNG

La elección de formato afecta significativamente el tamaño del archivo. Para una comparación detallada de las compensaciones de cada formato para la fotografía de productos, consulta nuestra guía sobre WebP vs JPEG vs PNG para e-commerce. En resumen para la velocidad de página:

• WebP es la mejor opción para imágenes de productos web. Entrega archivos un 25–34% más pequeños que JPEG con calidad visual equivalente y admite transparencia. Todos los navegadores principales lo han soportado desde 2020.
• JPEG es la alternativa confiable. Usa codificación JPEG progresiva para una carga percibida más rápida. Los ajustes de calidad de 75–85 producen resultados prácticamente indistinguibles con tamaños de archivo significativamente menores que la calidad 95–100.
• PNG debe reservarse para imágenes que genuinamente requieren transparencia. Los archivos PNG son consistentemente más grandes que JPEG para contenido fotográfico. Subir PNGs para fotos de productos que no requieren transparencia es uno de los errores de tamaño de archivo más comunes en e-commerce.

Cómo exportar correctamente desde Photoshop

El diálogo "Exportar como" de Photoshop te da control total sobre la calidad de salida y el tamaño del archivo. Usa estos ajustes para imágenes de productos web:

• Formato: JPEG (o WebP si tu flujo de trabajo lo admite). Evita PNG para imágenes fotográficas de productos.
• Calidad: 8–10 en la escala de Photoshop (80–100%). La calidad 8 (80%) es indistinguible de la calidad 10 (100%) en tamaños de visualización web — pero el archivo es un 40–60% más pequeño.
• Codificación progresiva: Activa "Progresivo" para JPEG. Los JPEG progresivos renderizan casi instantáneamente una versión de baja resolución de la imagen mientras se carga el resto, mejorando significativamente la velocidad de carga percibida.
• Resolución: 72 ppp para web. Una imagen de 300 ppp mostrada a 72 ppp añade peso al archivo sin ningún beneficio visual.
• Dimensiones: Redimensiona al tamaño de visualización real antes de exportar. Una imagen de producto mostrada a 1500×1500 px en tu sitio debe exportarse a 1500×1500 px, no a la resolución de captura original.

Lo que no debes hacer

El error de tamaño de archivo más común en e-commerce es subir directamente a un sitio web el mismo archivo que se envía a los flujos de trabajo de impresión o cumplimiento del marketplace. Amazon y muchos servicios de impresión solicitan archivos TIFF a 300 ppp con dimensiones de 3000×3000 px o más — a veces 10–20 MB por archivo. Siempre exporta una versión web dedicada desde tu software de retoque. Nunca uses tu archivo de entrega de Amazon o impresión como tu archivo de sitio web.

Componente Image de Next.js y carga diferida

Si tu tienda funciona con Next.js, el componente integrado Image resuelve automáticamente varios problemas de velocidad de página:

• Conversión automática de formato: Next.js sirve WebP automáticamente a los navegadores que lo admiten, con respaldo JPEG para navegadores más antiguos.
• Redimensionamiento automático: Las imágenes se redimensionan a las dimensiones de visualización definidas en tu diseño.
• Carga diferida: Las imágenes debajo del viewport no se cargan hasta que el usuario se desplaza hacia ellas. Esto reduce el peso inicial de la página que afecta el LCP.
• Carga prioritaria: Añade la prop priority a tu imagen principal del producto para precargarlo — esta imagen determina tu puntuación LCP.

Si no estás en Next.js, el equivalente es el atributo HTML loading="lazy" en las imágenes de galería, y atributos explícitos width y height para prevenir el cambio de diseño.

CDN: cómo reduce la latencia de entrega de imágenes

Una Red de Distribución de Contenido (CDN) almacena copias de tus imágenes en servidores distribuidos globalmente. Cuando un comprador en Sídney carga tu página de producto alojada en Londres, su navegador obtiene imágenes de un nodo CDN australiano en lugar de hacer un viaje de ida y vuelta a Europa. La reducción de latencia es sustancial — a menudo 200–400ms en solicitudes internacionales. Las principales plataformas de e-commerce (Shopify, BigCommerce, Next.js alojado en Vercel) incluyen entrega CDN para imágenes por defecto. Las instalaciones auto-hospedadas de WooCommerce o Magento a menudo no — y agregar un CDN es una de las inversiones de rendimiento con mayor retorno para esos sitios.

Core Web Vitals: LCP y tus imágenes de producto

Los Core Web Vitals de Google son las métricas técnicas que conectan directamente el rendimiento de las imágenes con los rankings de búsqueda orgánica. La más relevante para las páginas de producto es el Largest Contentful Paint (LCP) — el tiempo desde la navegación hasta que el elemento visible más grande termina de renderizarse. En una página de producto, ese elemento es casi siempre la imagen principal del producto.

Umbrales de LCP:

• Bueno: Menos de 2,5 segundos
• Necesita mejora: 2,5–4,0 segundos
• Deficiente: Más de 4,0 segundos

Las páginas en el rango "Bueno" se benefician de mejor posicionamiento en los resultados de búsqueda de Google. Las imágenes principales de productos demasiado grandes son la causa más común de malas puntuaciones LCP en páginas de productos de e-commerce.

Auditoría rápida: comprueba el tamaño de tus imágenes con Chrome DevTools

Puedes auditar las imágenes de tu página de producto en menos de cinco minutos usando Chrome DevTools:

• Abre la página de producto que quieres auditar, luego presiona F12 para abrir DevTools.
• Haz clic en la pestaña Red, luego recarga la página con Ctrl+Shift+R (recarga forzada con caché desactivada).
• En la barra de filtro, escribe Img para mostrar solo las solicitudes de imágenes.
• La columna Tamaño muestra los bytes realmente transferidos. Ordena por tamaño descendente para encontrar tus imágenes más grandes.
• Cualquier imagen de más de 200 KB en la columna de tamaño requiere reexportación. Si tu imagen principal del producto supera los 100 KB, debe encabezar la lista.

Cuándo externalizar la optimización de imágenes

Para tiendas con catálogos de cientos o miles de SKUs, la reexportación manual de cada imagen no es práctica. Nuestro servicio de optimización de imágenes web gestiona el procesamiento por lotes de bibliotecas de imágenes de productos, entregando archivos listos para la web en formatos WebP y JPEG, con metadatos eliminados y tamaños de archivo dentro de los objetivos anteriores. Envía 5 imágenes para un lote de prueba gratuito.