Comment traduire des images sur un site Web (texte alternatif + fichiers)

Résumez ce post avec : 9 min de lecture

Vous traduisez les images sur un site Web en deux couches. Tout d’abord, traduisez le texte qui appartient à chaque image (texte alternatif, attributs de titre, légendes et nom du fichier). Deuxièmement, pour toute image contenant des mots ou du contenu spécifique à une culture, créez une version localisée et diffusez ce fichier uniquement sur la version linguistique correspondante de la page. Les vidéos et les PDF suivent la même règle : traduisez ce qui les décrit et échangez le fichier lui-même lorsque le contenu est lié à la langue.

Principaux points à retenir

Le texte alternatif est la partie que Google lit. Google l'appelle “l'attribut le plus important lorsqu'il s'agit de fournir plus de métadonnées pour une image” (Recherche Google Central), donc un attribut alt non traduit est un signal de classement manqué dans chaque langue.
Seules les images contenant du texte, des prix, des références locales ou des indices sur les personnes et la culture nécessitent un fichier séparé. Les images décoratives et les photos de produits ne le font généralement pas.
Échangez des fichiers par langue par URL au lieu de superposer du texte avec des astuces CSS. Chaque page de langue doit référencer son propre fichier image.
Google recommande également de traduire les noms de fichiers lorsque vous localisez des images.
Le moyen le plus rapide d’éviter la plupart de ce travail est d’arrêter de mettre du texte à l’intérieur des images sur les nouveaux modèles.

Pourquoi la traduction des médias est importante

Les visiteurs remarquent quand les mots sont traduits et les images ne le sont pas. Une page de tarification française qui affiche une bannière anglaise “Acheter maintenant” ou une page de destination allemande avec une capture d'écran pleine d'interface utilisateur anglaise se lit comme à moitié terminée.

L’argument commercial en faveur d’une pratique correcte vient de la façon dont les gens font leurs achats. Dans l'enquête 2020 “Can't Read, Won't Buy” de CSA Research menée auprès de 8 709 consommateurs dans 29 pays, 76 % des acheteurs en ligne ont déclaré qu'ils préféraient acheter des produits contenant des informations dans leur langue maternelle, et 40 % ont déclaré qu'ils n'achèteraient jamais sur des sites Web dans d'autres langues (Recherche CSA, juillet 2020). Une infographie, un tableau des tailles ou un diagramme “comment cela fonctionne” sont également des informations sur le produit.

Il y a aussi une raison de recherche. La recherche d'images et les images à l'intérieur des résultats réguliers sont comparées aux mots qui les entourent. Un texte alternatif anglais sur une page espagnole donne à Google une description en anglais d'une page destinée aux chercheurs espagnols.

Ce qui compte comme “média” sur un site Web

Actif	Que traduire	A généralement besoin d'un nouveau fichier ?
Photos (produits, équipe, lieux)	Texte alternatif, titre, légende, nom de fichier	Rarement
Bannières et images de héros avec texte	Texte alternatif et l'image elle-même	Oui
Infographies, graphiques, diagrammes	Texte alternatif et l'image elle-même	Oui
Captures d'écran de votre produit	Texte alternatif ; image si l'interface utilisateur est localisée	Souvent
Icônes et illustrations	Texte alternatif (si significatif)	Seulement s'ils portent du texte ou des symboles culturels
Vidéos (auto-hébergées ou YouTube)	Titre, description, sous-titres	Oui, s'il y a de la parole ou du texte à l'écran
PDF (brochures, manuels, fiches techniques)	Texte du lien	Oui

Étape 1 : Auditez les images qui contiennent réellement du langage

Commencez par une exploration ou un passage manuel rapide de vos pages principales dans les langues que vous proposez déjà. Posez trois questions sur chaque image :

