GeNova Beauty & Equipment
Guía de Imágenes de Producto
Formato, proporción y encuadre que deben tener las fotos del catálogo para verse consistentes y premium en toda la web (tarjetas, modal de producto, comparador y checkout).
Formato recomendado
| Atributo | Valor ideal |
|---|---|
| Formato | PNG con fondo transparente |
| Proporción | Cuadrada 1:1 |
| Resolución | 1000×1000 px (mín. 800×800, máx. 1200×1200) |
| Peso | ≤ 300 KB por imagen |
| Fondo | Totalmente transparente (PNG) |
| Producto | Centrado, ocupa el 70–80% del frame |
| Encuadre | Sin recortes del producto; márgenes uniformes |
| Iluminación | Suave, sin sombras duras proyectadas |
| Color | Perfil sRGB (evita variaciones de tono) |
Por qué PNG transparente
Las tarjetas del catálogo usan fondo oscuro (#1A1918). Un PNG transparente hace que el producto "flote" limpio sobre la tarjeta, sin recuadros blancos antiestéticos. Es el formato que ya usan 10 de 13 productos.
Si solo tienes la foto en JPG (con fondo), recórtala con fondo #1A1918 antes de subirla para que se integre con la tarjeta.
Ejemplo visual de encuadre
┌────────────────────────────┐
│ │
│ ┌──────────────┐ │ ← margen superior (~10%)
│ │ │ │
│ │ PRODUCTO │ │ ← centrado, 70–80% del frame
│ │ (frasco / │ │
│ │ equipo) │ │
│ │ │ │
│ └──────────────┘ │
│ │ ← margen inferior (~10%)
└────────────────────────────┘
1000 × 1000 pxProductos que conviene migrar a PNG transparente
Actualmente son JPG con fondo y se verían mejor migrados:
- Facial Scrub w/ Mandarin (3.5 oz)
- Marine Therapy Restorative (5 oz)
- Cavitación 5 en 1 (verificar)
Cómo el sitio muestra cualquier formato
El contenedor de imagen usa:
- aspect-square → proporción cuadrada consistente
- bg-card (#1A1918) → fondo neutro que combina con la tarjeta
- object-contain → la foto nunca se recorta
- padding interno → respiración para que el producto no toque los bordes
Incluso un JPG con fondo se ve aceptable, pero el PNG transparente sigue siendo el óptimo para la estética editorial nude/negro.