# 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.