Optimiser l’affiche d’un événement pour son site web
Une affiche conçue pour l’impression peut peser trop lourd sur une page tout en devenant illisible sur téléphone. Créez une exportation web distincte. Le guide de Jimdo aborde source, format, taille, recadrage, nom et texte alternatif ; pour un événement, les renseignements et le lien de billets doivent aussi figurer en texte sur la page.
La rédaction de Boletolibre
Publié
Conserver le fichier maître et définir les usages
Gardez le maître haute résolution pour l’impression. Exportez séparément pour vignette, bandeau, page mobile et aperçu social. Une grande affiche verticale peut rendre ses petites lettres illisibles dans un bandeau. Décidez si l’intégralité ou seulement l’illustration est nécessaire.
| Emplacement | Décision |
|---|---|
| Vignette | Recadrer pour reconnaître l’événement |
| Bandeau | Prévoir le titre en texte de page |
| Affiche complète | Proposer un agrandissement ou téléchargement |
| Aperçu social | Vérifier le rendu réel |
Jimdo recommande une bonne source et une présentation cohérente ; ses dimensions d’exemple ne sont pas des normes universelles.[1]
Choisir selon le visuel
Les photos se compressent souvent bien en WebP ou AVIF, avec repli compatible si nécessaire. Pour aplats et lettrage, comparez PNG, WebP sans perte ou SVG préparé avec soin. Une conversion ne recrée pas les détails déjà perdus.[2]
| Visuel | À examiner |
|---|---|
| Photo | Visages, dégradés et octets |
| Graphisme avec texte | Bords, transparence, compatibilité |
| Mixte | Deux exports à la taille réelle |
Les pixels affichés et les octets transférés comptent ; la valeur DPI du fichier d’impression ne fixe pas la largeur dans le navigateur. Il n’existe pas de taille idéale universelle.[3]
Réduire puis comparer
- Relever pixels et octets du maître et la taille maximale affichée.
- Exporter sans déformer ; créer un recadrage distinct si les proportions changent.
- Si le site le permet, proposer plusieurs largeurs pour que le mobile ne charge pas le grand fichier.
- Comparer netteté et poids sur téléphone et ordinateur.
- Contrôler la page livrée et l’absence de déplacement du contenu.
Des variantes responsives permettent au navigateur de choisir selon la place disponible ; les dimensions intrinsèques réservent la place.[3]
Écrire aussi les informations dans la page
Date, fuseau, lieu, prix et billets ne doivent pas exister seulement dans l’image. Le W3C recommande du vrai texte et une alternative équivalente pour les mots essentiels d’une image. Répéter les informations dans la page est souvent plus utile qu’un alt très long.[5]
- Mettre nom, date, lieu et achat en texte et lien utilisable.
- Choisir le texte alternatif selon la fonction réelle de l’image ; traiter correctement un visuel purement décoratif.
- Traduire informations et alternatives sur chaque page locale ; le texte intégré à l’image ne se traduit pas seul.
Google recommande un nom de fichier descriptif, un visuel près du texte pertinent et un alt utile sans bourrage de mots clés.[4]
Contrôle avant publication
| Avant | Prêt lorsque |
|---|---|
| Maître imprimé envoyé tel quel | Une version web correspond au cadre |
| Petites lettres illisibles | Renseignements disponibles en texte |
| Lien billets dans l’affiche seulement | Lien réel et fonctionnel |
| Nom ou alt générique | Description fidèle ajoutée |
Vérifiez mobile, ordinateur et si possible une connexion lente. Conservez maître et export retenu pour les corrections.
Sources et lectures complémentaires
- How to Optimize Images for Better Web Design & SEOJimdo · Consulté
- Choose the right image formatweb.dev · Consulté
- Responsive imagesweb.dev · Consulté
- Image SEO best practicesGoogle Search Central · Consulté
- Images of TextW3C Web Accessibility Initiative · Consulté