Découper les images de vos emails : pourquoi et comment

Si vous vous êtes déjà demandé comment des marques comme Nike, Zara ou Glossier envoient des emails avec des designs parfaits pixel qui semblent identiques dans chaque client de messagerie — y compris Outlook — la réponse est fractionnement de l'image.

Le fractionnement de l'image d'email est le processus de découpe d'un e-mail complet en sections horizontales, chacune sauvegardée comme un fichier d'image séparé, puis les empilant ensemble en utilisant un HTML simple. Il s'agit d'une technique fondamentale de marketing par courriel depuis plus d'une décennie, et elle demeure l'une des façons les plus fiables d'envoyer des campagnes visuelles.

Qu'est-ce que le fractionnement de l'image par courriel?

Au lieu d'envoyer une image massive comme votre email entier (qui crée une seule zone cliquable), la division d'image divise votre conception en plusieurs bandes horizontales — généralement 4 à 8 sections.

Chaque section devient une section séparée <img> tag dans le HTML de votre email, empilé verticalement à l'intérieur d'une table. Lorsque l'email rend, les sections s'alignent parfaitement pour recréer le design original. Mais maintenant chaque section peut se lier à une URL différente.

La structure HTML est minimale — juste une série de lignes de table contenant des images. Pas de CSS complexe, pas de requêtes multimédias réactives, pas de hacks Outlook. Cette simplicité est précisément la raison pour laquelle la technique fonctionne de façon aussi fiable.

Pourquoi les marques divisent leurs courriels

Le fractionnement de l'image n'est pas une solution — c'est une stratégie délibérée qui résout plusieurs défis majeurs du marketing par courriel:

Rendu visuel dans les clients de messagerie

Les courriels HTML semblent différents dans chaque client de messagerie. Outlook brise les mises en page, les styles de bandes Gmail et Yahoo rend les choses différemment de Apple Mail. Avec le fractionnement d'images basé sur l'image, votre email est une série d'images — et les images rendent partout identique. Ce que vous concevez est exactement ce que les abonnés voient.

Immunité en mode sombre

Le mode foncé peut inverser les couleurs des éléments HTML — tourner les fonds blancs sombre, sombre lumière du texte, et généralement causer des ravages sur des schémas de couleurs soigneusement conçus. Mais en mode sombre ne peut pas modifier les pixels à l'intérieur d'une image. Les e-mails coupés ressemblent en mode clair et en mode sombre. En savoir plus sur la conception d'email en mode sombre.

Typographie personnalisée

Les courriels HTML sont limités aux polices de sécurité Web (Arial, Georgia, Verdana) dans la plupart des clients de messagerie. Les polices web personnalisées fonctionnent dans Apple Mail mais échouent dans Outlook et Gmail. Avec les courriels basés sur l'image, toute police prise en charge par votre outil de conception rend parfaitement — parce que le texte fait partie de l'image.

Plusieurs sections cliquables

Chaque section peut être reliée à une URL différente. Votre en-tête peut lier à votre page d'accueil, la section produit à la page produit, et le pied de page CTA à votre page vente. C'est la principale raison technique du fractionnement de l'image plutôt que d'envoyer une grande image.

Comment décider où diviser

Le placement de vos coupures détermine à la fois la fonctionnalité et la fiabilité du courriel final. Suivez ces lignes directrices :

Règle 1: Coupe entre les sections de contenu

Points de division naturels dans votre conception — entre l'en-tête et le héros, entre les sections de produits, entre le corps et le pied de page. Ce sont les endroits les plus propres à section parce qu'il y a généralement une limite horizontale claire.

Règle 2: Chaque cible de lien obtient sa propre fraction

Si deux parties de votre lien de conception vers des URLs différentes, elles doivent être des sections séparées. Une bannière héro reliant une page de collection et un bloc de produits reliant une page de produit ne peut pas être dans la même section.

Règle 3: Ne pas couper à travers le contenu fluide

Évitez de diviser l'image au milieu d'un paragraphe, d'une image de produit ou d'un dégradé qui s'étend sur deux sections. Si la limite de la section tombe au milieu du contenu visuel, le désalignement devient visible, surtout dans Outlook.

Règle 4: Gardez une zone tampon

Laisser au moins 5-10px de rembourrage au-dessus et au-dessous de chaque limite de section. Cela empêche les problèmes d'alignement où les clients ajoutent de petits écarts entre les images. Une zone tampon de couleur solide rend tout micro-gap invisible.

Nombre optimal de sections

Le spot sucré pour la plupart des courriels promotionnels est 4-8 sections:

• 3-4 sections: Mise en page simple — en-tête, héros, corps, pied de page. Chaque lien vers une destination.
• 5-6 sections: Standard promotionnel — header, héro, 2-3 sections de produits, pied de page CTA.
• 7-8 sections: Campagnes complexes avec plusieurs caractéristiques de produit et zones cliquables.
• 8+ sections: Possible mais rarement nécessaire. Plus de sections signifient plus de HTML, plus de possibilités de lacunes, et plus de fichiers à gérer.

Une bonne règle : section autant de fois que vous avez des cibles de lien distinctes, plus un pour toute section d'en-tête/de pied non cliquable.

Compression et taille du fichier

Chaque section doit être comprimée individuellement. Le poids total de toutes les images combinées devrait rester Moins de 800Ko pour le chargement rapide sur les réseaux mobiles. Cible 100-150Ko par section pour un courriel typique de 6 sections.

