Fotos de producto para Shopify: formatos, tamaños y rendimiento

Los límites de Shopify para imágenes

Según el centro de ayuda de Shopify, puedes subir imágenes de hasta 5000 x 5000 píxeles o 25 megapíxeles y de menos de 20 MB. Los formatos admitidos son PNG, JPEG, WebP, HEIC, GIF, TIFF, BMP y SVG, incluidos GIF y WebP animados. Para imágenes cuadradas, Shopify indica que 2048 x 2048 píxeles suele dar buen resultado.

Que puedas subir una foto de 20 MB no significa que debas hacerlo. Shopify redimensiona y comprime al servir, pero partir de un archivo razonable acelera la subida, el trabajo en el admin y cualquier exportación posterior. Una foto de 2048 píxeles de lado bien exportada suele ser más que suficiente para el zoom de la ficha.

• Hasta 5000 x 5000 px o 25 megapíxeles
• Menos de 20 MB por archivo
• PNG, JPEG, WebP, HEIC, GIF, TIFF, BMP y SVG
• Cuadradas: 2048 x 2048 px como referencia

Qué formato usar al subir

Para fotografía, sube JPEG de buena calidad. Para imágenes con transparencia o gráficos con colores planos, PNG. No hace falta que conviertas tú las fotos a WebP o AVIF: según la documentación de Shopify para desarrolladores, su CDN detecta qué formatos admite cada navegador y elige el más adecuado al servir la imagen.

Lo que sí conviene hacer antes de subir es recortar márgenes innecesarios, corregir el color y exportar con un perfil sRGB. Las fotos con perfiles de color raros pueden verse apagadas o con tonos distintos según el dispositivo, y eso genera devoluciones por diferencias de color.

Proporción y coherencia del catálogo

Elige una proporción y úsala en todo el catálogo: cuadrada (1:1) o vertical (4:5 o 3:4, habitual en moda). Si cada producto tiene una proporción distinta, la rejilla de colección se descuadra y la tienda parece descuidada. La mayoría de temas permiten fijar la proporción de las tarjetas, pero recortar automáticamente puede cortar partes del producto.

Mantén también el mismo fondo, encuadre y margen en las fotos principales. La primera foto debe mostrar el producto completo sobre fondo neutro; las siguientes, detalles, uso real, escala (el producto en la mano o puesto) y, si aplica, el embalaje. La segunda imagen es la que muchos temas enseñan al pasar el ratón por la tarjeta, así que elígela con intención.

Cómo las sirve el tema

El rendimiento depende sobre todo del tema. En Liquid, el filtro image_url permite pedir cada imagen al ancho necesario (hasta 5760 píxeles, sin ampliar nunca el original) y el filtro image_tag genera por defecto un srcset con varias medidas, añade ancho y alto para evitar saltos de diseño y aplica carga diferida a las imágenes más abajo en la página.

Lo que suele fallar en temas antiguos o muy modificados es que cargan la misma foto grande en móvil y en escritorio, no indican el atributo sizes o aplican carga diferida también a la primera imagen de la ficha, que es la que cuenta para el LCP. Corregir esto suele mejorar las Core Web Vitals más que cualquier app de compresión.

Texto alternativo y nombres de archivo

Cada imagen de producto admite texto alternativo desde el admin. Shopify admite hasta 512 caracteres, aunque recomienda quedarse en 125 o menos. Describe lo que se ve con naturalidad (por ejemplo, «Zapatilla de trail verde, vista lateral») en lugar de repetir el nombre del producto en todas las fotos.

El alt text sirve a quien usa lector de pantalla y ayuda a Google Imágenes a entender la foto. El nombre de archivo también cuenta algo: sube las imágenes con nombres descriptivos en lugar de «IMG_4382.jpg». Si tienes muchas fotos sin alt, el admin puede sugerir textos automáticamente, pero revísalos antes de aceptarlos.

Vídeo y modelos 3D

Shopify acepta vídeos de hasta 10 minutos, 1 GB y resolución 4K en formatos MP4, MOV o WebM, además de enlaces de YouTube o Vimeo. Para la ficha suele funcionar mejor un vídeo corto y sin sonido que muestre el producto en uso que un vídeo largo de marca.

Los modelos 3D se suben en GLB o USDZ, hasta 500 MB, y Shopify optimiza automáticamente los de más de 15 MB. Tienen sentido en productos donde el volumen o los detalles son difíciles de enseñar en foto, como muebles o calzado. Ten en cuenta que vídeo y 3D añaden peso: cárgalos solo cuando el usuario los pide.

Errores habituales

Fotos de proveedor con fondos distintos, proporciones mezcladas en la misma colección, imágenes de 6 u 8 MB sin necesidad, texto incrustado en la foto (que no se traduce ni se lee en móvil), primera imagen con carga diferida y ningún texto alternativo. Son problemas pequeños por separado que juntos hacen que una tienda parezca lenta y poco fiable.

Si tu catálogo es grande, define una guía de fotografía antes de la próxima sesión: proporción, fondo, número y orden de fotos por producto, y nombre de archivo. Ahorra mucho trabajo de corrección después.

Otro punto que se olvida es asociar cada foto a su variante. Shopify permite asignar una imagen a cada variante, de forma que al elegir un color la galería muestra el producto en ese color. Si las variantes no tienen imagen asignada, el cliente elige verde y sigue viendo el modelo azul, y eso genera dudas y devoluciones. Con muchos colores, organiza la galería para que cada variante tenga al menos una foto principal propia y, si el tema lo permite, filtra la galería para mostrar solo las imágenes del color elegido.

Por último, revisa de vez en cuando la biblioteca de archivos del admin. Las imágenes que ya no usa ningún producto no afectan a la velocidad de la tienda, pero dificultan encontrar lo que buscas y confunden al equipo cuando reutiliza fotos.