L'ajout d'une image d'arrière-plan est sans doute le moyen le plus simple de rendre les courriels à la fois plus beaux et plus fonctionnels. Mais tous les clients de messagerie prennent-ils en charge cette fonctionnalité ?
Prise en charge des images d'arrière-plan
Le principal problème lié à l'ajout d'images d'arrière-plan dans les courriels est qu'elles ne sont pas prises en charge par tous les clients de messagerie pour des raisons de sécurité ou autres.
Webmail : Pas d'ennui
L'affichage des images d'arrière-plan sur les clients de webmail est l'opération la moins difficile : toutes les grandes plates-formes prennent en charge cette fonctionnalité. La seule exception est Yahoo ! Mail qui supprime la syntaxe des slashs et rend la valeur invalide.
Un sac mobile hétéroclite
Environ la moitié des applications de messagerie populaires peuvent afficher des images d'arrière-plan, et les autres offrent une prise en charge au moins partielle. Le problème le plus courant est l'absence de prise en charge de la propriété CSS background-attachment : fixed.
Les ordinateurs de bureau sont source d'ennuis
Les clients de messagerie basés sur un ordinateur de bureau sont ceux qui ont le plus de difficultés avec les images d'arrière-plan. Actuellement, seuls Apple Mail 10, Outlook pour Mac et Thunderbird sont entièrement compatibles, tandis que les autres clients de bureau offrent une prise en charge partielle ou inexistante.
Le tableau ci-dessous donne un aperçu plus détaillé de la prise en charge de l'arrière-plan par les différents clients de messagerie.
Avantages de l'image de fond
L'un des principaux avantages des images d'arrière-plan est qu'elles peuvent être recouvertes d'un contenu HTML supplémentaire. En effet, contrairement aux images ordinaires, les images d'arrière-plan peuvent comporter des couches d'informations supplémentaires. Par exemple, vous pouvez avoir des images, du texte ou des appels à l'action supplémentaires dans le même espace.
Jetez un coup d'œil à l'e-mail promotionnel de Salesforce pour voir la superposition en action :
Un autre avantage de l'utilisation d'images d'arrière-plan au lieu d'un texte dans l'image elle-même est que tout contenu HTML placé au-dessus de l'image reste lisible même si les images sont désactivées par le client de messagerie. En d'autres termes, les images d'arrière-plan sont un excellent moyen de rendre vos messages électroniques plus accessibles.
Codage des images d'arrière-plan dans les courriels
Il existe deux méthodes principales pour insérer une image d'arrière-plan dans le contenu d'un courrier électronique :
- Définition des attributs HTML d'un tableau ou d'une cellule de tableau (éléments table et td, respectivement)
- Ajouter un style CSS à un tableau ou à une cellule
Utilisation des attributs de tableau HTML
L'utilisation de l'attribut background sur un tableau ou une cellule de tableau est la plus ancienne façon de mettre en œuvre la fonctionnalité d'image d'arrière-plan. Bien que les développeurs considèrent aujourd'hui cette méthode comme démodée et obsolète, elle fonctionne toujours en raison de la compatibilité ascendante du langage HTML. En fait, vous indiquez au client de messagerie qu'il doit rendre une image d'arrière-plan stockée à l'URL spécifiée. Voici un exemple de code :
L'un des attributs d'arrière-plan les plus utiles est l'attribut background-size (taille de l'arrière-plan), qui vous permet d'indiquer la taille de l'image par rapport à l'espace disponible. Cet attribut est très utile sur les appareils mobiles disposant d'un espace limité. Au lieu de laisser l'appareil réduire l'image (ce qui est souvent le comportement par défaut), vous pouvez utiliser des valeurs telles que cover ou contain pour afficher l'image de manière plus élégante.
Ajouter des propriétés CSS
Une méthode plus moderne et plus souple consiste à utiliser la propriété CSS background-image en ligne sur un conteneur div ou td. La propriété background-image utilise à nouveau une URL comme source d'image d'arrière-plan.
Il est important de savoir que, quelle que soit la méthode choisie (attributs HTML ou propriétés CSS), vous ne pourrez pas modifier les dimensions ou la position de l'image d'arrière-plan. En outre, si la dimension de l'image d'arrière-plan
est plus grand que l'image elle-même, l'image se répète. Cependant, vous pouvez éviter ces situations en
- empêcher la répétition de l'image d'arrière-plan (propriété background-repeat:no-repeat),
- spécifier la position de l'arrière-plan (propriété background-position)
Coder le contenu d'un courriel en HTML n'est évidemment pas la tasse de thé de tout le monde. C'est pourquoi nous avons inclus la configuration de l'image d'arrière-plan au sein même de l'application JungleMail L'interface. Il suffit de sélectionner une section de contenu, d'activer l'image d'arrière-plan de la section à droite, de sélectionner une image, de cocher quelques cases pour une meilleure mise en page, et le tour est joué.
A retenir
- Dans le codage des courriels, il est généralement conseillé d'utiliser des propriétés qui existent depuis longtemps. Plus la règle HTML ou CSS est ancienne, plus elle a de chances de fonctionner. En gardant cette règle à l'esprit, il n'est pas surprenant que l'attribut background (arrière-plan) d'un tableau soit le mieux supporté par les clients de messagerie.
- Pour plus de sécurité, il est toujours bon d'avoir un texte ALT pour vos images. Indiquez également la largeur et la taille de votre image : votre texte ALT disposera ainsi d'un conteneur d'affichage lorsque les images sont désactivées. Si vous ne précisez pas les dimensions, certains clients de messagerie réduiront cette zone en même temps que votre texte ALT.
- Nous vous recommandons également de spécifier une couleur de repli en utilisant l'attribut bgcolor. Ainsi, même si l'image d'arrière-plan ne s'affiche pas, le contenu de votre courriel sera lisible avec la couleur de repli.
Donnez une nouvelle dimension à vos communications internes
Essayez gratuitement l'outil de newsletter JungleMail !
Démarrage libre