Optimiser les images de sa lettre

Gérer et optimiser vos images dans vos lettres d'informations.

Le choix du format HTML comme format de diffusion de vos lettres d'informations, vous permet de mettre en valeur votre message par l'insertion d'images et d'illustrations graphiques ce qui va améliorer la lecture de votre message en la rendant plus animée.
Généralement, ces images proviennent soit de votre bibliothèque d'entreprise, soit d'une bibliothèque d'images que vous aurez préalablement sélectionné sur le web. Dans la majorité des cas, les images choisis ne sont pas à la bonne dimension, au bon poids ou parfois vous souhaitez ne récupérer qu'une partie de l'image. Sans les bons outils, nous sommes souvent désemparées lorsqu'il faut optimiser, retailler ou modifier le format d'une image.
Notre article a pour objectif de vous donner quelques pistes afin de réaliser ce type d'opération sans engloutir votre budget communication.

Vous trouverez sur le net, de nombreux logiciels qui sont capables de vous permettre de retailler, d'extraire ou d'optimiser vos images. Loin d'être exhaustif, nous avons sélectionné et testé trois applications sur les environnements Mac et PC. L'investissement des deux premières applications restent raisonnables, un peu moins pour la troisième, mais on ne pouvait pas passer à côté de la référence actuelle du traitement d'image qu'est Photoshop.

Même si aujourd'hui la bande passantes des réseaux est de plus en plus performante, l'optimisation de vos images va vous permettre d'alléger le poids global de votre lettre et favoriser un affichage plus rapide dans les gestionnaires de courriers de vos destinataires.

PHOTOFILTRE	PIXELMATOR	PHOTOSHOP
Compatible PC Version gratuite (selon usage) et version Pro . Budget inférieur à 50€.	Compatible MAC Budget inférieur à 50€	Compatible MAC et PC Budget supérieur à 400€
PROCEDURE Commencer par effectuer une copie de sauvegarde de votre image origine. ♦ Pour recadrer/rogner votre image : Ouvrir votre copie d'image avec Photofiltre Votre écran se présente avec votre image au centre, une barre horizontale de menus et d'outils dans le haut, une barre verticale d'outils à droite. Sélectionner dans la barre d'outils, l'outil "Sélection" . Sélectionner avec la souris la partie de l'image que vous souhaitez conserver. La partie sélectionnée est encadrée par un pointillé. Sélectionner dans le menu "Image", le sous-menu "Recadrer" (ou utiliser le raccourci Maj+ctrl+H). Il ne vous reste plus à l'écran que la partie souhaitée. ♦ Pour redimensionner votre image : Sélectionner dans le menu "Image", le sous-menu "Taille de l'image". Une fenêtre apparaît vous permettant de saisir vos paramètres. Cocher l'option 'Conserver les proportions" pour effectuer un redimensionnement homothétique. Saisir la longueur ou la hauteur en pixels. Saisir la résolution (généralement 72 pour le web) puis valider. ♦ Pour sauvegarder l'image modifiée : Sélectionner dans le menu "Fichier", le sous-menu "Enregistrer sous". Choisir le format de l'image (gif ou jpeg). Eviter "png" pour l'emailing. Sélectionner le répertoire d'enregistrement et valider.	PROCEDURE Commencer par effectuer une copie de sauvegarde de votre image origine. ♦ Pour recadrer/rogner votre image : Ouvrir votre copie d'image avec Pixelmator Votre écran se présente avec votre image au centre, une barre horizontale de menus dans le haut, une barre verticale d'outils à gauche, deux autres fenêtres sur la droite. Sélectionner dans la barre d'outils, l'outil "Rogner" . Sélectionner avec la souris la partie de l'image que vous souhaitez conserver. La partie non sélectionnée est opacifiée. Valider votre opération en cliquant en haut à droite sur le bouton "Rogner" . Il ne vous reste plus à l'écran que la partie souhaitée. ♦ Pour redimensionner votre image : Sélectionner dans le menu "Image", le sous-menu "Taille de l'image". Une fenêtre apparaît vous permettant de saisir vos paramètres. Cocher l'option 'Echelle proportionnelle" pour effectuer un redimensionnement homothétique. Saisir la longueur ou la hauteur en pixels. Saisir la résolution (généralement 72 pixels/pouce pour le web) puis valider. ♦ Pour sauvegarder l'image modifiée : Sélectionner dans le menu "Partage", le sous-menu "Exporter pour le web". Choisir les options en haut de l'image telles que • le format de l'image (gif ou jpeg). Eviter "png" pour l'emailing; • la qualité de 0 à 100%. Le poids de l'image s'affiche à gauche, en jouant avec ce paramètre, il est possible de le baisser. Il faut alors trouver le bon compromis entre poids et qualité d'image. Cliquer sur suivant pour finaliser l'enregistrement de votre image et sélectionner le répertoire d'enregistrement.	PROCEDURE Commencer par effectuer une copie de sauvegarde de votre image origine. ♦ Pour recadrer/rogner votre image : Ouvrir votre copie d'image avec Photoshop Votre écran se présente avec votre image au centre, une barre horizontale de menus dans le haut, une barre verticale d'outils à droite ou à gauche, d' autres fenêtres sur la droite. Sélectionner dans la barre d'outils, l'outil "Rogner" . Sélectionner avec la souris la partie de l'image que vous souhaitez conserver. La partie non sélectionnée est opacifiée. Valider votre opération en cliquant en haut à droite sur le bouton "Valider" . Il ne vous reste plus à l'écran que la partie souhaitée. ♦ Pour redimensionner votre image : Sélectionner dans le menu "Image", le sous-menu "Taille de l'image". Une fenêtre apparaît vous permettant de saisir vos paramètres. Cocher l'option 'Echelle proportionnelle" pour effectuer un redimensionnement homothétique. Saisir la longueur ou la hauteur en pixels. Saisir la résolution (généralement 72 pixels/pouce pour le web) puis valider. ♦ Pour sauvegarder l'image modifiée : Sélectionner dans le menu "Fichier", le sous-menu "Enregistrer pour le web". Choisir les options à droite de l'image telles que • le format de l'image (gif ou jpeg). Eviter "png" pour l'emailing; • la qualité. Le poids de l'image s'affiche sous l'image, en jouant avec ce paramètre, il est possible de le baisser. Il faut alors trouver le bon compromis entre poids et qualité d'image. Valider pour finaliser l'enregistrement de votre image et sélectionner le répertoire d'enregistrement.

