netlify-image-cdn

Aperçu du skill netlify-image-cdn

Ce que fait netlify-image-cdn

Le skill netlify-image-cdn vous aide à utiliser l’Image CDN intégré de Netlify pour redimensionner, recadrer, reformater et optimiser des images via /.netlify/images. Il est particulièrement utile si vous cherchez un guide pratique de Netlify Image CDN pour servir des assets locaux, construire un balisage d’images responsive ou intégrer des images envoyées par les utilisateurs dans un parcours de diffusion optimisé.

À qui il s’adresse

Ce skill convient bien aux travaux de frontend et de Backend Development sur des sites Netlify qui ont besoin de transformations d’images prévisibles, sans ajouter un service d’images séparé. Il est particulièrement pertinent si vous privilégiez la simplicité d’installation, la performance des images, l’autorisation des images distantes ou la combinaison entre stockage des uploads et diffusion.

Ce qu’il faut savoir avant de l’adopter

Les principaux critères de décision sont la nature locale ou distante de vos images, le besoin ou non de réécritures d’URL propres, et la présence éventuelle d’un pipeline complet d’upload dans votre application. netlify-image-cdn est le plus pertinent lorsque vous déployez déjà sur Netlify et que vous souhaitez faire les transformations à la périphérie plutôt que via un backend média personnalisé.

Comment utiliser le skill netlify-image-cdn

Installer et examiner les bons fichiers

Commencez par le flux netlify-image-cdn install de votre système de skills, puis lisez d’abord SKILL.md. Pour aller plus loin, consultez references/user-uploads.md si vous construisez un système d’upload, et utilisez l’arborescence du dépôt pour vérifier s’il existe d’autres fichiers de référence liés à votre repo. Dans ce repo, la documentation d’appui est concentrée, donc il n’est pas nécessaire de fouiller dans un ensemble volumineux de docs.

Transformer un objectif flou en prompt exploitable

Utilisez le modèle netlify-image-cdn usage en indiquant d’emblée le type de source, le rendu attendu et les contraintes. Un bon prompt précise la source de l’image, les dimensions cibles, le format, et le fait qu’elle soit locale ou distante.

Exemple :

Use netlify-image-cdn to serve a hero image from /photo.jpg at 1200x800, crop with cover, and output webp with quality 80. Include the cleanest Netlify URL and explain any required netlify.toml changes.

Pour les uploads utilisateur, demandez le pipeline complet :

Use netlify-image-cdn with Functions + Blobs to store uploaded avatars, expose them at /uploads/:key, and transform them through /.netlify/images. Include the allowlist and rewrite strategy.

Lire les détails d’usage qui changent la qualité du rendu

Les éléments les plus importants du dépôt sont les paramètres de requête et les règles d’autorisation des images distantes. Faites attention à url, w, h, fit, position, fm et q, car ce sont eux qui déterminent si la sortie est redimensionnée, recadrée, négociée automatiquement ou verrouillée sur un format donné. Si vous servez des images externes, lisez attentivement les exemples de regex dans netlify.toml ; une entrée manquante dans l’allowlist est le blocage le plus fréquent.

FAQ du skill netlify-image-cdn

Est-ce seulement pour redimensionner des images ?

Non. Le skill netlify-image-cdn couvre le redimensionnement, le recadrage, le contrôle du format de sortie et les choix d’optimisation. Il aide aussi quand vous avez besoin de réécritures d’URL propres ou d’un flux d’images envoyées par les utilisateurs, plutôt que d’un simple ajustement de balise img.

Dois-je être sur Netlify ?

Oui, ce skill est spécifique à l’Image CDN de Netlify et aux fonctionnalités associées de la plateforme. Si votre application n’est pas déployée sur Netlify, un prompt d’image générique peut être plus adapté que netlify-image-cdn skill.

Est-ce adapté aux débutants ?

Oui, si vous voulez un guide simple orienté installation et que vous êtes à l’aise pour modifier du HTML, netlify.toml ou un fichier de fonction. Le skill est plus simple à utiliser quand vous connaissez déjà votre source d’image et le rendu recherché.

Quand ne faut-il pas l’utiliser ?

N’utilisez pas netlify-image-cdn si vous avez besoin d’un pipeline média entièrement personnalisé, sans lien avec Netlify, ou si votre besoin dépend de transformations non prises en charge par les paramètres du CDN. Dans ces cas-là, un service de traitement d’images dédié ou un backend spécifique à l’application sera souvent plus adapté.

Comment améliorer le skill netlify-image-cdn

Donner au skill la tâche image exacte

Les meilleurs résultats viennent d’entrées concrètes : chemin de l’image ou URL distante, taille cible, intention de recadrage, format de sortie, et priorité entre poids du fichier et fidélité visuelle. Si vous dites seulement « optimize this image », la sortie sera généralement moins utile qu’un prompt qui précise la mise en page de la page et la cible appareil.

Donner la contrainte de déploiement qui change l’implémentation

Pour netlify-image-cdn for Backend Development, indiquez au skill si vous avez besoin d’uploads, de diffusion publique ou d’une livraison basée sur des rewrites. Ce choix détermine si la solution doit rester au niveau HTML ou inclure Functions + Blobs ainsi qu’une couche de redirection.

Itérer sur le premier résultat avec de vrais cas de test

Si la première réponse est proche mais pas exploitable, affinez-la avec un exemple concret qui échoue : un domaine distant autorisé, un ratio d’aspect précis ou une préférence de format dans le navigateur. C’est plus efficace que demander du « better code », parce que cela montre si le problème vient de la syntaxe d’URL, de la configuration Netlify ou de la conception du pipeline.