De quelle taille de bannière as-tu besoin ?
Il n’y a pas de taille unique utilisée par toutes les listes de serveurs. Chaque liste fixe ses propres règles de largeur, hauteur, type et poids de fichier, vérifie-les donc avant d’envoyer ta bannière. Voici les tailles qu’exporte Banner Studio et à quoi elles servent :
| Taille | Pixels | Idéale pour |
|---|---|---|
| Bannière web classique | 468×60 | L’ancien format « full banner » de l’IAB. Beaucoup de sites et de listes l’utilisent encore, même si l’IAB l’a retiré de sa liste standard en 2011. |
| Carte de liste de serveurs | 740×200 | La bannière de ta carte et de la page de ton serveur sur BestMCServerList, plus large et plus haute qu’une bannière classique. |
| En-tête large | 960×200 | En-têtes de sites web, posts de forum et annonces Discord. |
Fais une bannière par taille au lieu d’étirer un seul fichier. Un design en 740×200 écrasé en 468×60 perd l’essentiel de son texte, et redimensionner du pixel art à des tailles bizarres le rend flou.
BestMCServerList accepte les bannières en GIF, PNG, WebP ou JPEG, jusqu’à 2 Mo.
Étape 1 : décider ce que la bannière doit dire
Une bannière se lit en à peu près le temps qu’il faut pour la dépasser en scrollant. Choisis trois choses et laisse tomber le reste :
- Le nom du serveur, aussi grand que la place le permet.
- Une accroche : le mode de jeu ou ce qui te rend différent, par exemple « Survie avec villes » ou « Skyblock 1.21 ».
- L’adresse, pour que les joueurs puissent la copier sans ouvrir ta page.
Les listes de fonctionnalités, les liens Discord et les longs slogans ne tiennent pas dans 60 pixels de haut. Mets-les plutôt dans la description de ton serveur.
Étape 2 : penser la lisibilité
- Un gros texte en pixels. Sur une bannière 468×60, le nom doit occuper presque toute la hauteur. Les polices fines et les petits slogans deviennent du bruit.
- Du contraste. Un texte clair avec un contour sombre marche sur n’importe quel fond, même les paysages chargés et les particules.
- Un fond calme. Des nuages, des étoiles ou de l’eau qui bougent, c’est bien. Un fond qui bouge autant que le texte détourne le regard du nom.
- Une première image qui se suffit à elle-même. Vérifie que le nom et l’adresse sont déjà visibles sur la première image. Certains endroits affichent une image fixe, et c’est en général la première.
- Des couleurs assorties. Utilise les mêmes couleurs et le même symbole que ton icône de serveur et ton MOTD, pour que les joueurs te reconnaissent dans la liste, en jeu et sur Discord.
Étape 3 : animer sans clignoter
L’animation doit servir la bannière, pas crier. Des particules lentes, un reflet lumineux sur le logo ou des nuages qui dérivent attirent l’attention sans rendre le texte difficile à lire.
Évite les flashs brusques et les clignotements rapides. Les règles d’accessibilité du web (WCAG 2.1, critère de succès 2.3.1) disent qu’un contenu ne doit pas flasher plus de trois fois par seconde, car les flashs peuvent déclencher des crises d’épilepsie. Une boucle fluide est aussi tout simplement plus agréable sur une page pleine de bannières.
Fais une boucle sans coupure : la dernière image doit ramener à la première. Un GIF animé peut se répéter à l’infini ; dans le fichier, c’est un nombre de boucles de 0 dans l’extension NETSCAPE2.0. Banner Studio exporte des GIF en boucle.
Étape 4 : garder le GIF léger
Un GIF stocke chaque image, et chaque image peut avoir sa propre palette de 256 couleurs maximum. Le fichier grossit avec la taille du canevas, le nombre d’images et la quantité de détails qui changent d’une image à l’autre. Ces étapes le rendent plus léger, à peu près de l’effet le plus fort au plus faible :
- Baisse le nombre d’images par seconde. 10 à 12 images par seconde suffisent pour la plupart des animations en pixel art.
- Raccourcis la boucle. Deux à quatre secondes, c’est largement assez pour des particules ou un reflet lumineux.
- Utilise des pixels plus gros. Les gros pixels se compressent bien mieux que les détails fins.
- Coupe le bruit fin et les particules. Les petits éléments qui changent à chaque image coûtent le plus cher.
- Utilise moins de couleurs. 64 couleurs au lieu de 128 ou 256, ça rend souvent pareil en pixel art.
Dans Banner Studio, l’indicateur de poids estime la taille du fichier pendant que tu modifies. Si la bannière dépasse la limite, « Ajuster à 2 Mo » essaie ces étapes l’une après l’autre et s’arrête dès que le fichier rentre.
Étape 5 : l’envoyer et l’utiliser ailleurs
Exporte un GIF pour l’animation, ou un PNG si un site n’accepte que les images fixes. Sur BestMCServerList, tu peux envoyer la bannière terminée directement sur une de tes fiches avec « Utiliser cette bannière », ou envoyer le fichier dans le champ bannière du formulaire de ton serveur.
Sur ton propre site, donne à l’image une largeur et une hauteur fixes, pour que la page ne saute pas pendant le chargement du GIF, et un texte alternatif parlant :
<a href="https://example.com/">
<img src="/img/banner-468x60.gif" width="468" height="60"
alt="MyServer – Survival with towns – play.example.com">
</a>Pour les annonces Discord et les posts de forum, l’en-tête large en 960×200 a la place pour le nom, une accroche et l’adresse en gros.
Erreurs fréquentes
| Problème | Solution |
|---|---|
| L’envoi est refusé car le fichier est trop lourd | Baisse le nombre d’images par seconde, raccourcis la boucle ou utilise moins de couleurs. Vérifie la limite de chaque liste. |
| Le texte est illisible sur la version 468×60 | Fais un design séparé pour cette taille, avec seulement le nom et l’adresse. |
| La bannière est floue | Elle a été redimensionnée à une taille pour laquelle elle n’était pas faite. Exporte-la à la taille exacte demandée par la liste. |
| Les couleurs ont des bandes ou des points | Un dégradé a été réduit à trop peu de couleurs. Utilise des aplats de couleur ou autorise plus de couleurs. |
| La boucle saute | La dernière image ne ramène pas à la première. Fais sortir et entrer les éléments mobiles à la même vitesse. |
| Tout clignote | Ralentis l’animation et évite les flashs, surtout plus de trois par seconde. |
Une fois la bannière terminée, elle t’aide dans la grande mission : attirer les premiers joueurs sur ton serveur.
