Cómo optimizar las imágenes de productos para tu tienda online

Comienza con la información del producto que los compradores necesitan

Una imagen de producto tiene una función que va más allá de llenar un rectángulo. Debe ayudar al comprador a juzgar la forma, el acabado, el color y las características del producto. Una exportación que elimina las costuras, dificulta la lectura de las letras o altera la apariencia de una superficie está demasiado comprimida, incluso si su tamaño de archivo parece impresionante.

Elige un pequeño conjunto de vistas útiles antes de editar. Una fotografía principal nítida, otro ángulo y un primer plano de una característica importante suelen responder más preguntas que varias imágenes casi idénticas. Añade una vista de estilo de vida o una referencia de escala cuando ayude a explicar el producto. No hay un número obligatorio: una taza sencilla y una chaqueta técnica necesitan información diferente.

Guarda tus fotografías originales en una carpeta aparte. Prepara copias para su publicación con nombres que identifiquen el producto y la vista. Si la imagen original está desenfocada, mal iluminada o demasiado pequeña, la compresión no la corregirá. Reemplaza la fotografía deficiente antes de dedicar tiempo a la configuración de exportación.

Mantén la coherencia en los recortes y fondos

Abre una página de la colección y observa varios productos juntos. Diferentes cantidades de espacio vacío pueden hacer que productos similares parezcan inconexos o notablemente diferentes en tamaño. Elige una relación de aspecto que se ajuste a tu tema y mantén la posición del sujeto y el espacio circundante razonablemente consistentes en las imágenes principales.

Un recorte cuadrado puede funcionar bien para una cuadrícula de productos cuadrada, pero no es una regla universal. Una prenda alta o un equipo largo pueden requerir una presentación diferente. Revisa el objeto completo, incluyendo asas y accesorios, antes de aceptar un recorte. No estires una fotografía para que se ajuste a una plantilla.

Para preparar una serie, utiliza el optimizador de imágenes de producto de Pixilo. Elige unas dimensiones de lienzo, unos márgenes mínimos y un fondo comunes; después recorta y coloca cada foto por separado. Revisa el conjunto en Todas las imágenes antes de descargarlo. Usa Ampliar para comprobar los detalles y el efecto del ajuste de calidad.

El margen mínimo se mide desde los bordes de la imagen recortada, no desde un producto detectado automáticamente. Los espacios vacíos y los fondos opacos del original permanecen, salvo que los elimines al recortar. Por tanto, un lienzo común no hace que todos los productos se vean del mismo tamaño. Revisa también la cuadrícula publicada: el tema de la tienda puede aplicar otro recorte.

Un fondo blanco o neutro puede dar coherencia a un catálogo, mientras que la transparencia puede ser adecuada para un diseño que coloca los productos sobre diferentes fondos. Si un PNG o WebP ya tiene áreas transparentes, la herramienta de color de fondo puede rellenarlas con el color elegido y crear un JPG. No elimina el fondo existente de una fotografía normal.

Comprueba los bordes transparentes sobre superficies claras y oscuras. Un contorno pálido que desaparece sobre blanco puede hacerse evidente en una página oscura. Si ese contorno ya forma parte de la imagen original, cambiar el formato del archivo no lo eliminará. Consulta la guía sobre fondos inesperados en imágenes transparentes para diagnosticar la diferencia.

Elige las dimensiones para la cuadrícula, la página del producto y el zoom

Mida el ancho real de la imagen en tu diseño. Una ficha de colección puede ocupar 360 píxeles CSS, mientras que la imagen principal del producto puede ocupar 800. Estas son anchuras de visualización, no requisitos automáticos para el archivo subido.

Un píxel CSS mide el tamaño visible en el diseño de la página. En una pantalla de alta densidad puede usar varios píxeles físicos. Por eso una imagen nítida puede necesitar más píxeles que su ancho mostrado.

Para una pantalla de alta densidad, una versión con aproximadamente el doble del ancho mostrado es una buena opción para realizar pruebas. Por lo tanto, una tarjeta de 360 píxeles podría usar una exportación de 720 píxeles, mientras que una imagen de producto de 800 píxeles podría usar una exportación de 1600 píxeles. También conviene tener disponibles versiones más pequeñas. Estas cifras son ejemplos de planificación, no recomendaciones de la plataforma ni garantías sobre qué archivo elegirá un navegador.

