L'importance de la taille des fichiers email

Email

1 min read

L'importance de la taille des fichiers email

Email

1 min read

L'importance de la taille des fichiers email

Lorsque nous parlons de tailles de fichiers dans les emails, nous parlons vraiment de 3 sujets : la taille du fichier HTML envoyé, la taille des ressources externes et la taille totale chargée. Nous voulons garder toutes ces tailles de fichiers aussi petites que possible, mais quelles sont les tailles maximales et quel objectif devrions-nous viser ?

Taille de fichier HTML

La taille du fichier HTML est la taille du fichier .html qui est effectivement envoyé. Cette taille de fichier n'inclut pas la taille des images incluses, car celles-ci seraient liées à partir de ce fichier html et téléchargées lors de l'ouverture.

La taille maximale recommandée est de 100 Ko, car toute valeur supérieure peut entraîner des problèmes de délivrabilité et d'affichage. Par exemple, Gmail coupera votre html à 102 Ko. La coupure cachera la fin de votre email et pourra casser votre mise en page.

La plupart des emails devraient facilement être en dessous de 50 Ko. Cependant, parfois des améliorations progressives complexes ou un grand nombre de contenus de campagne entraînent une taille de fichier plus grande. Si cela se produit, il existe plusieurs manières de réduire la taille de votre fichier HTML.

  • Nettoyez votre code. L'email évolue constamment et nous voyons beaucoup de modèles avec du code obsolète. Un nettoyage rapide peut économiser quelques Ko.

  • Ne codez pas excessivement. Certains modèles ont du code supplémentaire qui n'est tout simplement pas nécessaire. Le pire coupable est l'ajout d'éléments de tableau supplémentaires. La plupart des mises en page peuvent être réalisées avec 5-10 tableaux, mais nous voyons souvent du code avec 30-40 tableaux. Moins de tableaux a également l'avantage supplémentaire de rendre votre code plus facile à lire.

  • Déplacez une partie du code de HTML vers CSS. Il n'est pas encore sûr de déplacer tous vos styles vers CSS, mais si cela est fait correctement, déplacer certains styles en ligne vers des styles intégrés peut aider à réduire le code.

  • Simplifiez votre design. Une autre option est de revenir à l'étape de conception. Les emails à une seule colonne utilisent beaucoup moins de code.

  • Minimisez votre code. Minimiser le code supprimera les espaces et commentaires inutiles. Cela peut avoir un effet énorme, mais soyez prudent car de nombreux ESP imposent une longueur de ligne maximale qui pourrait forcer un saut de ligne et casser le code.

Taille des External Assets

La taille des ressources externes est la taille de toutes vos images et feuilles de style externes. Puisque les tailles externes sont rares, nous nous concentrerons davantage sur les images pour le moment.

Si vous utilisez des images de fond et des media queries, il est possible que, dans certains environnements, tout ne soit pas téléchargé pour chaque utilisateur. Mais, souvenez-vous que même si vous définissez display:none;  sur un élément <img>, il sera tout de même téléchargé. Il n'y a actuellement aucun moyen d'empêcher cela.

La taille maximale pour la plupart des images est de 100 Ko, mais si vous avez une grande image haute résolution ou un gif animé, cela pourrait atteindre 500 Ko. Cependant, c'est davantage une question de taille totale, que nous couvrirons dans la section sur la taille totale de l'e-mail chargé.

Il existe de nombreuses ressources pour aider à comprimer les tailles d'image :

  • ImageOptim – sur Mac, ou en tant que service web

  • Caesium – sur Windows

  • CDN –  De nombreux CDN ont une optimisation d'image intégrée. Certains ajusteront même la compression en fonction de la bande passante disponible.

Voici quelques autres conseils que nous recommandons :

  • Assurez-vous d'utiliser le format le plus approprié, .jpg pour les photos, .gif pour les graphiques et .png lorsque vous avez besoin de canaux alpha

  • Simplifiez votre design. Retournez à l'étape de conception pour utiliser moins d'images, des images plus petites ou des images plus simples qui peuvent être compressées à des tailles plus petites.

