Cómo optimizar las imágenes de producto en Shopify y otras tiendas online

Una imagen de blog acompaña al texto. Una imagen de producto es el principal motivo por el que alguien compra. Eso eleva lo que está en juego de tres maneras:

• El detalle importa. Los clientes amplían la imagen para ver la textura, las costuras o las etiquetas, así que las imágenes deben aguantar bien a tamaño grande.
• La coherencia importa. Una página de colección con formas, iluminación y fondos mezclados transmite poca confianza.
• La velocidad importa. Las páginas de colección cargan decenas de imágenes a la vez, así que unos cientos de kilobytes de más por imagen se acumulan enseguida, sobre todo en el móvil.

El objetivo es conservar el detalle suficiente para comprar con confianza y enviar a cada comprador solo los píxeles que necesita.

Las plataformas de tiendas alojadas, como Shopify, guardan la imagen que subes, crean varias versiones redimensionadas y las entregan desde una red de distribución de contenidos, a menudo convirtiéndolas a formatos modernos como WebP para los navegadores que lo admiten. Es cómodo, y cambia la forma en que debes preparar los archivos.

• Ventaja: puedes subir un buen JPG o PNG y confiar en que la plataforma lo redimensione y lo sirva de forma eficiente.
• Inconveniente: como la plataforma vuelve a procesar tu archivo, lo que hagas antes es solo el primer paso, y cada guardado con pérdida adicional cuesta calidad.

Consulta las páginas de ayuda actuales de tu plataforma para ver las dimensiones recomendadas y los límites de archivo, porque cambian con el tiempo.

Es la pregunta que más propietarios de tiendas responden mal. Estos son los dos enfoques lado a lado.

En una tienda alojada, redimensiona a la dimensión objetivo y guarda con una calidad alta, en torno a 85, y luego sube. Redimensionar y comprimir hace las dos cosas en un solo paso, de modo que la imagen se guarda una vez. En una tienda autoalojada sin procesamiento automático, comprime con más firmeza con Comprimir imagen y mantén la imagen principal cómodamente ligera.

• JPG: una buena opción por defecto para fotos sobre fondos lisos. Pequeño y universal. La página de ayuda de Shopify cita PNG como el mejor tipo de archivo para la mayoría de las imágenes de producto, seguido de JPEG, pero un JPG de alta calidad es mucho más ligero para fotografías.
• PNG: útil para recortes con fondo transparente, pero grande en fotos.
• WebP: más pequeño que los dos, y admite transparencia. Muchas plataformas convierten a este formato por ti, así que quizá no necesites subirlo tú.

Si tienes dudas, consulta la guía comparativa de formatos. Recuerda que el JPG vuelve blancas las zonas transparentes, así que comprueba cómo queda un recorte sobre el fondo de tu tienda.

• Comprimir en exceso antes de subir y dejar que la plataforma vuelva a comprimir.
• Mezclar formas y fondos, lo que hace que las cuadrículas de colección se vean desordenadas.
• Subir archivos enormes, como originales de 6000 píxeles, que ralentizan el trabajo en el panel y no aportan nada visible.
• Omitir el texto alternativo, lo que perjudica la accesibilidad y la posibilidad de posicionar en la búsqueda de imágenes. La guía de SEO de imágenes explica qué escribir.
• No probar nunca en el móvil, que es donde está la mayoría de los compradores.

Prueba tu página de colección principal y algunas páginas de producto con PageSpeed Insights y compara los resultados antes y después. Fíjate en la imagen más grande de cada página y en el peso total de las imágenes. Si una página sigue siendo pesada, reduce primero las dimensiones en píxeles de lo que subes, porque una imagen más pequeña ayuda más que un ajuste de calidad más bajo. La lista de comprobación para optimizar imágenes web trata otros pasos, como la carga diferida y la caché.