Bannière facebook optimisée
- Dimensions 820×312px desktop et 640×360px mobile assurent affichage cohérent et vérifier hauteur visible sur mobile.
- Téléversement téléverser ≥1640px pour Retina, privilégier JPG photos et PNG logos, optimiser poids, qualité JPG 70–85% si nécessaire.
- Zone sûre centrer éléments critiques (logo, CTA, texte) pour éviter recadrage, tester maquettes, conserver profil sRGB pour cohérence couleur et tester sur trois écrans.
Facebook affiche la cover en 820 × 312 px sur bureau et en 640 × 360 px sur mobile. Vous devez téléverser une version ≥ 1640 px de large pour les écrans haute densité et choisir JPG pour photo ou PNG pour logo. Gardez le contenu essentiel centré dans la zone sûre pour éviter le recadrage et testez avant publication.
Le guide rapide des dimensions pour desktop et mobile
La taille de référence pour desktop reste 820 × 312 px affichée publiquement sur la plupart des navigateurs. Le repère mobile à utiliser pour valider votre composition est 640 × 360 px. Un gabarit PNG transparent ou un modèle Canva permet de vérifier visuellement l’alignement avant l’upload.
| usage | dimension (px) | poids conseillé | dpi / remarque |
|---|---|---|---|
| affichage desktop | 820 × 312 | < 200 KB recommandé | 72 dpi web standard |
| affichage mobile | 640 × 360 | < 200 KB recommandé | vérifier hauteur visible |
| téléversement 2× | ≥ 1640 × 624 | 200–400 KB selon compression | double pixels pour Retina |
| logo seul / icône | variable (PNG vector conseillé) | < 150 KB si possible | PNG-24 pour transparence |
La taille d’affichage recommandée pour le bureau avec exemples et zone sûre
Vous devez créer le visuel avec 820 × 312 px comme zone d’affichage principale. Le centre à respecter pour les éléments critiques est de 640 × 312 px afin d’éviter que logo et texte soient coupés. Pensez à laisser des marges latérales pour les barres d’outils et instruments d’interface.
- 1/ 820 × 312 : dimension d’affichage public sur desktop, point de référence principal.
- 2/ zone sûre 640 × 312 : centraliser logo et texte pour garantir visibilité sur tout écran.
- 3/ version 2× : créer une largeur ≥ 1640 px si vous ciblez les écrans Retina et compresser ensuite.
La taille d’affichage recommandée pour le mobile et les différences de recadrage
Vous devez tester la composition sur mobile en utilisant 640 × 360 px comme repère de hauteur. Le mobile affiche souvent plus en hauteur mais recadre latéralement différemment, ce qui peut couper des éléments placés trop près des bords. Vérifiez spécialement la lisibilité des CTA et des petits textes dans cette hauteur réduite.
- 1/ hauteur mobile : contrôler que le message principal reste lisible dans 360 px de hauteur.
- 2/ CTA visible : placer bouton et texte importants au centre vertical pour éviter d’être hors-cadre.
- 3/ mockups : utiliser maquettes mobiles pour valider alignement et contraste avant publication.
Le mode d’export et les meilleures pratiques techniques pour l’affichage
Vous devez exporter les images en profil sRGB pour conserver la cohérence colorimétrique sur le web. Visez un poids inférieur à 200 KB quand c’est possible sans sacrifier la netteté. Choisissez le format selon le contenu et testez la version finale sur trois écrans différents.
La sélection du format image et les paramètres d’export pour rapidité et qualité
Vous devez privilégier JPG pour les photos complexes et PNG pour les logos, textes nets ou images avec transparence. Réglez la qualité JPG entre 70–85 % pour un bon compromis qualité/poids. Testez visuellement après compression pour vous assurer qu’aucun texte ne devient flou.
- 1/ sRGB : exporter en sRGB pour éviter les décalages de couleur sur la plupart des navigateurs.
- 2/ JPG 70–85 % : bonne plage pour conserver détail photo tout en limitant le poids.
- 3/ PNG-24 : utiliser pour logo et zones transparentes, puis optimiser avec un outil de compression.
Les templates et modèles prêts à l’emploi pour Canva PSD et export 2x pour retina
Vous devez fournir des templates PSD, PNG et fichiers Canva avec un calque de zone sûre clairement marqué. La version 2× doit respecter le même ratio avec largeur ≥ 1640 px pour les écrans haute densité. Pensez à une checklist d’export regroupant format, profil couleur, qualité et poids pour éviter les oublis.
- 1/ calque zone sûre : inclure un calque d’alignement pour desktop et mobile afin de voir immédiatement les zones critiques.
- 2/ checklist export : format, couleur sRGB, qualité JPG, poids cible et nommage clair du fichier.
- 3/ versions : proposer un template pour débutant (Canva) et un PSD éditable pour pro avec calques organisés.
Le centre d’aide Meta (2024) confirme les tailles cibles et le besoin d’une version 2× pour retina, et plusieurs guides web recommandent de tester l’affichage réel avant publication. Vous gagnerez du temps en intégrant les templates et en validant sur mockups desktop et mobile avant d’appuyer sur publier.
