Conclusiones clave
- Trata el recurso original del producto como fuente de referencia y genera variantes para cada canal a partir de una política explícita.
- Separa las salidas de listado, detalle, zoom y muestras de color, porque cada una tiene necesidades distintas de píxeles y carga.
- Usa identificadores estables de producto y recurso en las rutas de salida en lugar de nombres de archivo proporcionados por un navegador.
El contenido multimedia de productos se vuelve costoso cuando cada canal inventa sus propias reglas de recorte, formato y nomenclatura. Un pipeline útil parte del registro del producto y produce un conjunto pequeño y deliberado de derivados cuyas rutas, metadatos y ciclo de vida puede gestionar el sistema de comercio.
Lo más importante
- Mantén la aprobación y el estado del catálogo en la aplicación de comercio mientras Transloadit informa del estado del procesamiento y la exportación.
- Mide los bytes, el tiempo de procesamiento, la tasa de fallos y la calidad visual por canal antes de añadir más variantes.
Define el contrato de los recursos multimedia de producto
Empieza por las ubicaciones en lugar de las operaciones. Una tarjeta de listado, una página de detalle de producto, un visor de zoom, una muestra de color, un email, un feed de una plataforma de venta y un video de producto tienen distintos tamaños de visualización, políticas de recorte, requisitos de formato y presupuestos de rendimiento. Anota esos requisitos antes de elegir los Steps para que el Template exprese una regla de producto en lugar de una acumulación de transformaciones.
Mantén el catálogo de productos como fuente de referencia para el SKU, la configuración regional, la aprobación y la publicación. El pipeline de procesamiento debería recibir una identidad estable del recurso y devolver derivados verificados. Esa división permite que el sistema de comercio decida si un producto está listo mientras Transloadit se concentra en el procesamiento repetible de archivos.
Nombra cada ubicación
Registra las dimensiones, la relación de aspecto, la política de recorte, el formato, la calidad y el máximo de bytes para cada canal.
Asigna una versión al original
Usa una versión del recurso gestionada por la aplicación para que una nueva sesión fotográfica no pueda sobrescribir inesperadamente un derivado publicado.
Establece un presupuesto
Mide los bytes y el costo de procesamiento antes de añadir otro punto de ruptura o variante para una plataforma de venta.
Crea derivados acotados
Un flujo de trabajo habitual acepta el archivo de origen, lo valida, crea imágenes de listado y de detalle, prepara un derivado de mayor tamaño para zoom cuando se justifica y codifica el video del producto por separado. Mantén disponible el archivo original exportado para volver a procesarlo, pero no hagas que cada página cargue el original. En el ejemplo, zoom: false impide ampliar más allá de las dimensiones solicitadas. Usa el derivado más pequeño que conserve el detalle previsto del producto en el lugar donde se muestra.
El recorte necesita una política explícita. Un recorte centrado es predecible, pero puede cortar parte de un producto; la gravedad basada en la atención o la entropía puede ayudar en algunas imágenes. Usa /image/facedetect cuando se requieran coordenadas faciales y revisa el resultado de todos modos en catálogos de alto valor. Guarda la política de recorte y la versión del original junto con el registro del derivado para poder explicar cualquier diferencia visual más adelante.
{
"allow_steps_override": false,
"auth": {
"max_number_of_files": 1,
"max_size": 104857600
},
"steps": {
":original": {
"robot": "/upload/handle"
},
"accepted_image": {
"use": ":original",
"robot": "/file/filter",
"accepts": [["${file.mime}", "regex", "^image/(jpeg|png|webp)$"]],
"error_on_decline": true
},
"listing": {
"use": "accepted_image",
"robot": "/image/resize",
"width": 640,
"height": 640,
"resize_strategy": "fit",
"zoom": false,
"format": "webp",
"quality": 82,
"result": true
},
"detail": {
"use": "accepted_image",
"robot": "/image/resize",
"width": 1600,
"height": 1600,
"resize_strategy": "fit",
"zoom": false,
"format": "webp",
"quality": 86,
"result": true
},
"original_export": {
"use": "accepted_image",
"robot": "/s3/store",
"credentials": "catalogue-media",
"path": "catalog/${fields.product_id}/${fields.asset_version}/original-${unique_prefix}.${file.ext}",
"acl": "bucket-default",
"result": true
},
"listing_export": {
"use": "listing",
"robot": "/s3/store",
"credentials": "catalogue-media",
"path": "catalog/${fields.product_id}/${fields.asset_version}/listing.webp",
"acl": "bucket-default",
"result": true
},
"detail_export": {
"use": "detail",
"robot": "/s3/store",
"credentials": "catalogue-media",
"path": "catalog/${fields.product_id}/${fields.asset_version}/detail.webp",
"acl": "bucket-default",
"result": true
}
}
}Listado
Imágenes pequeñas que se cargan rápido para cuadrículas y resultados de búsqueda, con dimensiones que se ajustan al diseño de las tarjetas.
Detalle
La vista principal del producto, con resolución suficiente para la página, pero sin transferir innecesariamente los datos de una imagen de tamaño original.
Zoom y video
Genéralos solo cuando la experiencia los necesite y asígnales su propia política de carga y almacenamiento.
Mantén la fiabilidad del enrutamiento y las rutas
Las rutas de salida forman parte del contrato del catálogo. Constrúyelas a partir de identificadores de producto y una versión validada del recurso que tu aplicación autorice; luego registra los metadatos de los resultados en el sistema de comercio. No permitas que un nombre de archivo o un campo proporcionados por el navegador determinen dónde se almacena el derivado de otro inquilino ni a qué SKU pertenece.
Firmar params.fields en el servidor no protege estas rutas cuando un navegador envía la solicitud. Los campos de formularios multipart también se convierten en campos de la Assembly y no están cubiertos por la firma; además, un campo enviado después de params reemplaza el valor firmado que tiene el mismo nombre. El navegador controla ese orden. Como el ejemplo escribe los nombres fijos listing.webp y detail.webp bajo ${fields.product_id} y ${fields.asset_version}, una solicitud enviada desde el navegador podría sobrescribir los derivados de otro producto. Haz que el servidor de la aplicación construya y envíe la solicitud completa de la Assembly, incluidos la subida y los valores de product_id y asset_version (no vacíos, autorizados y seguros para su uso en rutas), y no reenvíes campos arbitrarios del cliente.
Aplica la misma regla a otros campos dinámicos. Mantén las dimensiones fijas en el Template o usa un Template por cada conjunto de variantes aprobado; los campos de la solicitud sobrescriben los campos del Template, por lo que solo el servidor debería proporcionarlos. Guardar allow_steps_override: false en el Template establece un límite independiente: impide sobrescribir los Steps en tiempo de ejecución al usar template_id, pero no autoriza los valores de los campos. Sigue siendo útil comprobar que las claves de almacenamiento devueltas coincidan con el prefijo esperado antes de publicar en el catálogo, pero esa comprobación no puede deshacer una sobrescritura en una clave incorrecta, así que protege la escritura en sí.
Usa rutas estables
Incluye un identificador de producto y una versión del recurso, y reemplaza la referencia del catálogo solo después de verificar la exportación.
Limita las opciones
Permite dimensiones y variantes conocidas en lugar de parámetros de transformación arbitrarios procedentes del navegador.
Protege las credenciales
Guarda las credenciales de almacenamiento como credenciales de Template y mantén tu Auth Secret de Transloadit en el servidor que envía la Assembly.
Publica a partir de eventos verificados
Un webhook informa a la aplicación de que una Assembly cambió de estado; por sí solo, no hace que un producto esté listo para publicarse. Verifica el webhook, recupera el resultado confiable de la Assembly, comprueba que exista cada derivado requerido con las dimensiones y el tipo MIME esperados y, solo entonces, actualiza el registro del catálogo.
Las notificaciones pueden llegar duplicadas, con retraso o no llegar. El controlador debería poder ejecutarse dos veces de forma segura, tolerar eventos que lleguen fuera de orden y reconciliar los eventos faltantes mediante sondeo o una comprobación periódica del estado. Así se evita que una exportación fallida deje un producto vinculado a un conjunto de imágenes a medio generar.
Verifica
Comprueba las firmas, la identidad de la Assembly, las rutas de salida, las dimensiones, los tipos MIME y la cantidad esperada de variantes.
Actualiza de forma idempotente
Usa el ID del producto y la versión del recurso como clave de escritura para que un reintento no pueda duplicar un registro del catálogo ni devolverlo a un estado anterior.
Reconcilia
Usa sondeo del estado o una tarea de reparación para los eventos que se retrasen, se dupliquen o nunca se observen.
Mide antes de ampliar el conjunto de variantes
Registra las dimensiones de los derivados, su tamaño en bytes, el tiempo de procesamiento, los fallos y los resultados de la revisión visual por ubicación de uso. Compara esas mediciones con el rendimiento de la página y los objetivos de conversión antes de añadir otro punto de ruptura, formato o rama para un mercado en línea.
Un contrato pequeño que se ajuste a las ubicaciones reales es más fácil de almacenar en caché, migrar y reparar que una matriz generada de forma especulativa para todo el catálogo. Conserva la fuente y la versión del recurso para poder reproducir un cambio posterior de política a partir de la misma entrada.
Mide los bytes
Compara tamaños representativos de los derivados con los presupuestos de red y decodificación de cada ubicación.
Revisa la calidad
Inspecciona los recortes y la compresión en productos representativos antes de incorporar un derivado a la publicación.
Pasa a producción con un Template probado de Transloadit
El ejemplo de esta guía acepta como máximo una imagen, crea dos derivados acotados de forma deliberada y exporta el original aceptado y cada derivado bajo una clave versionada distinta. Su filtro solo deja pasar los tipos MIME JPEG, PNG y WebP y hace que la Assembly falle con cualquier otro tipo. Todas las exportaciones se sitúan después de ese filtro, por lo que una subida rechazada no se exporta a S3. El enrutamiento por tipo MIME no es una verificación estricta del contenido; valida los bytes almacenados en tu aplicación si tu contrato lo exige. Prueba imágenes de productos representativas y luego ajusta las dimensiones, la política de recorte, la calidad y la retención según los requisitos de los canales obtenidos mediante mediciones, antes de añadir ramas de zoom o video.
Crea una cuenta de Transloadit y guarda las Assembly Instructions como un Template. Crea una credencial de Template para S3 llamada catalogue-media con key, secret, bucket y bucket_region; consulta credenciales de Template para configurarla. Mantén el bucket privado con Block Public Access habilitado; acl: "bucket-default" omite la ACL del objeto y depende de la política de acceso del bucket, por lo que no hace que los objetos sean privados por sí solo. Haz que tu servidor de comercio envíe la Assembly con valores autorizados tanto para el ID de producto como para la versión del recurso, verifique que cada derivado esperado exista en la ruta versionada esperada, registre el resultado de forma idempotente y actualice el catálogo solo después de que se complete la exportación. Consulta los precios de Transloadit cuando quieras estimar el procesamiento y el almacenamiento para tu catálogo.
Guarda la configuración de ejemplo
Mantén el grafo de procesamiento y las credenciales de almacenamiento en un Template guardado en lugar de reconstruir los Steps en el navegador.
Publica después de verificar
Usa los resultados verificados de la Assembly y el estado de aprobación de tu catálogo como condición de publicación para cada versión del recurso.
Detalles técnicos que conviene conocer
- Una imagen más grande no es automáticamente un mejor recurso para zoom; las dimensiones de salida deberían ajustarse a los requisitos reales de visualización y recorte.
- La conversión de formato, el cambio de tamaño y el recorte pueden ser pasos independientes con distintas consideraciones de calidad y fallos.
- Las notificaciones pueden duplicarse y solo se reintentan unas pocas veces, por lo que la aplicación de comercio necesita verificación de firmas, manejo idempotente de resultados y reconciliación de eventos faltantes.
- El almacenamiento propiedad del cliente sigue siendo el sistema de registro de los archivos exportados cuando un flujo de trabajo usa el Robot /s3/store u otro Robot de almacenamiento.
- La generación de variantes puede multiplicarse rápidamente entre configuraciones regionales, canales, puntos de ruptura y campañas; las políticas acotadas evitan un crecimiento combinatorio accidental.
- El original y cada derivado deberían tener una versión estable para que reemplazar la imagen de un producto no pueda mezclar resultados antiguos y nuevos.
- Una miniatura de listado normalmente necesita menos datos que un recurso de detalle o zoom; enviar el original a cada ubicación desperdicia transferencia y trabajo de decodificación.
- Las rutas de salida deberían generarse a partir de identificadores de producto confiables y una versión validada del recurso, en lugar de interpolarse a partir de datos arbitrarios del cliente.
- Una Assembly completada no equivale a un producto publicado. Las actualizaciones del catálogo deberían esperar a que se verifiquen las exportaciones y se alcance el estado de aprobación definido por la propia aplicación.
- Cuando un canal añada un nuevo derivado, actualiza el contrato y las pruebas en lugar de cambiar silenciosamente todos los resultados existentes.
Un enfoque práctico
- 1
Define el contrato de derivados de cada canal antes de escribir el Template.
- 2
Haz que el servidor de comercio envíe la fuente con los campos autorizados product_id y asset_version, y conserva el original aceptado.
- 3
Genera las salidas mínimas de listado, detalle, zoom y video que necesitan los canales actuales.
- 4
Publica solo después de que la aplicación reciba y registre de forma idempotente un evento de exportación completa.
Cuándo resulta útil Transloadit
Haz que tu servidor de comercio cree y envíe una Assembly a partir de un Template que valide, normalice, cree ramas y exporte derivados acotados al almacenamiento que posees como cliente. Si las personas suben archivos mediante Uppy u otro cliente de navegador, trata esas subidas como una etapa de recepción independiente que tu aplicación valida antes de que su servidor envíe esta configuración de ejemplo de exportación. Mantén el SKU, la configuración regional, la aprobación y el estado de publicación en la aplicación de comercio.
Límite de la arquitectura
Transloadit prepara contenido multimedia de productos y exporta derivados; no proporciona un catálogo de productos, PIM, DAM, tienda en línea, interfaz de aprobación ni servicio de publicación de anuncios en plataformas de venta.
Preguntas frecuentes
¿Reemplaza Transloadit un sistema de gestión de información de productos (PIM) o de gestión de recursos digitales (DAM)?
No. Procesa archivos y exporta derivados. Mantén los atributos de los productos, las aprobaciones, los derechos, el estado del catálogo y la búsqueda de recursos en el sistema responsable de ellos.
¿Cuántas variantes debería tener una imagen de producto?
Empieza por las ubicaciones que puedes medir: normalmente listado, detalle y solo las salidas de zoom o de canales que tengan un consumidor real. Añade variantes cuando los datos sobre dispositivos, diseño o plataformas de venta justifiquen su costo de procesamiento y almacenamiento.
¿Debería ser público el original?
Normalmente no. Conserva el original en un almacenamiento controlado y publica solo los derivados y las rutas necesarios para la experiencia del producto.
¿Qué ocurre cuando se reemplaza una imagen de producto?
Crea una nueva versión del recurso, procésala, verifica todas las salidas necesarias y luego cambia la referencia del catálogo. Conserva o retira la versión anterior según la política de tu aplicación.