Exportations 2x résolution (1200px large pour un email de 600px) pour une netteté d'affichage rétine, puis compresser à 75-85% de qualité JPEG. Résultat : images pointues à des tailles de fichiers raisonnables. Voir notre guide complet de compression pour des recommandations d'outils détaillées et des paramètres de qualité.

Problèmes et solutions courants

Lacunes entre les sections dans Outlook

C'est le problème le plus notoire de fractionnement d'images. Outlook ajoute de petites lacunes (2-5px) sous les images en raison de son moteur de rendu. La correction est une combinaison de propriétés CSS sur l'image et sa cellule de table :

• display: block sur tous <img> balises
• font-size: 0 et line-height: 0 le <td> éléments
• Explicite largeur et hauteur attributs sur chaque image
• frontière et cellpadding"0" cellpacing"0" sur la table

Étalonnage mobile

Définir toutes les images à max-width: 100% avec height: auto Ainsi, ils s'échellent proportionnellement sur des écrans plus petits. Puisque les e-mails tranchés sont intrinsèquement monocolonne et pleine largeur, l'échelle mobile est simple — chaque section s'étend simplement à la largeur du port de vue.

Accessibilité

Les courriels basés sur l'image ont une réelle limitation d'accessibilité : les lecteurs d'écran ne peuvent lire que du texte alternatif, et non du texte dans les images. Pour chaque section, écrivez un texte alternatif concis et descriptif (moins de 125 caractères) qui communique l'information clé. Pour un contenu critique comme le lien de désabonnement, envisagez d'utiliser un pied de page HTML en direct sous les sections d'image.

La division de l'image Flux de travail : Manuel vs. Outils

Flux de travail manuel (Photoshop / Figma)

1. Concevoir votre email à 1200px large (2x pour la rétine)
2. Placer des guides horizontaux à chaque limite de section
3. Exporter chaque section comme une image séparée (JPEG ou PNG)
4. Compresser chaque image avec TinyPNG ou Squoosh
5. Construisez la structure de table HTML manuellement ou avec un modèle
6. Ajouter des liens à chaque image
7. Envoi à Klaviyo et essai

Ce processus prend 30-60 minutes par email une fois que vous êtes expérimenté. Le codage HTML manuel et les étapes de compression individuelle sont les plus grands puits de temps.

Flux de travail assisté par des outils

Des outils comme EmailSlicer automatisent les pièces répétitives : téléchargez votre design complet, définissez où à la section (ou laissez l'outil suggérer des coupes), compressez chaque section automatiquement et exportez directement à Klaviyo. Ce qui prend 30-60 minutes manuellement peut être fait en 5-10 minutes.

Quand NE PAS diviser

Le fractionnement d'image est le bon choix pour la plupart des campagnes de marketing, mais il y a des cas clairs où ce n'est pas approprié :

• Courriels transactionnels : Les confirmations de commande, les notifications d'expédition et les réinitialisations de mot de passe nécessitent des données dynamiques (détails de commande, numéros de suivi) qui ne peuvent pas être prises en images. Utilisez HTML.
• Recommandations personnalisées du produit : Les blocs de produits dynamiques de Klaviyo tirent différents produits pour chaque abonné. Cela nécessite un rendu HTML.
• Contenu du texte de longue durée: Newsletters et e-mails éducatifs où le texte lui-même est la valeur. Le texte en direct est consultable, traduit et accessible.
• Campagnes essentielles pour l'accessibilité : Si une partie importante de votre public utilise des lecteurs d'écran ou que les images sont désactivées par défaut, les courriels HTML communiquent mieux.

La meilleure approche est souvent hybride : des sections basées sur l'image pour le contenu visuel de marque, combinées avec des sections HTML pour les données dynamiques. Lire notre comparaison complète des courriels basés sur l'image et HTML.

Questions fréquentes

Combien de sections un courriel devrait-il avoir?

4-8 sections pour un email promotionnel standard. Le nombre dépend du nombre de zones cliquables distinctes dont vous avez besoin — chaque section reliant à une URL différente obtient sa propre section.

Les e-mails tranchés fonctionnent-ils sur mobile?

Oui. Avec une largeur de 600px, les images tranchées s'échellent proportionnellement sur les écrans mobiles. Chaque section s'étend jusqu'à la largeur du port et s'empile verticalement. Jeu max-width: 100% sur toutes les images pour une échelle appropriée.

Pourquoi des écarts apparaissent-ils entre les sections d'Outlook ?

Le moteur de rendu d'Outlook ajoute l'espacement par défaut sous les images. Répare avec display: block sur les images, font-size: 0 sur les cellules de table, et les attributs explicites largeur/hauteur sur chaque balise d'image.

Puis-je utiliser des emails tranchés à Klaviyo?

Oui. Téléchargez chaque section comme bloc d'image dans l'éditeur de glisser-déposer de Klaviyo, empilez-les verticalement et ajoutez des liens individuellement. Vous pouvez mélanger des sections basées sur l'image avec des blocs de contenu codés en HTML.

L'image se divise-t-elle de la même façon que les cartes d'images?

C'est pas vrai. Les cartes d'images utilisent une seule image avec des points chauds de coordonnées cliquables. Le fractionnement de l'image divise l'image en fichiers séparés, chacun avec son propre lien. Le fractionnement des images est beaucoup plus fiable parmi les clients de messagerie — les cartes d'images ont un support incohérent, en particulier sur mobile.