Y a-t-il du texte dans les pixels ? Bannières, boutons dessinés sous forme d'images, graphiques avec étiquettes, captures d'écran.
Existe-t-il une référence locale ? Prix dans une devise, numéros de téléphone, adresses, formats de date, unités de mesure, thèmes saisonniers (une bannière enneigée “vacances” signifie juillet en Australie).
L’image dépend-elle de la culture ? Gestes des mains, vêtements, nourriture, couleurs à forte signification locale, ou personnes qui ne reflètent pas le marché auquel vous vous adressez.

Si la réponse est “non” les trois fois, l'image n'a besoin que de traduire ses attributs de texte. Tout le reste est placé sur une liste de localisation, triée par trafic.

Étape 2 : Traduisez les mots attachés à chaque image

Ceci s'applique à chaque image, y compris celles que vous conservez :

Écrivez le texte alternatif dans la langue cible. Ne traduisez pas automatiquement une liste de mots clés ; suivez la même règle que Google donne pour l'anglais et écrivez une description courte et spécifique (Google (en anglais)).
Traduisez les attributs du titre et les légendes. Les légendes sont du corps du texte visible, elles doivent donc être traduites avec le reste de la page.
Traduire les noms de fichiers. Les conseils de Google sont directs : “Si vous localisez vos images, n'oubliez pas de traduire également les noms de fichiers, en gardant à l'esprit les directives d'encodage des URL si vous utilisez des caractères non latins ou spéciaux” (Google (en anglais)). zapatillas-running-rojas.jpg indique à un index en langue espagnole plus de red-running-shoes.jpg.
Si le balisage du produit ou de l'article fait référence à une image, le name et description autour de cela devrait également être dans la langue de la page.

Étape 3 : Créer des versions localisées d'images riches en texte

Pour les images de votre liste de localisation :

