Compression d'images Webflow CMS

Compresser et reformater les champs image d'un élément Webflow CMS en .webp ou .avif.

Cette skill ne supporte pas les images intégrées dans les champs Rich Text pour le moment. Signalez cette limitation à l'utilisateur avant de commencer et traitez uniquement les champs CMS dont le type de schéma est Image ou MultiImage.

Important

UTILISEZ TOUJOURS les outils Webflow MCP pour les opérations Webflow :

Utilisez data_sites_tool de Webflow MCP avec l'action list_sites pour découvrir l'ID du site si nécessaire
Utilisez data_cms_tool de Webflow MCP avec l'action get_collection_details pour récupérer les schémas de collection
Utilisez data_cms_tool de Webflow MCP avec l'action list_collection_items pour récupérer l'élément CMS cible
Utilisez data_assets_tool de Webflow MCP avec l'action create_asset pour créer les uploads d'assets présignés
Utilisez data_cms_tool de Webflow MCP avec l'action update_collection_items pour mettre à jour les champs image CMS
Utilisez data_cms_tool de Webflow MCP avec l'action publish_collection_items pour publier l'élément mis à jour
Tous les appels Webflow MCP doivent inclure le paramètre context requis (15-25 mots, perspective à la troisième personne)
Les opérations mutantes nécessitent une confirmation explicite de l'utilisateur. Demandez à l'utilisateur de taper confirm avant de charger des assets, mettre à jour les champs CMS ou publier.
Les images intégrées dans Rich Text ne sont pas supportées. Ne parsez ni ne réécrivez le HTML Rich Text pour la compression d'images.

Instructions

Phase 1 : Collecter les paramètres

Collectez toutes les entrées requises en une seule fois si possible :

Collection ID : Demander « Quel est l'ID de collection ? »
Item ID : Demander « Quel est l'ID d'élément ? »
Champs image : Demander « Quels champs image doivent être compressés ? »
- « All image fields » - compresser tous les champs Image ou MultiImage trouvés sur l'élément
- « Specify field names » - l'utilisateur nommera des slugs de champ spécifiques
Format cible : Demander « Format cible ? »
- « webp (Recommended) » - meilleur support navigateur, bonne compression
- « avif » - meilleure compression, support légèrement inférieur
Qualité (1-100) : Demander « Qualité (1-100) ? »
- « 85 - Recommended (webp) » - pratiquement sans perte visuelle pour la plupart des photos
- « 75 - Recommended (avif) » - avif est efficace à une qualité inférieure
- « Custom » - l'utilisateur tape sa propre valeur

Si l'utilisateur a choisi « Specify field names », demandez ensuite les slugs de champ séparés par des virgules. Si l'utilisateur a choisi une qualité « Custom », demandez ensuite la valeur numérique. Validez que la qualité personnalisée est un entier de 1 à 100.

Phase 2 : Découvrir les champs image

Appelez data_cms_tool avec l'action get_collection_details et l'ID de collection.
Filtrez les champs où type === "Image" ou type === "MultiImage".
Sélectionnez les champs cibles :
- Si l'utilisateur a choisi « All image fields », utilisez tous les champs Image et MultiImage trouvés.
- Si l'utilisateur a nommé des champs spécifiques, validez que chaque slug existe et est un champ Image ou MultiImage.
- Avertissez et ignorez les champs demandés qui n'existent pas ou ne sont pas des champs image.
Arrêtez et rapportez s'il n'y a pas de champs image valides.

Phase 3 : Récupérer l'élément CMS

Appelez data_cms_tool avec l'action list_collection_items pour récupérer l'élément cible. Utilisez l'ID d'élément pour identifier l'élément directement lorsque l'outil le supporte ; sinon, filtrez ou recherchez les éléments retournés.

Extrayez les fieldData actuelles pour chaque champ cible :

Pour les champs Image, capturez url et fileId.
Pour les champs MultiImage, capturez l'url et le fileId de chaque entrée de tableau.
Ignorez les valeurs image nulles, vides ou malformées.
Ignorez les images déjà dans le format cible sauf si l'utilisateur demande explicitement de les recompresser.

Phase 4 : Aperçu et confirmation

Avant de télécharger ou charger quoi que ce soit, affichez un aperçu :

Compression Preview

Collection: [collection ID]
Item: [item ID]
Target format: webp
Quality: 85

Fields to process:
- main-image: hero.jpg -> hero.webp
- gallery: 3 images -> webp

Skipped:
- thumbnail: already webp

Type `confirm` to download, convert, upload, update the CMS item, and publish.

Continuez uniquement après que l'utilisateur tape confirm.

Phase 5 : Convertir chaque image

Pour chaque image :

Téléchargez vers /tmp/ :

curl -sL "{url}" -o "/tmp/cms_img_{fieldSlug}_{index}.orig"

Assurez-vous que Pillow est disponible :

python3 -c "from PIL import Image" 2>/dev/null || pip3 install Pillow -q

Pour avif, essayez aussi :

pip3 install pillow-avif-plugin -q

Convertissez avec le paramètre de qualité de l'utilisateur :

python3 - <<'EOF'
from PIL import Image
import os

try:
    import pillow_avif
except ImportError:
    pass

