Comment préparer vos images

Comment préparer vos images
Dernière mise à jour: 10 novembre 2016, 15:57

Dans cet article :

 

Formats acceptés pour les images 

Les formats d'images acceptés dans l'application sont :
 
  • JPG (en format RGB) : Pour les images en format JPG, utilisez des images de format RGB plutôt que celles en format CMYK. Le format CMYK, qui est plutôt destiné à l'impression, n'est pas toujours supporté par les navigateurs web et peut engendrer des erreurs d'affichage dans certains logiciels courriel.
     
  • PNG (8 ou 24) : Les images de format PNG 24 ont l'avantage d'offrir une belle qualité d'image et de permettre de conserver souvent une bonne lisibilité du texte si vous en avez incorporé à votre image. L'autre avantage d'utiliser les PNG est qu'il est possible d'utiliser des PNG transparents pour créer des formes, comme un entête arrondi. Par contre, le poids des fichiers PNG, étant supérieur aux fichiers JPG, il faut utiliser ce format avec parcimonie.
     
  • GIF : Les GIF animés sont également acceptés. Pour en savoir plus sur ce format d'image, cliquez ici.
     

Poids maximal des images

Le système n’accepte pas d’images plus grosses que 10 Mo. N'oubliez pas que plus les images sont grosses, plus elles sont lourdes et plus elles sont longues à télécharger.
 
Puisque les courriels sont de plus en plus ouverts sur mobile, il faut considérer que le temps de téléchargement des images, l'usage de la bande passante et la qualité de la connexion Internet puissent devenir des contraintes pour vos lecteurs. Plusieurs usagers vont même jusqu'à bloquer automatiquement le téléchargement des images pour éviter de dépasser leur forfait Internet. Si votre courriel est composé uniquement d'images, votre membre ne verra aucun contenu dans votre courriel. Découvrez tous les désavantages d'inclure seulement des images dans vos envois en cliquant ici.
 

Résolution recommandée

La résolution recommandée est de 72 dpi. Une plus grande résolution est plutôt réservée aux images destinées à l'impression et augmentera inutilement le poids de celles-ci.
 

Taille des images

Conseil pour l'usage des blocs d'image :

Connaître la taille des blocs d'images
 
Pour connaître les dimensions recommandées de nos blocs d'image, vous n’avez qu’à ouvrir un bloc d’image. Les dimensions sont inscrites dans les propriétés de l'image. 
 
 
 
Optimiser vos images pour le mobile : Choisissez des images d'une largeur de 480 à 600 px 
 
Lorsque vous utilisez des blocs d'images, privilégiez des images dont la largeur varie entre 480 px et un maximum de 600 px, car elle pourra s'ajuster proportionnellement au format de l'image en décochant l'option "Utiliser ces dimensions"). Si votre image doit faire la pleine largeur du modèle, votre image devrait avoir 600 px. 
 
