88. ¿Recomendaciones generales y preparación antes de subir las imágenes para contenido en la tienda?

1. Dimensiones recomendadas

• Imágenes de producto:
  Recomendado: 1200 × 1200 px
  Máximo aconsejable: 1500 × 1500 px (solo si se utiliza zoom)
  
  

• Miniaturas / listados:
  Entre 300 × 300 px y 600 × 600 px
  
  

• Imágenes en páginas de contenido (textos, secciones, etc.):
  Aquí es importante tener en cuenta el diseño de la web:
  
  

  • Diseño en ancho completo (full width):
    Imágenes de entre 1200 px y 1600 px de ancho
    
    

  • Diseño en ancho compacto (contenido centrado):
    Imágenes de entre 800 px y 1200 px de ancho
    
    

  En ambos casos, no es necesario usar tamaños mayores, ya que no aportan mejora visual y aumentan el peso de la página.
  
  

• Banners o cabeceras:
  Recomendado: 1200 × 400 px o 1400 × 500 px
  Solo en diseños a pantalla completa puede ser necesario mayor ancho, siempre optimizado

2. Resolución

• 72 ppp (dpi) es suficiente para web

• Valores mayores no mejoran la calidad en pantalla y aumentan innecesariamente el peso

3. Peso del archivo

• Recomendado: 100–200 KB por imagen

• Máximo aconsejable: 300 KB en imágenes grandes

4. Formato de imagen

• WebP (recomendado): mejor calidad con menor peso

• JPEG (.jpg): adecuado para fotografías

• PNG (.png): solo cuando se necesite fondo transparente

5. Exportación desde Photoshop (muy importante)

Para optimizar correctamente las imágenes antes de subirlas:

• Utilizar: Archivo > Exportar > Guardar para Web (Legacy) o Exportar como

• Ajustes recomendados:

  • Formato: JPEG o WebP

  • Calidad: entre 70% y 80%

  • Convertir a sRGB

  • Activar Optimizado

  • Ajustar previamente las dimensiones al tamaño final necesario

• Comprobar que el peso final esté dentro del rango recomendado (idealmente <200 KB)

6. Buenas prácticas adicionales

• Evitar subir imágenes originales de cámara (demasiado pesadas)

• Mantener proporciones uniformes (especialmente en productos)

• Nombrar archivos de forma descriptiva (ej: producto-color.jpg)

• Implementar carga diferida (lazy loading) para mejorar el rendimiento

Se recomienda consultar las páginas de el capítulo de este manual llamado C. Imágenes subidas desde el gestor

Siguiendo estas recomendaciones, se consigue un buen equilibrio entre calidad visual y velocidad de carga, lo que mejora la experiencia de usuario y el rendimiento general de la tienda.