Planifica por separado la vista ampliada. Si los clientes necesitan examinar la trama de una tela, una pieza de unión o un grabado, conserva una imagen original con suficiente detalle o proporciona un primer plano por separado. Una versión pequeña para la cuadrícula de productos no debería ser el único archivo disponible para el visor de zoom. Del mismo modo, la cuadrícula no debería obligar a cada visitante a descargar una imagen de zoom de resolución completa.

Tu plataforma puede generar estas variantes automáticamente. Si controlas la publicación de los archivos, utiliza imágenes adaptables para que el navegador pueda solicitar una versión adecuada. La guía de imágenes adaptables explica cómo se relacionan las dimensiones, srcset y sizes. Reducir visualmente una imagen grande con CSS no reduce el tamaño del archivo que se descarga.

Un ejemplo real: recortar una foto para una tarjeta de producto cuadrada

Esta fotografía mide 1920 × 1076 píxeles. El tarro ocupa una pequeña parte de la composición horizontal. Para una tarjeta cuadrada, podemos acercarlo con un recorte, sin deformarlo ni eliminar el fondo de la fotografía.

1. Elige el recorte. En el optimizador de imágenes de productos, mantén toda la tapa y la base del tarro dentro de un recorte de 630 × 630 píxeles. El pedestal puede quedar cortado; el producto debe verse completo.
2. Define la salida. Utiliza un lienzo de 600 × 600 píxeles y un margen del 0 %. Deja desactivada la ampliación: el recorte es algo mayor que la salida, por lo que se puede reducir sin añadir píxeles.
3. Exporta y revisa. Descargamos un JPG con calidad 90 que pesa 16,4 kB. Comprueba el borde de la tapa, la sombra tenue y la superficie blanca uniforme antes de darlo por bueno.

El cuadrado de 600 píxeles es un ejemplo para una tarjeta, no una recomendación general de tamaño de subida. Una galería grande o un zoom puede necesitar más píxeles. El archivo más pequeño es fruto del recorte, el cambio de tamaño y la exportación JPG juntos; no mide solo la compresión. El fondo original y parte del pedestal se conservan.

Elige un formato adecuado para tu imagen y tu sistema de publicación

Separa el formato que subes del formato que reciben los visitantes. Tu tienda puede aceptar imágenes originales en formato JPG o PNG y entregarlas automáticamente en formato WebP o AVIF. En ese caso, preparar varias cargas en formatos modernos manualmente podría añadir trabajo sin mejorar el resultado.

• JPG: Un punto de partida práctico para fotografías con fondo opaco, especialmente cuando tu plataforma u otro destino requiere JPEG. Revisa las letras pequeñas y las texturas finas después de la compresión.
• PNG: Útil cuando necesitas transparencia o quieres conservar elementos gráficos nítidos sin una exportación con pérdida. Un PNG fotográfico grande puede ser mucho más pesado que una alternativa adecuada.
• WebP: Vale la pena compararlo para fotos y gráficos de productos transparentes cuando tu configuración de publicación lo admita. El formato admite diferentes modos de compresión, pero los convertidores PNG/JPG a WebP de Pixilo usan una configuración de calidad en lugar de un modo sin pérdida dedicado.
• AVIF: Otra opción cuando tu flujo de trabajo de publicación completo lo admita. Prueba la imagen exportada y la página publicada; un archivo más pequeño por sí solo no garantiza que la imagen se vea bien.

Consulta la guía de formatos de imagen para sitios web para una comparación más amplia. Antes de reemplazar todo el catálogo, prueba con una fotografía común y una imagen compleja, como un patrón fino o un recorte transparente. Confirma que las cargas, las miniaturas, las galerías y el zoom funcionan correctamente.

Establece un tamaño de archivo objetivo adecuado sin sacrificar el detalle

