Skip to main content

88. ¿En qué tamaño, resolución y tipo de archivo es recomendable subir las imágenes para la venta de los productos?


Para asegurar una buena calidad visual en la tienda online sin afectar negativamente a la velocidad de carga, te comparto una serie de recomendaciones sobre el tamaño, formato y exportación de las imágenes:

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 consulta el capítulo de este manual llamado

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.

 

Back to top