Voilà, avec ces informations, vous devriez être capable à présent de retailler ou d'optimiser vos images pour vos lettres d'informations.

Chantal KERMAIDIC
Responsable de la communication

Images bloquées, quelles parades ?

Impact de l'attribut "alt" dans les images de votre lettre.

Les images d'une newsletter sont parfois bloquées à l'arrivée sur les postes destinataires en fonction de  l'outil de messagerie utilisé ou de son paramétrage. Votre objectif est d'arriver à rendre votre lettre suffisament attractive  pour que votre destinataire s'y intéresse même si les images sont bloquées.
Dans cette situation, qui ne dépend malheureusement pas de vous, les questions suivantes se posent :

• comment réussir à intéresser votre destinataire ?
• comment éviter qu’il ignore ou efface votre email immédiatement?
• comment lui suggérer d’aller vers votre site ?
• comment éviter qu’il ne se désabonne ?
• comment l’inciter à débloquer les images ?

Dans le code HTML de votre lettre, l'insertion d'une image nécessite au minimum l'ajout du code : <img src="nom du fichier"  />
Pour faciliter la mise en page,  les valeurs de longueur et largeur sont généralement renseignés ainsi qu'un texte alternatif :  <img src="nom du fichier" height="hauteur" width="largeur" alt="mon image" />
Dans la réalisation d'une lettre d'information il est fortement conseillé de renseigner les attribut de taille de l'image.
D'autres attributs existent permettant de gérer la position de l'image (droite, gauche, ...) ainsi que sa distance par rapport au texte environant (horizontalement, verticalement,).
Dans cet article, nous allons nous intéresser de plus près à l'attribut "alt".
Comme énoncé plus haut, l'attribut "alt" (pour "alternatif") permet de définir le texte à afficher en lieu et place de l'image si celle-ci ne s'affiche pas suite à un problème de connexion, un problème d'indisponibilité du serveur qui héberge l'image, etc....
Renseigner ce champ évite dans certain cas, de trouver sur sa page (lorsque les images sont bloquées) des images de remplacement du style :

