How to Translate Images in WordPress [Complete Guide]

Translate Images in WordPress - Tutorial

When building a multilingual website, the ability to translate images in WordPress is a common request when you need to show different images for different languages.

Translating images in WordPress comes in really handy especially when you deal with images containing text, text that needs to be translated for each language.

Image translation, or more generally, media translation is really straight forward using TranslatePress. As with other types of content, you will be able to translate images directly from the front-end, using TranslatePress visual translation editor.

TranslatePress Image translation

This functionality extends to all media types, whether it’s images with text, sliders, videos or other uploaded media, you can use the same approach below to translate them as well as the associated meta information (e.g title, alt text).

Translate Images in WordPress

Translating images directly from the front-end was something our users constantly requested. We had a solution for this, in the form of a conditional shortcode based on language, which worked just fine.

However, this had to be used in the back-end, so somehow breaking the intuitive front-end translation flow that TranslatePress is known for.

You should be able to translate ANY type of content directly from the front-end. That’s why with a bit of refactoring, we moved the ability to translate images, sliders & more to the front-end. This makes it easier than ever to display different media based on language.

Some of the use cases of image translation in WordPress:

  • having an image or website logo with text, that needs to change when you change the language.
  • selling an ebook, where the cover needs to reflect the title in the selected language of your multilingual site
  • creating multilingual sliders, that contain several images with text that need to be translated
  • translating WooCommerce product images (courses, events, books, t-shirts…really any type of product that has text on it)

Translating Images containing Text

Now that we went through some of the use cases of image translation, let’s dive in the simple process of translating images containing text.

After installing and activating TranslatePress, you’ll notice a new Translate Site” item added in the admin bar.

TranslatePress Settings in Admin Bar

Hover over it and click “Settings” to be taken to TranslatePress settings. From here you can add a new translation language. We’ll use Spanish for this example.

TranslatePress Add Translation Language

After that, simply “Save changes” and click “Translate Site” to start translating your site content.

You’ll be taken to a front-end visual translation interface. From here you can navigate to the page containing your image with text.

Simply hover over the image and click the translatepress edit button icon to replace it with a different image containing the text in Spanish.

Translate Images with Text in WordPress using TranslatePress

In our case we have a blog post focusing on “Saving the trees”, that includes an image with text. After clicking the translatepress edit button icon, in the translation sidebar you can upload or select a different image source for the Spanish version.

Select or upload the translated version of the image, click “Save translation” and you’re done. Switching the language to Spanish will now display the Spanish version of the image with text.

You can also select the image by name from Translation sidebar, locating it in the drop-down of strings under Images option group.

List of images that can be translated using TranslatePress

Translating Image Title and Alt Attribute

Moving forward, besides the image source you can also translate meta information such as the title and alt attribute.

To translate the alt attribute you will need the SEO Add-on which is available in the premium versions of the plugin.

Translating the image alt text can have a positive impact on the search engine rankings in multiple languages.

Translating image alt attribute and title using TranslatePress

Having the SEO add-on installed and activated, will give you access to translating the alt text when clicking an image. If your image has a title set in the original language, you’ll be able to translate that as well.

As seen in the image above, all the image meta information will be displayed together with the image source in the translation sidebar.

Translate images containing links

Another popular scenario for WordPress image translation is when that certain image contains a link as well. For example an ebook cover image linking to a .pdf with its content, or different external links to where different versions can be purchased.

If your image links to something, TranslatePress will detect this and allow you to modify the media link or external url based on language.

How to translate images containing links using TranslatePress

If your image contains a link, you’ll notice an “Anchor link” displayed in the translation sidebar when selecting it. This can be used to have translated versions of your image link to different places.

In the example above we used it to link to different Amazon book pages. The English version links to the Amazon English title, while the Spanish cover links to Amazon Spanish version of the book.

How to Translate Images with Links using TranslatePress

Create multilingual sliders

Since sliders are basically a collection of images, you can use the same approach to translate an image slider or carousel containing multiple images.

You’ll simply need to hover over each image that needs to be translated, click the translatepress edit button icon and select the one you want to replace it with in a different language.

TranslatePress Image Slider carousel translation

If the slider images contain links to certain local media files or link externally even, you can use the “Anchor link” to customize it based on selected language.

Wrapping it up

Translating images in WordPress using TranslatePress now follows the same intuitive visual approach as with translating any type of content (be it Gutenberg blocks, forms, pop-ups & more).

Due to its front-end translation approach, you can use TranslatePress to translate all your website content, independently of how it was created.

Keep in touch!

We'll only notify you of new articles, special promotions and updates. No spam!

One thought on “How to Translate Images in WordPress [Complete Guide]

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.