Localization of Image and Audio Files

Image Localization

Localize allows you to translate images in your project by using the Localize dashboard. A translated image can be added for each target language in your project.

This is helpful in those cases where text can't be removed from an image file.
It is also useful for images that need to be translated for a particular culture/country/language/region.

With this feature enabled, Localize will find images¹ in the HTML source of your web pages, and will bring them in as phrases into the dashboard. Each image "phrase" will show the URL to the source image file. After uploading the alternate image(s) to your website, copy the URL to that image and paste it into the "translation" of that phrase, as seen below.

Enable in Project Settings

First, you must enable this option in your Project Settings.

Using the Phrases Editor

You will need to upload a separate image file to your website for each target language prior to adding the image filename "translations" in the Localize dashboard. We recommend that you use a standard file naming convention using the language code, when possible.

Here we see a phrase in the Localize dashboard that contains an image name. You simply provide the URL for the alternate image in the "translation" for that phrase.

Sample web page in English with the graphic:

Same web page in Spanish with 2 "translated" graphics:

Read how to enable this option here...

📘

Notes

• ¹Currently, Localize will only find images that are contained within the HTML <img> element.

• Also, Localize only looks at the src attribute for the image name. If you are using an <img> tag that includes other attributes (e.g. srcset), Localize currently does not support these other attributes when localizing images.

  • For these types of image tags you can use one of the solutions detailed here.

• Images added via CSS can be supported using CSS selectors, as detailed here.

Using The In-Context Editor

You can also use the In-Context Editor. to provide alternate image URLs for your Web-based projects.

Here's a page in the In-Context Editor in the source language: English:

And here's the same page in the In-Context Editor in a target language: Spanish.

1. Click on the image in the website pane on the right
2. This will display the phrase panel on the left for that image (make sure you have a language selected)
3. Add/edit the URL for the image
4. Click Publish (or Propose if using the Translation QA workflow)
5. Refresh the page and you'll see the updated image!
6. Visit your website and refresh the page to see the translated image in your target language.

Audio Localization

Localize allows you to translate audio files in your project by using the Localize dashboard. A translated audio file can be added for each target language in your project.

This is helpful in those cases where you have audio files in your site that have spoken language in them.

With this feature enabled, Localize will find audio¹ elements in the HTML source of your web pages, and will bring them in as phrases into the dashboard. Each audio "phrase" will show the SRC attribute for the audio file. After uploading the alternate audio file(s) to your website, copy the URL to that audio file and paste it into the "translation" of that phrase.

📘

lz-audio System Label Added

When brought into your Localize dashboard, the system will automatically add the lz-audio system label to the audio "phrase". This makes it easy to find all audio files in your dashboard.

Enable in Project Settings

First, you must enable this option in your Project Settings.

Using the Phrases Editor

You will need to upload a separate audio file to your website for each target language prior to adding the audio filename "translations" in the Localize dashboard. We recommend that you use a standard file naming convention using the language code, when possible.

To add the target language audio file to a phrase, click on that phrase and add a "translation" which is the alternate SRC URL for the target language audio file for that phrase.

Read how to enable this option here...

📘

Notes

¹Currently, Localize will only find audio files that are contained within the HTML element.

Localization of Other Media Files

For all other media types (e.g. PDF, video, etc.) see our documentation here.