ou

Il devient donc logique de se poser les bonnes questions lors de la réalisation de son message :

• Dans quels cas faut-il renseigner ce champ ?
• Quel type de texte faut-il insérer ?
• Comment mettre en valeur ce texte ?

Si le texte de subsitution s'affiche en lieu et place de l'image, il faut avoir en tête que ce contenu va disposer de l'espace initialement prévu pour l'image.Cette contrainte doit être prise en compte au moment de la rédaction du texte.
Bien sur tous les images n'ont pas besoin de disposer d'un texte alternatif. En effet, certaines images qui composent votre lettre sont purement décoratives (angles arrondis, des séparations graphiques, ...) et ne nécéssitent aucun texte de subsitution.Malgrè tout, si nous voulons éviter "l'affreuse image bloquée", nous allons renseigner notre attribut "alt" avec un seul caractère discret (du style "." ou "-" par exemple). Dans la suite de cet article, nous vous montrerons comment nous pouvons jouer sur son style CSS pour le rendre encore plus discret si nécessaire.
Pour des images du type puce imagée, nous mettrons comme attribut un caractère symbolisant une puce (point, flèche, ...).
Pour des images du type bouton à cliquer, l'attribut "alt" sera renseigné selon le cas par un texte du type "cliquez ici pour vous inscrire". Le destinataire saura ainsi où cliquer et pour quelle raison sans voir l'image.
Pour substutuer un logo, le nom de la société, de la marque ou du produit qu'il symbolise peut-être utilisé.
Pour une "grosse" image contenant un texte (avec une police particulière ou un fond spécifique), utilisez l'attribut pour réécrire le texte ou l'accroche. Attention, si pour des raisons d'intégration votre image a été découpée en plusieurs images, évitez de renseigner l'attribut de chaque morceau avec un texte. Faites-le sur le ou les plus grosses images, ou l'image la mieux placée et pour les autres mettez juste un seul caractère discret comme texte de subsitution.

A ce stade, si les images sont bloquées, votre lettre devrait déjà être plus lisible et le code HTML de la déclaration de votre image devrait ressembler à ceci :<img src="nom du fichier" height="hauteur" width="largeur" border="0" alt="mon texte de substitution" /> (hormis les autres attributs d'image qui auraient pu être renseignés).

Nous allons à présent, nous intéresser à l'enrichissement du texte de substitution afin de le "styler" pour redonner un peu plus de peps à notre lettre. Effectivement, il est tout à fait possible d'appliquer un style de texte à notre image qui ne va en aucun cas influer sur le rendu de l'image, mais qui s'appliquera au texte alternatif si celui-ci était présenté. Il est quand même à signaler que cet artifice technique, n'est pas reconnue par tous les outils de messagerie mais par la plupart.
Pour vous donner une exemple, nous allons travailler sur le texte de substitution de votre logo.

• La taille de police pour être assez visible pourra être augmenter à 24px ou plus.
• La couleur de la police pourra être choisie en fonction de la couleur dominante de votre charte graphique.
• Si vous avez une couleur de fond foncée, la couleur de votre texte de substitution devra être d'une couleur clair, pour qu'il soit visible (voir l'exemple ci-dessous, le texte de substitution apparaît en blanc).

Votre code devrait ressembler à : <img src="nom du fichier" height="hauteur" width="largeur" Alt="mon texte de substitution" style="font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif; font-size: 12px; color: #fff;"/>
Pour les textes de subsitutions contenant les caractères "discrets" cités plus hauts, vous pouvez minimiser leur présence choisissant une taille de police très petite.
Voici ci-dessous un exemple de mise en valeur de newsletter avec l'utilisation de l'attribut Alt
Voilà, à vous de jouer avec le "alt" à présent !
Votre message pourra désormais avoir un impact plus percutant même si les images sont bloquées...
Chantal KERMAIDIC
Reponsable de la communication