Documentation Outils de base Image Cropper

Exemples

Exemples pratiques et cas d'usage courants pour l'outil Image Cropper.

Exemples de base

Créer une photo de profil

Créer une photo de profil carrée à partir de n'importe quelle image :

Importer votre photo
- Choisissez un portrait ou une photo de groupe
- Les formats courants comme JPEG et PNG sont pris en charge
Définir le ratio sur 1:1
- Cliquez sur 1:1 dans les paramètres de ratio
- La zone de recadrage devient un carré parfait
Positionner la zone de recadrage
- Centrez la zone sur le visage du sujet
- Ajustez la taille pour conserver les éléments importants
Choisir les paramètres d'export
- Format : PNG (idéal si vous avez besoin de transparence)
- Taille : 400x400 convient à la plupart des plateformes
- Qualité : avec JPEG, 90% est recommandé

Résultat : un avatar carré soigné, parfait pour les profils sur les réseaux sociaux.

Optimisation pour les réseaux sociaux

Publication Instagram (1:1)

Ratio : 1:1
Taille recommandée : 1080x1080
Format : JPEG
Qualité : 85%

Story Instagram (9:16)

Ratio : 9:16
Taille recommandée : 1080x1920
Format : JPEG
Qualité : 80%

Bannière Twitter (16:9)

Ratio : 16:9
Taille recommandée : 1500x500
Format : JPEG
Qualité : 90%

Images produit pour l'e-commerce

Créer des visuels cohérents pour vos produits :

Définir des dimensions standard
- 1000x1000 pour l'image principale
- 800x600 pour les vues détaillées
- Un fond blanc fonctionne généralement le mieux
Workflow de traitement par lot
- Définir le format de sortie sur JPEG
- Définir la qualité sur 85%
- Utiliser 1:1 pour garder une présentation uniforme
- Traiter toutes les images produit avec les mêmes réglages

Exemples avancés

Ressources pour le web design

Images de section Hero

Ratio : 16:9 ou 21:9
Taille : 1920x1080 ou 2560x1080
Format : WebP (fallback : JPEG)
Qualité : 75% (équilibre entre qualité et vitesse de chargement)

Miniatures d'articles de blog

Ratio : 4:3
Taille : 800x600
Format : WebP
Qualité : 80%
Optimisation : mettre le sujet principal en avant

Images de cartes

Ratio : 3:2
Taille : 600x400
Format : WebP
Qualité : 85%

Workflow photo

Extraire des détails à partir de grandes photos

Charger une image haute résolution
- Original : 6000x4000
- Objectif : extraire un détail précis
Recadrer avec précision
- Utiliser un ratio libre
- Zoomer pour sélectionner plus précisément
- Cibler la zone intéressante
Optimiser la sortie
- Conserver une qualité élevée (95%)
- Garder le format d'origine si l'image est en PNG
- Redimensionner selon l'usage web visé

Créer une série de photos

Uniformiser le ratio
- 4:3 pour un rendu classique
- 16:9 pour un rendu plus moderne
Uniformiser les dimensions
- 1200x900 pour une série en 4:3
- 1200x675 pour une série en 16:9
Uniformiser la qualité
- Utiliser JPEG pour les photos
- 90% pour l'exposition ou l'impression
- 80% pour les galeries web

Exemples de workflow

Traiter plusieurs images par lot

Préparation

- Regrouper les images source dans un dossier
- Définir les spécifications cibles
- Mettre en place une convention de nommage cohérente

Traitement

- Charger la première image
- Définir le ratio et le format
- Définir la qualité et la taille de sortie
- Recadrer et télécharger
- Répéter pour les autres images

Contrôle qualité

- Vérifier toutes les images traitées
- Contrôler la taille des fichiers
- Vérifier la cohérence des dimensions
- Tester les images dans l'application cible

Créer plusieurs variantes à partir d'une seule image

À partir d'une même image source, vous pouvez générer plusieurs versions :

Variante 1 : pleine résolution

Usage : impressions de haute qualité
Réglages : taille d'origine, PNG, qualité 100%
Recadrage : minimal pour préserver la composition initiale

Variante 2 : affichage web

Usage : galeries de site web
Réglages : dimension max 1200px, JPEG, qualité 85%
Recadrage : optimiser la composition pour l'affichage en ligne

Variante 3 : miniature

Usage : grilles d'aperçu
Réglages : 300x300, JPEG, qualité 75%
Recadrage : focaliser sur le sujet principal

Variante 4 : optimisée mobile

Usage : applications mobiles
Réglages : dimension max 800px, WebP, qualité 80%
Recadrage : s'assurer que les éléments importants restent visibles sur petit écran

Exemples de dépannage

Gestion des gros fichiers

Problème : vous devez traiter une image convertie depuis un fichier RAW de 50MB.
Solution :

Utiliser un navigateur avec suffisamment de mémoire
Fermer les autres onglets pour libérer des ressources
Réduire le fichier en amont si nécessaire
Utiliser un chargement progressif si disponible

Trouver le bon équilibre entre qualité et taille

Scénario : vous avez besoin d'un fichier léger sans trop perdre en qualité.

Réglages à tester :

WebP est souvent environ 30% plus léger que JPEG
75% constitue souvent un bon compromis
Adapter les dimensions à l'usage réel
Choisir un ratio pertinent pour éviter des pixels inutiles

Comparaison :

JPEG (90%) d'origine : 2.1MB
JPEG (75%) optimisé : 1.2MB
WebP (75%) : 800KB
WebP (60%) : 450KB

Compatibilité mobile

Défi : traiter des images sur smartphone ou tablette.

Points à considérer :

Moins de mémoire disponible
Ajustement du recadrage via l'interface tactile
Vitesse de traitement plus lente
Options de téléchargement parfois limitées

Bonnes pratiques :

Utiliser des images source plus petites sur mobile
Réduire légèrement la qualité de sortie
Vérifier que les gestes tactiles sont confortables
Fournir un retour visuel clair

Exemples d'intégration

Intégration à un plugin WordPress

// Example: Add crop functionality to WordPress media library
function add_image_cropper_to_media() {
    // Enqueue Image Cropper assets
    wp_enqueue_script('image-cropper', '/path/to/cropper.js');
    wp_enqueue_style('image-cropper', '/path/to/cropper.css');
}
add_action('admin_enqueue_scripts', 'add_image_cropper_to_media');

Intégration dans un composant React

import ImageCropper from "./ImageCropper";

function MyComponent() {
  const handleCropComplete = (result) => {
    // Handle cropped image
    console.log("Cropped image:", result);
  };

  return (
    <ImageCropper
      aspectRatio={1}
      outputFormat="jpeg"
      quality={85}
      onCropComplete={handleCropComplete}
    />
  );
}

Intégration à une plateforme e-commerce

// Example: Shopify app integration
function setupProductImageCropper() {
  const cropper = new ImageCropper({
    container: "#product-image-editor",
    aspectRatio: 1,
    outputFormat: "jpeg",
    quality: 90,
    onCrop: (result) => {
      uploadProductImage(result.blob);
    },
  });
}

Cette page vous a-t-elle été utile ?

On this page

Exemples de base Exemples avancés Exemples de workflow Exemples de dépannage Exemples d'intégration