Comment automatiser le traitement des médias produit e-commerce

Définir le contrat des médias produit

Partez des emplacements plutôt que des opérations. Une carte dans une liste de produits, une fiche produit, une visionneuse avec zoom, un échantillon, un e-mail, un flux pour une place de marché et une vidéo produit ont chacun une taille d’affichage, une politique de recadrage, une exigence de format et un budget de performance qui leur sont propres. Consignez ces exigences avant de choisir les Steps, afin que le Template exprime une règle produit plutôt qu’un empilement de transformations.

Conservez le catalogue de produits comme référence pour le SKU, les paramètres régionaux, l’approbation et la publication. Le pipeline de traitement doit recevoir une identité de ressource stable et renvoyer des dérivés vérifiés. Cette répartition permet au système de commerce de décider si un produit est prêt, tandis que Transloadit se concentre sur des opérations reproductibles sur les fichiers.

Créer des dérivés avec des limites définies

Un flux de traitement courant accepte la source, la valide, crée des images pour les listes de produits et les fiches produit, prépare un dérivé plus grand pour le zoom lorsque cela se justifie, et encode séparément la vidéo produit. Conservez l’exportation de l’original pour pouvoir le retraiter, mais ne faites pas charger l’original par chaque page. Dans l’exemple, zoom: false empêche l’agrandissement au-delà des dimensions demandées. Utilisez le plus petit dérivé qui préserve les détails du produit à montrer à son emplacement.

Le recadrage nécessite une politique explicite. Un recadrage centré est prévisible, mais peut couper une partie d’un produit ; un point d’ancrage fondé sur l’attention ou l’entropie peut être utile pour certaines images ; utilisez /image/facedetect lorsque les coordonnées des visages sont requises, et effectuez tout de même un examen pour les catalogues à forte valeur. Stockez la politique de recadrage et la version de la source avec l’enregistrement du dérivé afin de pouvoir expliquer ultérieurement une différence visuelle.

{
  "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
    }
  }
}

Maintenir la fiabilité du routage et des chemins

Les chemins de sortie font partie du contrat du catalogue. Construisez-les à partir d’identifiants de produit et d’une version de ressource validée que votre application autorise, puis enregistrez les métadonnées des résultats dans le système de commerce. Ne laissez pas un nom de fichier ou un champ fourni par le navigateur déterminer où le dérivé d’un autre locataire est stocké ni à quel SKU il appartient.

Signer params.fields côté serveur ne protège pas ces chemins lorsqu’un navigateur soumet la requête. Les champs de formulaire multipart deviennent également des champs de l’Assembly et ne sont pas couverts par la signature, et un champ envoyé après params remplace la valeur signée portant le même nom. Le navigateur contrôle cet ordre. Comme l’exemple écrit les fichiers aux noms fixes listing.webp et detail.webp sous ${fields.product_id} et ${fields.asset_version}, une requête soumise par le navigateur pourrait écraser les dérivés d’un autre produit. Faites construire et soumettre l’intégralité de la requête d’Assembly par le serveur de l’application, y compris le téléversement et les valeurs product_id et asset_version non vides, autorisées et sûres pour les chemins, et ne transmettez pas de champs arbitraires du client.

Appliquez la même règle aux autres champs dynamiques. Gardez les dimensions fixes dans le Template ou utilisez un Template par ensemble de variantes approuvé ; les champs de la requête remplacent ceux définis dans le Template, donc seul le serveur doit les fournir. Enregistrer allow_steps_override: false dans le Template constitue une protection distincte : cela empêche la redéfinition des Steps à l’exécution lorsque vous utilisez template_id, mais ne vaut pas autorisation des valeurs des champs. Vérifier les clés de stockage renvoyées par rapport au préfixe attendu reste utile avant la publication dans le catalogue, mais ne peut pas annuler un écrasement effectué à une mauvaise clé ; protégez donc l’écriture elle-même.

Publier à partir d’événements vérifiés

Un webhook indique à l’application qu’une Assembly a changé d’état ; il ne suffit pas à rendre un produit publiable. Vérifiez le webhook, récupérez le résultat fiable de l’Assembly, vérifiez que chaque dérivé requis existe avec les dimensions et le type MIME attendus, puis mettez à jour la fiche du catalogue uniquement après ces vérifications.

Les notifications peuvent être dupliquées, retardées ou manquantes. Le gestionnaire devrait pouvoir s’exécuter deux fois sans risque, tolérer les événements reçus dans le désordre et réconcilier l’état en cas d’événement manquant par interrogation ou par vérification périodique de l’état. C’est ce qui évite qu’un échec d’exportation laisse un produit pointant vers un ensemble d’images à moitié généré.

Mesurer avant d’élargir l’ensemble de variantes

Consignez les dimensions des dérivés, leur taille en octets, le temps de traitement, les échecs et les résultats de l’examen visuel pour chaque emplacement. Comparez ces mesures aux objectifs de performance des pages et de conversion avant d’ajouter un point de rupture, un format ou une branche destinée à une place de marché.

Un contrat limité qui correspond aux emplacements réels est plus facile à mettre en cache, à migrer et à réparer qu’une matrice couvrant tout le catalogue et générée de manière spéculative. Conservez la source et la version de la ressource afin de pouvoir reproduire une modification ultérieure de la politique à partir de la même entrée.

Démarrer avec un Template Transloadit testé

L’exemple de ce guide accepte au plus une image, crée deux dérivés volontairement limités et exporte l’original accepté ainsi que chaque dérivé sous une clé versionnée distincte. Son filtre ne laisse passer que les types MIME JPEG, PNG et WebP et fait échouer l’Assembly pour tout autre type. Chaque exportation se trouve en aval de ce filtre, de sorte qu’un téléversement refusé n’est pas exporté vers S3. Le routage selon le type MIME ne constitue pas une vérification stricte du contenu ; validez les octets stockés dans votre application si votre contrat l’exige. Testez des images produit représentatives, puis ajustez les dimensions, la politique de recadrage, la qualité et la conservation à partir des exigences mesurées des canaux avant d’ajouter des branches pour le zoom ou la vidéo.

Créez un compte Transloadit et enregistrez les Assembly Instructions sous forme de Template. Créez un ensemble d’informations d’identification de Template pour S3 nommé catalogue-media en renseignant key, secret, bucket et bucket_region ; consultez les informations d’identification de Template pour la configuration. Gardez le bucket privé en activant Block Public Access ; acl: "bucket-default" omet l’ACL de l’objet et s’appuie sur la politique d’accès du bucket, ce qui ne suffit donc pas à rendre les objets privés. Faites soumettre l’Assembly par votre serveur de commerce avec des valeurs autorisées pour l’identifiant de produit comme pour la version de la ressource, vérifiez que chaque dérivé attendu existe au chemin versionné attendu, enregistrez le résultat de manière idempotente et mettez à jour le catalogue uniquement après la fin de l’exportation. Consultez les tarifs de Transloadit lorsque vous souhaitez estimer le traitement et le stockage nécessaires à votre catalogue.