source = "/tmp/cms_img_{fieldSlug}_{index}.orig"
target = "/tmp/cms_img_{fieldSlug}_{index}.{ext}"
img = Image.open(source)
img.save(target, "{FORMAT}", quality={quality})
orig = os.path.getsize(source)
new = os.path.getsize(target)
print(f"Original: {orig:,} bytes -> {FORMAT}: {new:,} bytes ({(1 - new / orig) * 100:.1f}% smaller)")
EOF

Si la conversion avif échoue, rapportez l'erreur et demandez si l'utilisateur souhaite revenir à webp ou avorter.

Calculez le hash MD5 du fichier converti :

md5 -q "/tmp/cms_img_{fieldSlug}_{index}.{ext}"

Sur Linux :

md5sum "/tmp/cms_img_{fieldSlug}_{index}.{ext}" | cut -d' ' -f1

Phase 6 : Charger vers les assets Webflow

Pour chaque fichier converti :

Déterminez site_id. S'il n'est pas connu à partir de la collection ou du contexte antérieur, appelez data_sites_tool avec l'action list_sites. Si plusieurs sites sont disponibles, demandez à l'utilisateur lequel possède la collection.
Appelez data_assets_tool avec l'action create_asset :
- site_id : l'ID du site cible
- file_name : nom de base original plus la nouvelle extension, par exemple hero.webp
- file_hash : la chaîne hex MD5
Capturez les valeurs de réponse :
- uploadUrl : endpoint S3
- uploadDetails : champs de formulaire
- id : nouvel ID d'asset
- hostedUrl : URL CDN à utiliser comme référence source CMS
POST vers S3 comme multipart/form-data. Mappez les clés uploadDetails aux champs curl :
- xAmzAlgorithm -> X-Amz-Algorithm
- xAmzCredential -> X-Amz-Credential
- xAmzDate -> X-Amz-Date
- xAmzSignature -> X-Amz-Signature
- successActionStatus -> success_action_status
- contentType -> Content-Type
- cacheControl -> Cache-Control
- Passez acl, bucket, key et policy tel quel
- Ajoutez le fichier en dernier : -F "file=@/tmp/cms_img_{fieldSlug}_{index}.{ext};type=image/{ext}"
Attendez HTTP 201. Si la réponse n'est pas 201, enregistrez le corps de la réponse et rapportez l'erreur de chargement. Les URLs présignées ont un TTL d'une heure ; redémarrez à partir de la création d'asset si l'URL expire.

Phase 7 : Mettre à jour et publier

Appelez data_cms_tool avec l'action update_collection_items en utilisant uniquement les champs qui ont été converties et chargés avec succès.

Pour les champs Image, définissez :

{
  "fieldSlug": {
    "fileId": "{newAssetId}",
    "url": "{hostedUrl}"
  }
}

Pour les champs MultiImage, reconstruisez le tableau image complet et remplacez uniquement les entrées traitées avec succès par les nouvelles valeurs { "fileId", "url" }. Préservez exactement les entrées ignorées telles qu'elles étaient.

Après une mise à jour réussie, appelez data_cms_tool avec l'action publish_collection_items pour l'ID d'élément. Le CMS peut retraiter l'image et générer sa propre URL CDN ; le hostedUrl du chargement d'asset est la référence source.

Phase 8 : Rapporter les résultats

Imprimez un tableau de synthèse concis :

Field	Original	Converted	Savings
main-image	118 044 B (JPEG)	113 260 B (webp)	4,1 %

Rapportez aussi :

Champs ignorés parce qu'ils étaient nuls, vides, malformés, déjà dans le format cible ou ne sont pas des champs image
Échecs de conversion et si l'utilisateur a choisi un retour ou un avortement
Échecs de chargement, y compris les corps de réponse quand disponibles
Nouveaux IDs d'asset pour les chargements réussis lorsqu'une mise à jour CMS ou une publication ultérieure a échoué

Exemples

Invite utilisateur :

Compress the main image on this CMS item to webp.

Flux de réponse :

I need the collection ID, item ID, image fields, target format, and quality before compressing the CMS image.

Compression Preview

Collection: 65f...
Item: 66a...
Target format: webp
Quality: 85

Fields to process:
- main-image: blog-hero.jpg -> blog-hero.webp

Type `confirm` to download, convert, upload, update the CMS item, and publish.

Rapport final :

CMS Image Compression Complete

| Field | Original | Converted | Savings |
|-------|----------|-----------|---------|
| main-image | 842 911 B (JPEG) | 214 330 B (webp) | 74,6 % |

Updated and published item 66a...

Directives

Traitez un élément CMS à la fois. Pour les opérations en masse sur de nombreux éléments, relancez la skill pour chaque élément ou étendez le workflow avec une boucle explicite.
Ne supprimez pas le JPEG ou PNG original du store d'assets Webflow ; mettez simplement à jour la référence du champ CMS.
Préservez les noms de fichier en supprimant l'extension d'origine et en ajoutant l'extension cible. Évitez les doubles extensions telles que hero.jpg.webp.
Continuez à traiter les autres champs sélectionnés après un seul échec de conversion ou de chargement d'image, sauf si le champ défaillant est le seul cible.
Ne mettez jamais à jour ou ne publiez jamais l'élément CMS si aucune image n'a été convertie et chargée avec succès.
Conservez une note de rollback en mémoire locale avec les valeurs de champ image d'origine et incluez-la dans le rapport final quand une mise à jour réussit.

webflow-mcp:compress-cms-image