Envoyer des images via WhatsApp API : formats, taille, optimisation

Une image bien choisie vaut mille mots, mais une image mal optimisée peut coûter cher : lenteur d'affichage pour vos clients sur des réseaux 3G africains, rejet par l'API WhatsApp, ou visuel dégradé qui nuit à votre image de marque. Que vous envoyiez des photos de produits à des clients ivoiriens, des bons de commande à des entreprises camerounaises, ou des visuels promotionnels à votre base de clients marocains, maîtriser l'envoi d'images via WhatsApp API est une compétence fondamentale. Ce guide couvre tout : formats, limites, upload, optimisation et bonnes pratiques.

Formats et limites techniques

WhatsApp Business API accepte les formats d'images suivants :

Format	MIME Type	Taille max
JPEG	image/jpeg	5 MB
PNG	image/png	5 MB
WebP	image/webp	5 MB

Recommandations de dimensions :

• Image classique (dans le fil de conversation) : 800px de large au minimum, ratio libre
• Header d'un template : 800x418px recommandé (ratio 1.91:1)
• Image carrée pour produit : 600x600px minimum
• Vignette/thumbnail : 100x100px minimum

Nota bene : WhatsApp compresse automatiquement les images téléchargées dans l'application. Votre image sera recompressée côté client, donc inutile d'envoyer des fichiers 10 MB — limitez-vous à 1-2 MB pour les meilleures performances réseau, surtout en Afrique.

Deux méthodes d'envoi d'images

Méthode 1 : URL publique (la plus simple)

Hébergez votre image sur un serveur web accessible publiquement (votre propre CDN, AWS S3, Cloudinary) et référencez l'URL directement dans la requête :

async function sendImageByUrl(to, imageUrl, caption = '') {
    const payload = {
        messaging_product: 'whatsapp',
        to: to,
        type: 'image',
        image: {
            link: imageUrl,
            caption: caption  // Texte sous l'image (max 1024 caractères)
        }
    };
    
    const response = await axios.post(API_URL, payload, { headers: HEADERS });
    return response.data;
}

// Exemple : envoyer une photo de produit avec description
await sendImageByUrl(
    '225071234567',
    'https://votre-boutique.com/images/produits/tissu-wax-2025.jpg',
    'Nouveau wax Ankara disponible ! 6 yards pour 8 500 FCFA. Répondez pour commander.'
);

Contrainte : l'URL doit être en HTTPS, accessible sans authentification, et doit retourner le bon Content-Type image. Si votre image est sur un serveur local ou derrière un firewall, utilisez la méthode d'upload.

Méthode 2 : Upload via l'API Media (recommandée pour la production)

Cette méthode upload l'image sur les serveurs Meta et retourne un media_id réutilisable pendant 30 jours :

const FormData = require('form-data');
const fs = require('fs');

async function uploadMedia(filePath, mimeType) {
    const mediaUrl = `https://graph.facebook.com/v18.0/${process.env.PHONE_NUMBER_ID}/media`;
    
    const form = new FormData();
    form.append('messaging_product', 'whatsapp');
    form.append('type', mimeType);
    form.append('file', fs.createReadStream(filePath));
    
    const response = await axios.post(mediaUrl, form, {
        headers: {
            ...HEADERS,
            ...form.getHeaders()
        }
    });
    
    return response.data.id; // media_id
}

async function sendImageByMediaId(to, mediaId, caption = '') {
    const payload = {
        messaging_product: 'whatsapp',
        to: to,
        type: 'image',
        image: {
            id: mediaId,
            caption: caption
        }
    };
    
    const response = await axios.post(API_URL, payload, { headers: HEADERS });
    return response.data;
}

// Workflow complet : upload puis envoi
async function sendLocalImage(to, filePath, caption) {
    // 1. Upload l'image
    const mediaId = await uploadMedia(filePath, 'image/jpeg');
    console.log(`Image uploadée, media_id: ${mediaId}`);
    
    // 2. Envoyer à plusieurs destinataires avec le même media_id
    await sendImageByMediaId(to, mediaId, caption);
    
    return mediaId; // Sauvegarder pour réutiliser
}

Optimisation des images pour l'Afrique

La connectivité mobile en Afrique est excellente dans les grandes villes mais peut être limitée dans les zones rurales ou lors de pics d'utilisation réseau. Optimiser vos images est une marque de respect pour vos clients et améliore les taux de livraison et d'affichage.

const sharp = require('sharp'); // npm install sharp

