La regla de oro para producto: 2048×2048 (1:1) y peso ligero
Resumen ejecutivo: si tuviera que elegir una única combinación para el 90% de catálogos, sería 2048×2048 px (1:1), manteniendo el peso por debajo de ~500 KB cuando sea viable. ¿Por qué?
- Zoom limpio y nitidez consistente. Con 2048 px en el lado mayor, el zoom del producto se ve nítido en la mayoría de temas sin pixelarse. En Admarking nos ha pasado mil veces: cuando migramos catálogos, estandarizamos a 2048×2048 y desaparecen los “dientes de sierra” al ampliar.
- Consistencia visual y CRO. Las miniaturas cuadradas evitan saltos de layout y cortes raros en grid, mejoran el foco en el producto y estabilizan el scroll. El resultado: páginas más ordenadas que convierten mejor.
- Rendimiento realista. La altura de imagen ayuda, pero el peso manda. En nuestro día a día, priorizamos imágenes que carguen por debajo de 500 KB sin sacrificar nitidez; rendimiento primero. Con compresión inteligente (WebP/JPEG de alta) solemos quedarnos entre 120–350 KB por foto de producto.
Buenas prácticas inmediatas
- Relación 1:1 por defecto (cuadrado). Si tu vertical exige otra relación (moda a cuerpo completo 4:5, muebles 3:4), úsala en todo el catálogo.
- Compresión con previsualización. Exporta al 1000–1200 kB y reduce hasta que notes pérdida visible; da un paso atrás y quédate ahí.
- Formatos: WebP (preferente) y JPEG como fallback; PNG solo para fondos transparentes, iconos o detalles con bordes muy duros.
- Texto alternativo (alt): descriptivo y útil para búsqueda (modelo, color, material). Evita keyword stuffing.
- Entrega: deja que la CDN de Shopify haga su magia (caché, redimensionado automático). No subas “sobredimensionado” a lo loco pensando que “más es mejor”.
Nota de campo Admarking: nuestro checklist técnico incluye alt text, formatos modernos (WebP) y lazy loading para mejorar el LCP de la ficha. Cuando combinamos esto con fotos uniformes, el salto en estabilidad visual se nota.
Otras imágenes de la tienda: colecciones, banner y blog
No todo es la ficha. Para el resto, el criterio es equilibrio entre claridad, peso y layout del tema.
Colecciones
- Tamaño recomendado: 1200×1200 o 1600×1600 (1:1) según tu grid.
- Objetivo de peso: 100–250 KB.
- Consejo: si tu catálogo mezcla verticales (moda, accesorios, hogar), alinea relación y márgenes para que el mosaico no “salte”. Nosotros solemos definir una guía visual de recorte al inicio del proyecto.
Hero / sliders (portada o landings)
- Rango útil: 1600–2500 px de ancho × 700–1000 px de alto (orientación 16:9 / 21:9).
- Objetivo de peso: 200–450 KB (evita >900 KB salvo casos puntuales con tipografía grande o texturas sutiles).
- Consejo: exporta dos versiones del hero (desktop y móvil) y usa art direction (recortes distintos) si el copy tapa el sujeto.
Blog e imágenes de contenido
- Anchos comunes: 1200–1600 px (según ancho de columna del tema).
- Objetivo de peso: 80–200 KB.
- Consejo: estandariza el ratio (16:9 o 4:3) para miniaturas de blog; eso limpia el listado y mejora el CTR.
En Admarking no usamos plantillas rígidas, pero sí un marco: colecciones y blog con ratios homogéneos; heroes con dos recortes (desktop/móvil) y copy legible sin sacrificar la foto.
Formatos y SEO técnico que sí mueven la aguja
Para imagen, menos fricción = más ventas. La parte técnica es la autopista.
Formatos recomendados
- WebP para fotos (mejor relación calidad/peso). JPEG como fallback.
- PNG solo cuando necesites transparencia verdadera o detalles vectoriales nítidos.
- SVG para logotipos e iconos escalables (cuando aplique).
Entrega responsive (simplificada)
- Sube tu máster a 2048 (producto) y deja que Shopify genere variantes. Añade
srcset/sizesdonde el tema lo permita para servir la menor imagen efectiva en cada viewport.
Accesibilidad y metadatos
- alt descriptivo (material, color, ángulo, contexto de uso).
- Nombra archivos con lógica:
sku-nombre-color-vista-01.webp.
Rendimiento
- Lazy loading por defecto en galerías.
- Controla LCP (hero o primera foto de galería): esa debe ir ultraligera y servirse rápido.
- Evita GIFs pesados; si necesitas movimiento, considera video corto o APNG moderado.
Cuando optimizamos catálogos grandes, medimos antes y después: reducción de LCP/TBT y mejora de CTR en grid. No es teoría: lo vemos semana a semana.
Errores comunes y soluciones rápidas en Shopify
1) Imágenes borrosas en el zoom.
- Causa: subir a 1000–1200 px y pretender zoom 2×.
- Solución: vuelve al máster 2048 px, reexporta con compresión inteligente.
2) Galerías inconsistentes (saltos de layout).
- Causa: mezclar ratios 1:1, 4:5 y 3:4.
- Solución: define un ratio único por vertical y reencuadra. En moda nos funciona 4:5; en joyería, 1:1 con primeros planos.
3) Peso descontrolado en la home.
- Causa: héroes a >1 MB y sliders con 4–6 imágenes.
- Solución: limita a 1–2 slides clave, 200–450 KB por slide, y recorta móvil aparte.
4) PNGs innecesarios.
- Causa: exportar todo a PNG “por si acaso”.
- Solución: usa WebP/JPEG para fotos; reserva PNG para transparencia real.
5) Alt genéricos (“imagen1”).
- Solución: añade modelo + color + detalle. Ej.: “Zapatilla runner negra, suela EVA, vista lateral”.
En proyectos de Admarking, dedicamos una mañana a normalizar ratios y nombres. Solo con eso, el grid respira y el usuario encuentra más rápido lo que busca.
Plantilla de estandarización para tu catálogo
Usa esta matriz como punto de partida y ajústala a tu vertical y tema.
| Tipo de imagen | Dimensiones sugeridas | Relación | Peso objetivo | Formato recomendado |
|---|---|---|---|---|
| Producto (galería) | 2048×2048 px | 1:1 | 120–350 KB (≤500 KB) | WebP (JPEG fallback) |
| Miniatura de producto | 800×800 px | 1:1 | 40–120 KB | WebP/JPEG |
| Colecciones | 1200–1600 px lado mayor | 1:1 | 100–250 KB | WebP/JPEG |
| Hero/Slider desktop | 1600–2500 × 700–1000 px | 16:9 / 21:9 | 200–450 KB | WebP/JPEG |
| Hero/Slider móvil | 1080×1350 / 1125×1500 | 4:5 / 3:4 | 150–300 KB | WebP/JPEG |
| Blog (cuerpo) | 1200–1600 px ancho | 16:9 / 4:3 | 80–200 KB | WebP/JPEG |
| Iconos/Logos | Vector / 512–1024 px | — | 5–50 KB | SVG / PNG |
Flujo de trabajo recomendado
- Definir ratio por vertical (p. ej., moda 4:5; joyería 1:1).
- Exportar másteres a la dimensión objetivo.
- Comprimir con previsualización (WebP/JPEG de alta) hasta el límite visual aceptable.
- Subir a Shopify y verificar en desktop + móvil.
- Medir LCP/TBT y hacer un pase de mejora.
En nuestro equipo, documentamos todo en una hoja de control por SKU: ratio, lote, peso y fecha de subida. Cuando el catálogo crece, esa disciplina paga dividendos.
Conclusión
Si quieres fichas limpias que carguen rápido y vendan, estandariza: 2048×2048 px, 1:1, WebP cuando sea posible y peso contenido. Ajusta el resto de imágenes a tu tema y mide su impacto en LCP y estabilidad del layout. En Admarking nos obsesiona ese equilibrio entre estética y rendimiento porque es justo ahí donde el SEO y la conversión se dan la mano.
FAQs
¿Cuál es el tamaño ideal para imágenes de producto en Shopify?
Para la mayoría de tiendas: 2048×2048 px (1:1). Asegura un zoom nítido y consistencia en la galería.
¿Hay un límite máximo de subida?
Sí, Shopify permite archivos grandes, pero no conviene acercarse al límite. Prima el rendimiento: intenta quedar por debajo de 500 KB por foto de producto siempre que sea posible.
¿Qué formato es mejor, JPEG o WebP?
WebP suele ganar en calidad/peso. Mantén JPEG como respaldo y PNG solo para transparencias.
Mis fotos se ven borrosas, ¿qué hago?
Reexporta a 2048 px, usa una compresión de calidad alta (90–95), revisa el recorte y prueba el zoom. Si sigues viendo artefactos, sube un 10% la calidad o ajusta el enfoque (sharpen) en la exportación.
¿Cómo evito que el grid “salte”?
Fija una relación de aspecto única por vertical, alinea márgenes y no mezcles 1:1 con 4:5/3:4 dentro del mismo carrusel.
¿Quieres que dejemos tu catálogo listo para SEO y conversión? En Admarking trabajamos con metodología propia y planes a medida. Hablemos de tu caso y te proponemos un plan claro y medible.
