Gérer les graphiques d’un site multilingue : SVG intégré, localisation des images et périmètre de traduction
1. Une page traduite avec des images qui ne le sont pas : le semi-fini le plus courant sur un site multilingue
Ce que le client remarque en premier après la mise en ligne d’un site multilingue, ce n’est pas la grammaire, ce sont les images. Sur une page anglaise, quelques organigrammes portent encore du chinois : le client voit tout de suite qu’il s’agit d’une « version traduite ».
Les quatre formes de semi-fini n’ont ni la même fréquence ni le même coût :
| Zone de la page | Résultat quand seul le texte est traduit | Ce que ressent l’acheteur | Fréquence |
|---|---|---|---|
| Illustration du corps de texte avec libellés en chinois | Libellés incompréhensibles, on devine d’après le contexte | Contenu incomplet | Maximal |
| Organigrammes et schémas de topologie | Toute l’image devient une énigme | Doute que le site ait été monté à la va-vite | Élevée |
| Schémas des caractéristiques produit | Unités et graduations illisibles | N’ose pas choisir un modèle d’après le schéma | Moyenne |
Le problème est plus sournois encore : le texte contenu dans une image, les moteurs de recherche ne le lisent pas, et l’IA non plus. Si une image porte une structure à trois niveaux que seule l’image explique clairement, ces trois niveaux n’existent pour aucune machine. Localiser les graphiques règle donc deux choses à la fois : l’humain comprend, la machine capte.
Quand ce raisonnement ne s’applique pas : Si le site n’existe qu’en chinois et en anglais et que les visiteurs anglophones viennent surtout de clients existants et de circuits de distribution, les images peuvent passer après les pages produit et les pages de certification. À l’inverse, si le site anglais doit capter le trafic de recherche de clients inconnus, les libellés en chinois dans les images sont un vrai handicap.
2. Pourquoi le texte dans les images est difficile à traiter : le coût comparé des quatre solutions
Le texte d’une image bitmap ne se modifie pas, et c’est là que commencent tous les ennuis : le texte a été aplati en pixels, et pour le changer il faut revenir au fichier source de design.
La solution bitmap pose trois problèmes concrets :
| Problème | Raison | Contrepartie |
|---|---|---|
| Le texte ne se modifie pas | Le texte est déjà en pixels | Chaque modification oblige à revenir au fichier source de design |
| Le poids double | Un fichier par langue | Le nombre de fichiers de la bibliothèque d’images égale le nombre d’images multiplié par le nombre de langues |
| Les versions se désynchronisent | Les versions chinoise et anglaise sont maintenues séparément | Un paramètre modifié côté chinois reste à l’ancienne valeur côté anglais |
Voici le compromis entre les quatre solutions ; ce tableau règle à lui seul environ 80 % des décisions :
| Approche | Mise en œuvre | Coût ponctuel | Maintenance dans la durée | Quand l’appliquer |
|---|---|---|---|---|
| Version bitmap | Exporter une image par langue | Moyen, équivaut à tout refaire | Élevé, refaire à chaque modification | Images à information complexe et terminologie dense |
| SVG intégré bilingue | Une image, deux jeux de textes, affichés selon la langue | Élevé, nécessite l’intervention du développement | Faible, une seule modification s’applique à toutes les langues | Schémas structurels, organigrammes, fiches graphiques |
| Texte de l’image externalisé | L’image ne montre que la structure, le texte est porté par la page | Moyen, nécessite une remise en page | Faible | Schémas simples, diagrammes fléchés |
| Aucun traitement | Conserver l’image d’origine | nulle | nulle | Images décoratives, photos de produits |
Une seule question départage les options : cette image sera-t-elle modifiée plus tard ? Une infographie complexe qui ne changera pas dans les deux ans : deux versions bitmap sont le choix le plus simple. Dès qu’il faudra modifier un paramètre, un processus ou un nom, optez pour le SVG embarqué ou le texte externalisé. Les photos de produits forment un quatrième cas : aucun texte à traiter, inutile d’y consacrer du budget.
3. SVG embarqué bilingue : une image, deux jeux de textes
L’avantage du SVG embarqué : le texte reste du texte, pas des pixels. Deux jeux de textes, chinois et anglais, cohabitent dans la même image et l’affichage dépend de la langue de la page, sans maintenir deux fichiers.
| Points clés de la mise en œuvre | Mise en œuvre | Pourquoi ce choix |
|---|---|---|
| Deux jeux de textes de même source | Les textes chinois et anglais apparaissent par paires dans la même image | Une seule modification suffit, aucun risque d’oublier l’autre langue |
| Affichage selon la langue | L’élément racine de la page porte l’identifiant de la langue active, chaque jeu de textes porte son identifiant, et le style gère l’affichage et le masquage | Aucun nouveau fichier à générer par langue |
| Bloc entier non traduisible | Marquer toute l’image comme non traduisible | Empêche le plugin de traduction de retraduire les deux jeux de textes |
| Longueur vérifiée à la génération | Vérifier le débordement dès la génération, selon la longueur réelle dans les deux langues | Reprendre le travail après la mise en ligne coûte bien plus cher |
| Un seul fichier | Une image, un fichier, pas de découpage par langue | Le nombre de fichiers de la médiathèque est indépendant du nombre de langues |
La règle du « bloc entier non traduisible » est la plus facile à oublier. Sans marquage, le plugin de traduction prend les libellés chinois de l’image pour du texte courant et les traduit en anglais : la page anglaise affiche alors à la fois l’anglais traduit et l’anglais d’origine, les deux se superposent et l’image est fichue. Ce problème est très fréquent sur les sites qui s’appuient sur la traduction automatique par plugin.
Une exigence de nommage va de pair : les noms de fichiers image et les textes alternatifs ne doivent pas porter de suffixe de langue. Un suffixe signifie une nouvelle série de fichiers à chaque langue ajoutée : la médiathèque gonfle avec le nombre de langues et le nettoyage devient difficile, impossible de savoir quelle image sert encore. Le texte alternatif décrit le contenu de l’image, pas la langue.
4. L’anglais est 1,3 à 1,5 fois plus long que le chinois : prévoir cette marge en mise en page
Voici le chiffre à retenir de cet article : une ligne de libellés qui remplit juste la page en chinois mesure généralement 1,3 à 1,5 fois plus en anglais, et les libellés courts sont encore pires.
| Type de texte | Longueur en chinois | Multiple courant en anglais | Explication |
|---|---|---|---|
| Libellé court, 4 caractères chinois maximum | Par exemple quatre caractères | 1,6 à 2,0 fois | Plus c’est court, plus c’est imprévisible : l’expansion est la plus forte |
| Phrase moyenne, 8 à 15 caractères | Une description tenant sur une ligne | 1,3 à 1,5 fois | La plage la plus typique |
| Phrase complète, plus de 20 caractères | Une phrase complète | 1,2 à 1,4 fois | Avec du contexte, le ratio diminue |
| Texte contenant des abréviations ou des références | Comme les abréviations de paramètres | Proche de 1,0 fois | Les références et les unités ne se traduisent pas, presque aucun changement |
L’allemand et le russe sont encore plus longs, généralement 10 à 20 % de plus que l’anglais. Si le site prévoit une version allemande, la marge doit être calculée pour l’allemand, pas seulement pour l’anglais.
Une fois les ratios connus, il faut les traduire en règles de marge concrètes, sinon ces chiffres restent inutilisables :
| Type d’élément | Taille de police minimale | Calcul de la largeur disponible | Marge minimale |
|---|---|---|---|
| Titre de carte | Pas moins de 15 pt | Largeur de la carte moins 12 pixels de padding de chaque côté | Réserver 40 % de largeur libre |
| Ligne de texte de carte | Pas moins de 12 pt | Distance jusqu’au bord gauche de la colonne voisine | Réserver 45 % de largeur libre |
| Axes et étiquettes de graduation | Pas moins de 10 pt | Distance jusqu’à la graduation suivante | Réserver 50 %, passer sur deux lignes si nécessaire |
| Légende et notes de bas de page | Pas moins de 10 pt | Distance jusqu’au bord droit du bloc de texte | Réserver 35 %, abréviations très longues |
La marge sert à couper les lignes, pas à réduire la taille de police. Si le texte ne tient pas sur une ligne, il passe à la deuxième, en s’étendant vers le haut et vers le bas à partir de la ligne de base d’origine ; ce n’est que si l’espace vertical manque aussi que l’on peut réduire la taille de police, sans descendre sous le minimum du tableau ci-dessus. Ne pas inverser cet ordre : réduire d’abord la police donne une version anglaise globalement plus petite que la version chinoise, et le poids visuel des deux langues devient incohérent.
Le débordement se manifeste de trois façons, qui ne se traitent pas de la même manière :
| Forme du débordement | Manifestation visuelle | Traitement |
|---|---|---|
| Débordement horizontal | Le texte empiète sur la carte voisine | Couper les lignes selon la distance au voisin, pas réduire la police |
| Chevauchement vertical | Plusieurs lignes de texte recouvrent la ligne suivante | Réserver une hauteur de ligne égale à 1,3 ou 1,4 fois la taille de police |
| Débordement de carte | Le texte dépasse les limites de la carte | Ajouter d’abord du padding, puis envisager d’agrandir la carte |
V. Localisation des tableaux : largeur de colonne, chiffres, unités, dates
Les tableaux sont plus difficiles que les images, car ils sont vivants : la largeur des colonnes varie selon le contenu, et le contenu varie selon la langue. Cinq points posent le plus souvent problème :
| Point de contrôle | Questions fréquentes | Règle de traitement |
|---|---|---|
| Largeur de colonne | Une colonne étroite calibrée sur le chinois voit son en-tête anglais se couper sur deux lignes | Redistribuer la largeur des colonnes selon la longueur en anglais |
| Format des chiffres | Mélange de la virgule et de l’espace comme séparateur de milliers | Uniformiser selon les habitudes de la langue cible, une seule règle par site |
| Unités | L’en-tête chinois indique l’unité, l’en-tête anglais l’oublie | Mettre l’unité dans l’en-tête, pas dans les cellules de données |
| Date | L’ordre année-mois-jour n’est pas compris de la même façon selon les régions | Utiliser l’année sur quatre chiffres et l’abréviation du mois en anglais, éviter le tout-numérique |
| Retour à la ligne des traductions trop longues | Le texte d’une cellule étire toute la ligne en hauteur | Autoriser le retour à la ligne sur deux lignes maximum, au-delà raccourcir l’en-tête |
L’écriture des chiffres et des unités est la principale source d’erreurs : quelques différences typiques à trancher par avance :
| Contenu | Écriture courante en chinois | Écriture courante en anglais | Point de vigilance |
|---|---|---|---|
| Séparateur de milliers | 10 000 ou 10000 | 10 000 | Ne pas confondre le séparateur décimal et le séparateur de milliers |
| Décimales | 0,5 | 0.5 ou .5 | Ne jamais utiliser la virgule comme séparateur décimal |
| Dimensions | 200 millimètres | 200 mm | Laisser un espace avant le symbole d’unité |
| Température | 20 degrés Celsius | 20 °C | Laisser un espace entre le symbole de degré et la lettre |
| Plage | 10 à 20 | 10 to 20 ou 10–20 | Utilisez toujours un trait d’union ou un tiret demi-cadratin |
| Devise | 30 000 yuans | CNY 30,000 | Pas de retour à la ligne entre le montant et la devise |
Le rendu des tableaux sur mobile doit être testé à part. On peut opter pour un défilement horizontal ou des cartes. Ce qu’il faut éviter, c’est de réduire le tableau entier pour le faire tenir dans l’écran : la taille de police devient illisible. Critère de validation : peut-on lire les en-têtes sans zoomer sur mobile ?
Six. Ce qu’il faut traduire dans les images et ce qu’il ne faut pas
Le contenu des images ne se traite pas de façon uniforme, chaque catégorie a sa règle :
| Type de contenu | Traduction | Raison |
|---|---|---|
| Étiquettes de données, libellés d’axes, légendes | Traduction | Indispensables à la compréhension du graphique, sans traduction il ne sert à rien |
| Étapes de processus, noms de modules | Traduction | Ce sont des informations de contenu, en correspondance directe avec le texte de la page |
| Noms de marque et de société | Ne pas traduire | Un nom de marque n’a qu’une seule forme, la traduire crée des incohérences |
| Références et numéros de série | Ne pas traduire | La référence est l’ancre de recherche multilingue, traduite elle devient introuvable |
| Symboles d’unités et formules | Ne pas traduire, mais respecter les règles typographiques de la langue | Les symboles sont universels, mais les espacements et l’écriture varient selon les régions |
| Numéros de certification et de normes | Ne pas traduire | Le numéro est un identifiant externe fixe |
Un critère simple : si après traduction le client ne retrouve pas l’équivalent dans une autre langue, ne traduisez pas. Références, numéros et marques appartiennent à cette catégorie.
Autre exigence de cohérence : la terminologie des images doit correspondre au glossaire. Si le même paramètre s’appelle « course » sur la page chinoise et tantôt travel, tantôt stroke sur la page anglaise, le lecteur croira qu’il s’agit de deux paramètres. Un site multilingue doit d’abord disposer d’un glossaire avant d’envisager la localisation des images ; inverser l’ordre entraîne des reprises sans fin. La logique de traitement des paramètres est similaire, à mettre en regard /insight/13-product-catalog-filter-search-experience/ pour aller plus loin.
Sept. Liste de contrôle qualité : quatre vérifications par image et par langue
Le contrôle qualité ne peut pas se limiter à la version chinoise. La méthode : quatre vérifications pour chaque image dans chaque langue, et pas de mise en ligne sans validation.
| Point de contrôle | Critère d’évaluation | Traitement en cas de non-conformité |
|---|---|---|
| Débordement | Le texte ne sort pas de la carte, n’écrase pas les éléments voisins | Retour à la ligne, réduire la taille de police seulement si la hauteur ne suffit pas |
| Chevauchement | Pas de superposition entre lignes de texte, ni entre texte et graphiques | Ajuster l’interligne ou augmenter la hauteur du conteneur |
| Taille de police | Pas inférieure à la taille minimale de l’élément | Raccourcir le texte, ne pas réduire encore la taille de police |
| Débordement de carte | Espace entre le texte et la bordure d’au moins 12 pixels | Ajouter du padding ou élargir la carte |
Quand faut-il faire deux jeux d’images
| Situation | Critère de décision | Approche recommandée |
|---|---|---|
| Schémas de processus à forte densité terminologique | Plus de 20 termes techniques dans une seule image | Deux jeux de bitmaps, vérifiés par une personne maîtrisant les deux langues |
| Infographies complexes à plusieurs niveaux | Plus de quatre niveaux de hiérarchie dans l’image | Découper en plusieurs images simples, puis passer au SVG bilingue |
| Vues en coupe de produits en rendu 3D | Le texte se déforme avec la surface courbe | Deux jeux de bitmaps, un rendu par langue |
| Images destinées à l’impression | Les supports imprimés n’acceptent pas le SVG | Deux jeux de bitmaps, conserver les fichiers sources haute résolution |
| Mise en page texte-image imposée par le client | La mise en page est verrouillée par le client | Deux jeux de bitmaps, pour éviter de modifier la mise en page |
La logique est simple : plus une image est complexe, plus elle exige une vérification humaine et plus elle doit être diffusée en dehors du site, plus on a intérêt à produire deux versions. À l’inverse, les schémas structurels, les cartes de processus et les tableaux comparatifs utilisés sur le site passent tous en SVG bilingue, pour un coût de maintenance divisé par dix. Pour les images et fichiers livrables, cochez la liste de /site/ ; pour les pages de confiance et la présentation des certifications, inspirez-vous de /insight/09-trust-pages-ai-credibility-evidence/, ou envoyez votre inventaire d’images à /contact/ pour un audit langue par langue.
FAQ — Questions fréquentes
Pour conclure
La localisation des graphiques ressemble à un problème de graphisme, mais c’est en réalité un problème de structure. Le bitmap soude le texte dans les pixels : chaque nouvelle langue impose de tout refaire. Le SVG intégré laisse le texte à un endroit remplaçable, si bien que le coût reste presque inchangé quand le nombre de langues augmente. La différence entre les deux solutions ne se voit pas aujourd’hui, mais à la troisième refonte.
Deux choses seulement demandent une décision en amont : cette image sera-t-elle encore modifiée, et de combien l’anglais est-il plus long que le chinois. La première détermine la solution, la seconde détermine la marge. Les deux ont une réponse avant de commencer ; les découvrir après la mise en ligne coûte généralement une reprise complète.
En une phrase : gardez le texte des images à un endroit remplaçable, et prévoyez une marge de mise en page de 1,3 à 1,5 fois la longueur du chinois pour l’anglais.