No existe un tamaño de archivo único y correcto para todas las fotografías de productos. Un objeto simple sobre un fondo liso y una prenda tejida con detalles pueden requerir configuraciones diferentes con las mismas dimensiones. Una página de colección con muchas imágenes también tiene requisitos de carga diferentes a los de una galería que muestra una sola imagen grande.

Para una imagen que se vaya a mostrar directamente, se puede probar con un tamaño de 200 KB como presupuesto inicial y luego decidir si es utilizable. Esto es solo un ejemplo, no un requisito. Si las etiquetas o los detalles del material se vuelven poco claros, prueba con una configuración menos agresiva, un formato más eficiente o un tamaño de visualización diferente. No reduzcas la calidad continuamente solo para cumplir con un número arbitrario.

Compara al tamaño que los compradores verán normalmente y luego inspecciona las áreas importantes a tamaño completo o en el visor con zoom. Busca bordes deteriorados en las letras, bloques en sombras, textura borrosa y transiciones irregulares en fondos lisos. La mejor opción es la versión más pequeña aceptable para esa ubicación, en lugar de la exportación más pequeña que tu herramienta pueda producir.

Para probar únicamente la compresión, volvimos al original sin recortar y exportamos un JPG con calidad 20, conservando los 1920 × 1076 píxeles. El resultado pesa 28,0 kB, aproximadamente un 62 % menos que el original. Usa el divisor y Examinar detalle para comparar el borde de la tapa, la pared y la sombra suave. La calidad 20 es un ajuste deliberadamente bajo para esta prueba, no una configuración recomendada. Revisa también la imagen a su tamaño real de visualización.

JPG originalJPG · Calidad 20

Si el formulario impone un límite real de tamaño, usa la herramienta para comprimir a un tamaño objetivo. Mantén las dimensiones sin cambios inicialmente y permite el redimensionamiento proporcional solo si es apropiado para la función de la imagen. Un límite estricto puede obligar a hacer concesiones visibles; a veces, un nuevo recorte o una fotografía de detalle por separado es más útil que una mayor compresión.

Evita exportar repetidamente desde la última copia comprimida. Regresa al original al probar otra configuración de calidad. Los valores de calidad no son intercambiables entre formatos o codificadores, por lo que un JPG a 80 y un AVIF a 80 no tendrán automáticamente la misma apariencia.

Comprueba qué gestiona Shopify, WordPress o tu tienda

La documentación de Shopify sobre la carga de imágenes describe la optimización automática de la tienda y recomienda originales de buena calidad en lugar de una precompresión manual obligatoria. El formato que recibe el visitante puede ser distinto del que subes. Revisa los requisitos de los archivos de producto y de tu tema. Un objetivo pequeño para el archivo que se entrega no debe convertirse en una regla para todos los originales.

Para una tienda WordPress, revisa los tamaños de imagen que genera tu tema y cualquier plugin de optimización o servicio de imágenes en uso. Comprueba si la tarjeta de colección, la galería de productos y el zoom están recibiendo las versiones adecuadas. La guía de optimización de imágenes para WordPress explica los pasos de este proceso.

Si reemplazas una imagen, carga una página nueva y confirma que se esté mostrando la nueva versión. Las miniaturas en caché o las variantes generadas pueden hacer que una exportación antigua parezca el resultado nuevo. Agregar otro complemento de compresión antes de verificar el flujo de trabajo actual puede generar más confusión en lugar de solucionar el problema.

Pixilo prepara archivos individuales de forma local en tu navegador. No se conecta a tu tienda, no actualiza el catálogo ni configura la entrega de imágenes. Las herramientas JPG a WebP, PNG a WebP, WebP a JPG y PNG a JPG reducen proporcionalmente las imágenes cuya anchura o altura supera los 4000 píxeles. El ajustador de tamaño admite hasta 8000 píxeles por lado y 32 millones de píxeles en total. Comprueba las dimensiones del archivo descargado cuando prepares una imagen grande para el zoom.

Ayuda a los motores de búsqueda a comprender las imágenes del producto

