Tamaños de imagen óptimos para Shopify

Utiliza 2048 por 2048 píxeles como tu archivo maestro de Shopify y mantén cada archivo entregado por debajo de 500 KB. Shopify permite imágenes de hasta 20 MB y 4472 píxeles cuadrados, pero esos números describen lo que la plataforma tolera en lugar de lo que una tienda rápida necesita.

La cifra de 20 MB es el número que citan la mayoría de las guías, y es el equivocado para diseñar. Lo que Shopify permite y lo que Shopify premia son cosas diferentes. Una página de producto que contiene 8 imágenes de 3 MB cada una es una página de 24 MB, y los compradores móviles se van antes de que termine de cargarse.

Tamaños de imagen de Shopify por ubicación

Las imágenes de producto deben ser cuadradas a 2048 píxeles, mientras que los banners, las cuadrículas de colección y los logotipos necesitan sus propias dimensiones. Usar un solo tamaño en todas partes produce banners estirados e imágenes de colección recortadas.

Los temas recortan las imágenes de manera diferente, y un banner que se ve correcto en la vista previa de escritorio con frecuencia se corta por la mitad en un teléfono. Mantén la parte importante de un banner en el 60 por ciento central para que ningún tema pueda recortarla.

Por qué 500 KB es el número que importa

El peso de la página decide qué tan rápido se carga una tienda, y las imágenes representan la mayor parte de ese peso en una página de producto típica. Una página de menos de 2 MB en total se carga cómodamente con datos móviles, mientras que una página de 24 MB no lo hace.

Los compradores en teléfonos representan la mayoría del tráfico para la mayoría de las tiendas, y las conexiones móviles varían mucho más que la banda ancha de la oficina. Cada segundo de tiempo de carga cuesta conversiones, lo que hace que el peso de la imagen sea una cuestión de ingresos en lugar de una técnica. Reducir 8 imágenes de producto de 3 MB a 300 KB elimina 21 MB de la página y no cambia nada de lo que un comprador puede ver.

¿Comprime Shopify las imágenes por ti?

Shopify sirve variantes redimensionadas a través de su red de entrega de contenido (CDN) y las convierte a WebP automáticamente para los navegadores compatibles. La plataforma hace un trabajo razonable y funciona a partir de lo que subas.

Ese último punto es la limitación. Shopify genera variantes más pequeñas a partir de tu original, por lo que una subida de 5 MB mal comprimida produce variantes más grandes de lo que lo haría una subida de 400 KB bien preparada. Comprimir antes de subir también reduce tu propio uso de almacenamiento y hace que las importaciones masivas sean mucho más rápidas, ya que una importación de 500 productos mueve 200 MB en lugar de 2.5 GB.

Cómo preparar imágenes para Shopify

Para producir una página de producto rápida, sigue estos 6 pasos.

1. Exporta un archivo maestro cuadrado a 2048 por 2048 píxeles desde tu editor de fotos.
2. Redimensiona cualquier banner o imagen de estilo de vida a su ancho de visualización real, duplicado para pantallas de alta densidad.
3. Convierte las fotografías a WebP, o mantén JPG si tu flujo de trabajo depende de ello, ya que Shopify las convierte de cualquier manera.
4. Comprime a un tamaño objetivo, usando 300 KB para fotografías de productos y 400 KB para banners.
5. Nombra los archivos por código de producto y vista para que una importación masiva de CSV asocie las imágenes con los productos correctos.
6. Sube y comprueba la página del producto en un teléfono en lugar de hacerlo solo en una vista previa de escritorio.

WebP en Shopify

Shopify ha servido WebP de forma nativa durante años y convierte los archivos JPG y PNG subidos automáticamente para los navegadores que lo admiten. Subir WebP directamente está aceptado y te da control sobre la compresión en lugar de dejarlo en manos de la plataforma.

WebP alcanza la misma calidad visual que JPG con tamaños de archivo de un 25 a un 35 por ciento más pequeños, lo que vale la pena tener en una página que contiene 8 fotografías. El único caso que se debe evitar es subir WebP cuando el archivo vaya a ser descargado posteriormente por un proveedor o enviado a una imprenta, ya que esos destinos todavía esperan JPG.

Cómo solucionar una página de producto lenta

Comienza con la imagen más grande de la página, porque el archivo individual más grande suele ser el responsable de la mayor parte del retraso. En una tienda Shopify, normalmente es el banner de la página de inicio o la primera fotografía del producto.