Pourquoi entre 480 et 600 px? Pour être bien visibles sur un petit écran, la plupart des images insérées dans les blocs d'images vont être ajustées pour s'afficher à la pleine largeur (ou presque) des plateformes mobile qui prennent en charge les media queries telles que le iPhone. Lorsque redimensionnées, les images dont la largeur réelle est inférieure à 480 px pourraient apparaître floues ou pixellisées. La taille des écrans étant de plus en plus grande (on a qu'à penser au iPhone 6 plus), il s'agit d'un élément à considérer lorsque vous avez plusieurs lecteurs susceptibles d'ouvrir votre courriel sur mobile.
 
Voici l'exemple d'une image insérée dans deux blocs d'image d'une largeur de 176 px. Il s'agit de la même image dans les deux blocs, mais, dans le premier cas, la largeur originale de l'image est de 176 px, donc identique à la dimension du bloc d'image. Dans le deuxième cas, la largeur originale de l'image est de 480 px. Sur un poste de travail, la différence n'est pas visible, ou presque, vous n'y verriez que du feu. Cependant, sur mobile voici comment la même image de tailles originales différentes va s'afficher. Vous pouvez voir que celle à 480 px en largeur paraît plus claire et mieux définie :
 
 
N'hésitez pas à consulter l'aperçu mobile régulièrement ou, encore mieux, testez directement sur vos appareils en utilisant l'outil "Tester mon envoi".
 
Nous vous recommandons de ne pas dépasser les 600 px en largeur et 1200 px en hauteur pour éviter que votre image ne soit compressée lors de son téléversement dans l'application : cela pourrait réduire sa qualité. Si votre image semble perdre de la qualité après son téléversement, réduisez sa taille à un maximum de 600 px en largeur et 1200 px en hauteur dans un éditeur photo et téléversez-la de nouveau dans l'application.
 
Comment conserver les proportions de son image
 
Dans les modèles réguliers et ceux faits à partir du mode régulier, le système ajustera automatiquement vos images aux dimensions recommandées du bloc d'image. Si l’image vous paraît écrasée ou étirée, décochez l’option « Utiliser ces dimensions » dans les propriétés de l'image. La largeur de l’image sera toujours contrainte à la largeur maximale du bloc, mais la hauteur s’ajustera désormais selon le ratio largeur-hauteur du fichier original. 
 
En d'autres mots, en décochant cette option, si la largeur réelle de l'image est supérieure à la largeur du bloc, l'image sera redimensionnée à la même largeur que le bloc d'image et la hauteur s'ajustera proportionnellement pour respecter le format de l'image originale. Si la largeur réelle de l'image est plus petite que la largeur du bloc d'image, l'image apparaîtra en taille réelle dans le modèle. 

 
 
 
 
Misez sur l'uniformité
 
Privilégiez l'uniformité. Choisissez des images possédant des dimensions/proportions identiques, surtout lorsqu'elles sont alignées sur la même ligne ou dans une même colonne. Si vous ne disposez pas d'images de taille semblable, modifiez celles-ci pour qu'elles soient du même format. Pour ce faire, vous pouvez utiliser l'option "Retoucher l'image" qui est disponible dans tous les blocs d'images. Les outils pour recadrer et redimensionner les images vous aideront à obtenir des images de mêmes proportions.
 
  

Conseils pour les images ajoutées dans les blocs de texte

Vérifiez la largeur de vos images avant leur ajout
 
Contrairement aux blocs d'image, les images insérées dans un bloc de texte ne sont pas contraintes aux dimensions du bloc, elles y apparaissent en taille réelle. Il faudra donc vous assurer qu'elles sont du bon format avant leur insertion. Si votre image dépasse la largeur du bloc de texte, cela pourrait créer des problèmes de mise en page comme désaligner et décentrer le courriel ou même déplacer des éléments!
 
Note : Pour faciliter la mise en page de votre modèle et obtenir de meilleurs résultats, il est préférable d'utiliser les blocs d'images pour ajouter celles-ci. Insérez-les dans les blocs de texte que lorsque ceci est absolument nécessaire.
 
Attention aux petites images insérées dans les blocs de texte pour l'affichage sur mobile
 
Portez une attention particulière aux petites images insérées dans les blocs de texte comme les logos de réseaux sociaux ou les petites icônes. Sur mobile, toute image insérée dans un bloc de texte est automatiquement redimensionnée pour s'afficher à la pleine largeur de l'écran. Pour éviter que ces images soient floues et surdimensionnées sur mobile, vous devrez ajouter dans les propriétés de l'image la classe CSS "noresize".
 
Voici à quoi ressemble de petites images insérées dans un bloc de texte sur mobile sans leur avoir appliqué la classe "noresize" :
 
 
Pour ce faire :
  1. Cliquez avec le bouton droit de votre souris sur votre image.
  2. Dans le menu contextuel, sélectionnez "Propriétés de l'image".

     
  3. Sélectionnez l'onglet Avancé.
  4. Ajoutez le texte "noresize" dans le champ "Class CSS". Et cliquez sur "OK".

     
  5. Encore une fois, vérifiez la modification dans l'aperçu mobile.

     

Conseils pour les images insérées dans un modèle expert

En mode expert, l’application ne redimensionne pas automatiquement les images selon l’espace disponible. Vous devez donc vous assurer que vos images sont du bon format avant de les envoyer sur le serveur. Voici quelques outils d’édition d’image en ligne gratuits pour vous aider : Pixlr, PicResize, ResizeYourImage.
 
Note : Si vos images sont trop grandes, il se peut qu’elles dépassent la limite de 10 Mo acceptée par le système. De plus, votre courriel sera long à l’affichage. C’est pourquoi il est préférable de les retravailler plutôt à l’avance.
 

Nous joindre

Formulaire de contact