Describe la vista con precisión. Un nombre de archivo como blue-ceramic-mug-side-view.jpg es más fácil de gestionar que IMG_4837.jpg. Para el texto alternativo, escribe una descripción útil de lo que muestra la imagen, por ejemplo: «Taza de cerámica azul con asa curva, vista de lado». Otra fotografía debería describir su propia vista en lugar de repetir el mismo texto.

Coloca la imagen cerca de la información relevante del producto y evita saturar los nombres de archivo o el texto alternativo con términos de búsqueda repetidos. La guía de SEO para imágenes de Google explica el texto descriptivo y la detección de imágenes. Estas prácticas ayudan a comunicar lo que representa la imagen; no garantizan el posicionamiento.

Revisa también la página del producto. Una imagen correcta del color o variante elegido es más útil que un archivo perfectamente optimizado que muestre el artículo incorrecto. La optimización de imágenes debe respaldar una ficha de producto precisa, no compensar la falta de información del producto.

Comprueba el resultado publicado antes de modificar todo el catálogo

• Vista de la colección: El producto es visible, los recortes son consistentes y la cuadrícula no descarga archivos innecesariamente grandes.
• Galería de productos: La imagen principal es nítida, los ángulos adicionales aportan información y se muestra la variante correcta.
• Zoom: Las etiquetas importantes, la textura y los accesorios permanecen legibles al nivel de ampliación deseado.
• Diseño para móviles: Una pantalla estrecha no recorta el sujeto ni fuerza una imagen grande, solo apta para ordenadores de sobremesa, a un espacio reducido.
• Fondos: Los bordes transparentes y los rellenos sólidos se ven correctamente con los colores reales de la página.
• Carga: Inspecciona las solicitudes de archivos en una nueva visita. Evita retrasar la visualización de la imagen principal del producto solo porque otras imágenes de la galería se carguen más tarde.
• Diseño: Mantén las proporciones correctas de las imágenes para que el texto y los botones no se desplacen al aparecer las fotografías.
• Archivos fuente: Conserva los originales y un breve registro de la configuración utilizada para la publicación.

Empieza con algunos productos representativos, incluyendo una imagen con detalles finos. Compara el antes y el después en condiciones similares. Una vez que tanto la apariencia como la entrega funcionen correctamente, aplica el proceso al resto del catálogo. Para un diagnóstico más profundo de los problemas de carga, lee: ¿Por qué las imágenes de un sitio web cargan lentamente?

Preguntas frecuentes

¿Cuál es el mejor tamaño de imagen para una tienda en línea?

Depende de los tamaños de visualización y el comportamiento del zoom del tema. Mide la cuadrícula y la galería, conserva suficientes detalles de la imagen original para la ampliación y revisa los archivos generados. No existe una dimensión cuadrada universal que se adapte a todos los productos o plataformas.

¿Deben todas las imágenes de productos pesar menos de 200 KB?

No. Puede ser un límite de prueba para algunas imágenes servidas directamente, pero no es una regla de carga universal. Una imagen original destinada al zoom puede requerir más detalles, y una plataforma de optimización automática puede funcionar mejor con una carga de alta calidad.

¿Es mejor JPG o PNG para fotografías de productos?

JPG es un buen punto de partida para fotografías comunes con fondo opaco. PNG es útil para transparencia y gráficos nítidos, pero puede resultar demasiado grande para fotos. Consulta el proceso de subida y publicación de imágenes de tu plataforma antes de elegir; el formato que reciben los compradores puede ser diferente.

¿Por qué la imagen de mi producto se ve borrosa después de subirla?

Compara la imagen original, el archivo exportado y la imagen entregada por la tienda. Las causas comunes incluyen una imagen original demasiado pequeña, compresión agresiva, una miniatura pequeña generada en una galería grande o una vista con zoom que amplía el mismo archivo pequeño. Identifica qué paso causó la borrosidad antes de cambiar la configuración.

¿Puede Pixilo eliminar el fondo de la foto de un producto?

No. El optimizador de imágenes de producto rellena el espacio añadido al lienzo y las zonas que ya son transparentes con el color elegido. No detecta productos ni elimina fondos opacos de una fotografía. La herramienta independiente de color de fondo también necesita una imagen ya recortada con transparencia para cambiar el fondo detrás del producto.