Obtenez les fichiers sources. Recréer une bannière à partir du fichier de conception en couches (Figma, Photoshop, Canva) est beaucoup plus rapide et plus propre que d'éditer un JPG aplati.
Traduisez d’abord le texte, puis concevez. Envoyez les chaînes à votre traducteur ou exécutez-les via votre outil de traduction, examinez-les et placez-les ensuite dans la conception. Attendez-vous à ce que le texte soit plus long ; les titres allemands et français ont régulièrement besoin de plus de place que les titres anglais, alors laissez de l'espace ou réduisez la taille des caractères.
Vérifiez les mises en page de droite à gauche. Pour l'arabe ou l'hébreu, refléter les éléments directionnels (flèches, étapes de progression, ordre de lecture d'une image avant-après).
Exporter avec un modèle de dénomination clair, par exemple pricing-banner-de.webp, pricing-banner-fr.webp, et conserver les mêmes dimensions que l'original afin que la mise en page ne saute pas.
Conservez un registre des images dont les versions sont localisées, afin que lorsque la bannière anglaise change, les autres langues soient également mises à jour.

Lorsque vous redessinez, réduisez le problème : placez les titres dans du texte HTML en direct sur une image d'arrière-plan plutôt qu'à l'intérieur. Le texte en direct est traduit avec le reste de la page et ne nécessite aucun fichier supplémentaire.

Étape 4 : Servir le bon fichier sur chaque version linguistique

Le fichier localisé n'est utile que si chaque page de langue pointe vers lui. La façon dont vous faites cela dépend de la pile :

Avec des pages séparées par langue (une configuration CMS multilingue), téléchargez l'image localisée dans la page ou le champ multimédia de chaque langue.
Avec une couche de traduction ou un plugin, utilisez sa fonction de remplacement multimédia pour que le src de l'image change sur la page traduite tandis que la page d'origine conserve le fichier d'origine.
Dans le code personnalisé, stockez les références d'image dans vos fichiers de ressources localisés, de la même manière que vous stockez les chaînes.

Quel que soit l'itinéraire que vous utilisez, vérifiez le HTML rendu de la page traduite et confirmez le <img src> et le alt les deux attributs ont changé.

Vidéos et PDF

Pour la vidéo, les sous-titres sont l’option la moins chère et la plus consultable ; YouTube et la plupart des lecteurs vidéo acceptent un fichier de sous-titres par langue. Pour les vidéos marketing contenant beaucoup de texte à l'écran ou une voix off, une coupe localisée séparée est préférable, et la page traduite doit ensuite intégrer cette version au lieu de l'original.

Une brochure ou un manuel PDF est un document distinct, alors traduisez-le sous forme de document et téléchargez le fichier traduit. Le lien sur chaque version linguistique de la page doit pointer vers le PDF de cette langue. Si vous gérez beaucoup de documents, un service de traduction de documents qui conserve la mise en page économisera le formatage manuel.

Comment ConveyThis gère les images, les vidéos et les PDF

Avec ConveyThis, le texte autour de votre média est traité automatiquement : lorsqu'une page est traduite, le alt, title et placeholder les attributs sont traduits avec le texte visible, de sorte que chaque image reçoit une description dans chaque langue sans travail supplémentaire.

Pour les fichiers qui nécessitent une version locale, vous activez la traduction multimédia une fois, puis échangez les fichiers par langue :

Dans votre tableau de bord ConveyThis, ouvrez Paramètres → Afficher plus d'options et, dans la section Général, activez les options multimédias dont vous avez besoin : images, vidéo et PDF.
Ouvrez la page dans le éditeur visuel, passez à la langue cible et cliquez sur l'icône en forme de stylo sur l'image (ou le PDF) que vous souhaitez remplacer.
Entrez l'URL du fichier localisé, idéalement avec les mêmes dimensions que l'original, et enregistrez.

Le remplacement d'image fonctionne pour les images ordinaires <img> balises et pour les images d'arrière-plan définies en ligne sur un élément. Le remplacement vidéo couvre les films auto-hébergés <video> sources et lecteurs YouTube intégrés, afin que la page espagnole puisse lire la version espagnole. Les guides étape par étape avec captures d'écran se trouvent dans le centre d'aide : traduire des images et des médias et modifier un fichier multimédia dans une version traduite.

Étant donné que chaque langue vit sur sa propre URL avec des balises hreflang, le texte alternatif traduit et les fichiers localisés sont ce que Google indexe pour cette langue. Voir tout ConveyThis fonctionnalités, ou comment l'éditeur visuel s'intègre dans un flux de travail de révision de traduction.

Une liste de contrôle rapide pour la traduction des médias

Texte alternatif, attributs de titre et légendes traduits sur chaque version linguistique
Noms de fichiers localisés pour les images localisées
Images, captures d'écran et bannières riches en texte recréées par langue, en commençant par vos pages les plus fréquentées
Les prix, les unités, les dates et les numéros de téléphone sur les images correspondent au marché cible
Les versions RTL reflétaient l'importance de la direction
Vidéos sous-titrées ou remplacées ; PDF traduits et liés par langue
Un registre des actifs localisés afin que les mises à jour atteignent chaque langue

Pour une vision plus large de l'adaptation du contenu à chaque marché, y compris le ton, les exemples et les offres, lisez notre guide construire une stratégie de localisation de contenu.

Questions fréquemment posées

Google lit-il le texte à l’intérieur des images ? Ne comptez pas dessus pour le classement. Les conseils d'image de Google se concentrent sur le texte alternatif, les noms de fichiers et le texte placé à proximité de l'image, alors placez les mots qui comptent à ces endroits et dans le HTML de la page.

Dois-je traduire du texte alternatif pour des images décoratives ? Les images décoratives doivent avoir un vide alt="" dans toutes les langues, il n'y a donc rien à traduire. Chaque image significative a besoin d’une description traduite.

La traduction automatique peut-elle gérer le texte d’une image ? Il peut traduire les cordes, mais quelqu'un doit quand même les replacer dans la conception et vérifier l'ajustement. Examinez à la main des chaînes courtes et visibles comme des boutons et des titres.

Étape suivante

Créer un compte ConveyThis, traduisez votre site, puis utilisez l'éditeur visuel pour échanger les images et les PDF qui nécessitent une version locale. Comparer plans lorsque vous ajoutez plus de langues.