async function optimizeImageForWhatsApp(inputPath, outputPath, options = {}) {
    const {
        maxWidth = 1200,
        maxHeight = 1200,
        quality = 80,
        format = 'jpeg'
    } = options;
    
    await sharp(inputPath)
        .resize(maxWidth, maxHeight, {
            fit: 'inside',
            withoutEnlargement: true
        })
        [format]({ quality })
        .toFile(outputPath);
    
    const stats = fs.statSync(outputPath);
    const sizeKB = Math.round(stats.size / 1024);
    console.log(`Image optimisée : ${sizeKB} KB`);
    
    if (sizeKB > 2000) {
        // Si encore trop large, réduire la qualité
        await sharp(inputPath)
            .resize(maxWidth, maxHeight, { fit: 'inside' })
            [format]({ quality: 60 })
            .toFile(outputPath);
    }
    
    return outputPath;
}

// Pipeline complet : optimiser et uploader
async function processAndSendImage(to, originalImagePath, caption) {
    const tempPath = originalImagePath.replace('.jpg', '_optimized.jpg');
    
    await optimizeImageForWhatsApp(originalImagePath, tempPath, {
        maxWidth: 1000,
        quality: 82
    });
    
    const mediaId = await uploadMedia(tempPath, 'image/jpeg');
    await sendImageByMediaId(to, mediaId, caption);
    
    // Nettoyer le fichier temporaire
    fs.unlinkSync(tempPath);
    
    return mediaId;
}

Images dans les templates HSM

Pour les templates avec header image (messages initiés hors fenêtre 24h), l'image doit être définie lors de la création du template ou fournie dynamiquement :

async function sendTemplateWithImage(to, templateName, mediaId, bodyParams) {
    const payload = {
        messaging_product: 'whatsapp',
        to: to,
        type: 'template',
        template: {
            name: templateName,
            language: { code: 'fr' },
            components: [
                {
                    type: 'header',
                    parameters: [
                        { type: 'image', image: { id: mediaId } }
                    ]
                },
                {
                    type: 'body',
                    parameters: bodyParams.map(p => ({ type: 'text', text: p }))
                }
            ]
        }
    };
    
    const response = await axios.post(API_URL, payload, { headers: HEADERS });
    return response.data;
}

Pour les bonnes pratiques visuelles dans vos templates, consultez le guide sur les templates messages WhatsApp et la référence API WhatsApp Business.

FAQ

Q: Peut-on envoyer un GIF animé via WhatsApp API ?

R: WhatsApp supporte les GIFs animés via le type image avec le MIME type image/gif. Cependant, les GIFs sont souvent lourds et peuvent être dégradés lors de l'affichage mobile. Pour des animations, envisagez plutôt les vidéos courtes (MP4) ou les stickers animés (WebP) qui sont mieux optimisés pour mobile.

Q: Les images envoyées via URL sont-elles stockées par Meta ?

R: Meta télécharge temporairement l'image depuis votre URL pour la délivrer au destinataire. L'image est ensuite disponible dans la conversation du destinataire selon les règles de rétention WhatsApp (non précisées publiquement). Pour la confidentialité, préférez l'upload via l'endpoint /media qui vous donne plus de contrôle sur le cycle de vie de l'image.

Q: Un media_id WhatsApp peut-il être réutilisé pour plusieurs destinataires ?

R: Oui, un media_id est valide pendant 30 jours et peut être utilisé pour envoyer la même image à autant de destinataires que nécessaire. C'est l'approche optimale pour les campagnes qui envoient un visuel identique à plusieurs milliers de contacts — uploadez une fois, envoyez avec le media_id autant de fois que nécessaire.

Q: Quelle résolution recommandez-vous pour les images de produits e-commerce WhatsApp ?

R: 800x800px à 1000x1000px en JPEG 80% de qualité est le sweet spot. Assez net pour être attrayant sur un écran smartphone HD, mais suffisamment compressé pour se charger rapidement sur une connexion 3G. Évitez les images trop petites (moins de 400px) qui paraissent floues sur les écrans Retina, et les images trop grandes qui alourdissent inutilement la conversation.

Q: Comment afficher une image avant le texte dans un message WhatsApp (ordre d'affichage) ?

R: L'ordre d'affichage dans un message image est toujours : image en haut, puis caption (texte) en dessous. Ce n'est pas configurable. Si vous avez besoin d'afficher du texte au-dessus d'une image, envoyez deux messages séparés : d'abord le texte, puis l'image. Respectez un court délai entre les deux pour garantir l'ordre.

---

Optimisez vos visuels WhatsApp pour le marché africain et maximisez l'engagement. Whakup intègre la gestion des médias directement dans son interface de campagnes.