La taille des ressources externes est la taille de toutes vos images et feuilles de style externes. Puisque les tailles externes sont rares, nous nous concentrerons davantage sur les images pour le moment.

Si vous utilisez des images de fond et des media queries, il est possible que, dans certains environnements, tout ne soit pas téléchargé pour chaque utilisateur. Mais, souvenez-vous que même si vous définissez display:none;  sur un élément <img>, il sera tout de même téléchargé. Il n'y a actuellement aucun moyen d'empêcher cela.

La taille maximale pour la plupart des images est de 100 Ko, mais si vous avez une grande image haute résolution ou un gif animé, cela pourrait atteindre 500 Ko. Cependant, c'est davantage une question de taille totale, que nous couvrirons dans la section sur la taille totale de l'e-mail chargé.

Il existe de nombreuses ressources pour aider à comprimer les tailles d'image :

  • ImageOptim – sur Mac, ou en tant que service web

  • Caesium – sur Windows

  • CDN –  De nombreux CDN ont une optimisation d'image intégrée. Certains ajusteront même la compression en fonction de la bande passante disponible.

Voici quelques autres conseils que nous recommandons :

  • Assurez-vous d'utiliser le format le plus approprié, .jpg pour les photos, .gif pour les graphiques et .png lorsque vous avez besoin de canaux alpha

  • Simplifiez votre design. Retournez à l'étape de conception pour utiliser moins d'images, des images plus petites ou des images plus simples qui peuvent être compressées à des tailles plus petites.

La taille des ressources externes est la taille de toutes vos images et feuilles de style externes. Puisque les tailles externes sont rares, nous nous concentrerons davantage sur les images pour le moment.

Si vous utilisez des images de fond et des media queries, il est possible que, dans certains environnements, tout ne soit pas téléchargé pour chaque utilisateur. Mais, souvenez-vous que même si vous définissez display:none;  sur un élément <img>, il sera tout de même téléchargé. Il n'y a actuellement aucun moyen d'empêcher cela.

La taille maximale pour la plupart des images est de 100 Ko, mais si vous avez une grande image haute résolution ou un gif animé, cela pourrait atteindre 500 Ko. Cependant, c'est davantage une question de taille totale, que nous couvrirons dans la section sur la taille totale de l'e-mail chargé.

Il existe de nombreuses ressources pour aider à comprimer les tailles d'image :

  • ImageOptim – sur Mac, ou en tant que service web

  • Caesium – sur Windows

  • CDN –  De nombreux CDN ont une optimisation d'image intégrée. Certains ajusteront même la compression en fonction de la bande passante disponible.

Voici quelques autres conseils que nous recommandons :

  • Assurez-vous d'utiliser le format le plus approprié, .jpg pour les photos, .gif pour les graphiques et .png lorsque vous avez besoin de canaux alpha

  • Simplifiez votre design. Retournez à l'étape de conception pour utiliser moins d'images, des images plus petites ou des images plus simples qui peuvent être compressées à des tailles plus petites.

Taille d'email entièrement chargée

C'est la taille totale de tout lorsque l'e-mail est ouvert et tout est téléchargé. Cela peut varier selon l'environnement où l'e-mail est ouvert.

Le principal problème ici est le temps qu'il faut à l'e-mail pour se charger. Vous allez probablement tester vos e-mails dans un bureau avec une connexion très rapide, mais beaucoup de vos destinataires peuvent être sur des appareils mobiles avec une connexion 3G lente.

Avec une bonne connexion, une taille totale d'e-mail de 1 Mo se chargerait en une fraction de seconde et semblerait instantanée pour l'utilisateur. Cependant, avec une connexion 3G, cela pourrait prendre entre 2 et 14 secondes pour charger l'e-mail complet. Et, si votre public cible est susceptible d'être sur une connexion 2G, ce téléchargement pourrait prendre quelques minutes.