• Redimensiona antes de comprimir. Un banner de 4000 píxeles en un espacio de 1920 píxeles desperdicia el 75 por ciento de sus datos.
• Reduce el número de imágenes por encima del pliegue. Una galería de 12 imágenes que se cargan a la vez retrasa todo lo demás.
• Comprueba que la carga diferida esté activada para las imágenes por debajo del pliegue, algo que la mayoría de los temas modernos manejan por defecto.
• Reemplaza los archivos GIF animados por vídeo, ya que un GIF corto con frecuencia pesa más que todo el resto de la página junto.
• Audita las aplicaciones. Los widgets de reseñas, las ventanas emergentes y los sellos de confianza a menudo cargan sus propias imágenes y scripts.

Texto alternativo y nombres de archivos de imagen

Escribe texto alternativo que describa el producto para los compradores que usan lectores de pantalla, y nombra los archivos según el producto en lugar de la cámara. Un archivo llamado IMG_4821.jpg no dice nada a los motores de búsqueda ni a los compradores.

Utiliza un patrón como camisa-lino-azul-marino-frente.jpg, que sigue siendo legible en una importación masiva, se ordena de forma predecible en una carpeta y describe la imagen en los resultados de búsqueda. El texto alternativo debe decir lo que muestra la fotografía, incluyendo el color, el material y la vista, sin repetir el título del producto palabra por palabra. Ambos campos toman segundos por producto y mejoran la forma en que aparece una tienda en la búsqueda de imágenes.

Probar los cambios antes de implementarlos

Procesa primero 5 productos, publícalos y comprueba las páginas en un teléfono real antes de ejecutar todo el catálogo. Un error de configuración aplicado a 500 productos cuesta mucho más tiempo de deshacer que de prevenir.

Comprueba 3 cosas en los productos de prueba. Confirma que las imágenes se vean nítidas con el zoom al máximo, ya que los compradores usan mucho el zoom en ropa y joyería. Confirma que la cuadrícula de la colección muestre recortes consistentes. Confirma que la página se cargue rápidamente con datos móviles en lugar de con la banda ancha de la oficina. Solo entonces aplica la misma configuración a todo lo demás.

Aplicaciones de imagen frente a hacerlo antes de subir

Las aplicaciones de compresión cobran mensualmente por resolver un problema que puedes resolver una vez antes de subir las imágenes. Las aplicaciones son útiles cuando una tienda recibe constantemente nuevas imágenes de muchas personas y nadie controla lo que se sube.

Una tienda con un catálogo estable y una sola persona que gestiona las imágenes no necesita una tarifa recurrente. Comprimir la biblioteca una vez y comprimir las nuevas fotografías a medida que llegan logra el mismo resultado. Reconsidera esto cuando el catálogo crezca más allá de lo que puedes procesar a mano, o cuando varios empleados suban imágenes sin seguir una especificación.

Errores comunes de imagen en Shopify

Subir directamente desde la cámara es el error más costoso, porque una fotografía de 24 megapíxeles contiene 10 veces los datos que una tienda puede mostrar. La plataforma acepta el archivo y la página paga las consecuencias.

Otros dos errores aparecen regularmente. Mezclar formas de imagen en una colección produce una cuadrícula irregular, ya que los temas recortan a cuadrado y una fotografía vertical pierde su parte superior e inferior. Usar PNG para fotografías de productos infla el tamaño de los archivos de 3 a 5 veces sin ningún beneficio visible, porque PNG almacena cada píxel exactamente y una fotografía no tiene áreas planas que aprovechar.

Mantener un catálogo consistente

Procesa todo el catálogo en un solo lote para que cada fotografía de producto comparta las mismas dimensiones, compresión y encuadre. Los compradores que comparan productos notan la inconsistencia incluso cuando no pueden identificarla.

La consistencia también ayuda a la cuadrícula de la colección, donde las imágenes con formas y brillos coincidentes se leen como una página diseñada en lugar de una ensamblada. Establece las dimensiones y el tamaño objetivo una vez, luego aplícalos a cada archivo en lugar de ajustar cada producto individualmente.

Procesar un catálogo en una sola pasada

Arrastra hasta 500 imágenes a la vez, o arrastra un archivo ZIP directamente de tu fotógrafo, y cada archivo se devolverá redimensionado y comprimido con la misma especificación. Un catálogo que tomaba una tarde en un software de escritorio se termina en unos pocos minutos.

Todo se ejecuta dentro de tu navegador en tu propio procesador, por lo que los productos no lanzados, las tomas de campañas de temporada y la fotografía de proveedores nunca llegan a un servidor. Para una tienda que prepara un lanzamiento bajo embargo, mantener los archivos locales es la diferencia entre un anuncio controlado y una filtración, y no cuesta nada extra.