Cela pose également un problème potentiel aux utilisateurs avec des forfaits de données restrictifs qui doivent prendre en compte chaque Mo qu'ils téléchargent. C'est particulièrement à prendre en considération dans les pays en développement.

Quelques choses que vous pouvez faire pour aider :

Tout d'abord, regardez toutes les recommandations que nous avons mentionnées concernant l'optimisation de la taille de l'html et des images
Si vous avez le temps, il est toujours bon d'expérimenter avec le code et de tester ce qui est vraiment nécessaire et ce que vous pouvez omettre. Expérimentez avec les images et essayez différentes façons de les compresser. Assurez-vous que votre e-mail est attrayant et compréhensible sans images, afin que vos utilisateurs puissent commencer à consulter votre e-mail pendant qu'ils attendent le chargement des images.

Putting it All Together

En matière de taille de fichiers, comme pour beaucoup de choses, tout se résume à un compromis. Vous pouvez effectuer des tests A/B et découvrir que de grandes images haute résolution fonctionnent bien. Vous pouvez découvrir qu'un contenu détaillé fonctionne bien. Vous pouvez découvrir qu'une interactivité complexe fonctionne bien. Cependant, lorsque vous réunissez les trois dans une seule campagne, vous constaterez peut-être que les choses commencent à mal fonctionner.

Rejoignez notre Newsletter.

Restez à jour avec Bird grâce aux mises à jour hebdomadaires dans votre boîte de réception.

En soumettant, vous acceptez que Bird puisse vous contacter au sujet de nos produits et services.

Vous pouvez vous désabonner à tout moment. Consultez la Déclaration de confidentialité de Bird pour plus de détails sur le traitement des données.

Rejoignez notre Newsletter.

Restez à jour avec Bird grâce aux mises à jour hebdomadaires dans votre boîte de réception.

En soumettant, vous acceptez que Bird puisse vous contacter au sujet de nos produits et services.

Vous pouvez vous désabonner à tout moment. Consultez la Déclaration de confidentialité de Bird pour plus de détails sur le traitement des données.

Rejoignez notre Newsletter.

Restez à jour avec Bird grâce aux mises à jour hebdomadaires dans votre boîte de réception.

En soumettant, vous acceptez que Bird puisse vous contacter au sujet de nos produits et services.

Vous pouvez vous désabonner à tout moment. Consultez la Déclaration de confidentialité de Bird pour plus de détails sur le traitement des données.

Pinterest logo
Uber logo
Logo Square
Logo Adobe
Meta logo
logo PayPal

Company

Paramètres de confidentialité

Newsletter

Restez à jour avec Bird grâce aux mises à jour hebdomadaires dans votre boîte de réception.

En soumettant, vous acceptez que Bird puisse vous contacter au sujet de nos produits et services.

Vous pouvez vous désabonner à tout moment. Consultez la Déclaration de confidentialité de Bird pour plus de détails sur le traitement des données.

Uber logo
Logo Square
Logo Adobe
Meta logo

Company

Paramètres de confidentialité

Newsletter

Restez à jour avec Bird grâce aux mises à jour hebdomadaires dans votre boîte de réception.

En soumettant, vous acceptez que Bird puisse vous contacter au sujet de nos produits et services.

Vous pouvez vous désabonner à tout moment. Consultez la Déclaration de confidentialité de Bird pour plus de détails sur le traitement des données.

Uber logo
Logo Adobe
Meta logo

Company

Paramètres de confidentialité

Newsletter

Restez à jour avec Bird grâce aux mises à jour hebdomadaires dans votre boîte de réception.

En soumettant, vous acceptez que Bird puisse vous contacter au sujet de nos produits et services.

Vous pouvez vous désabonner à tout moment. Consultez la Déclaration de confidentialité de Bird pour plus de détails sur le traitement des données.