Different images for different languages in multilingual stores without 3rd party software

Solution 1:

on code is not really hard, but is boring to maintain.

1. you should upload your images by settings/files.
2. on the folder Locales of your theme you have the languages JSON files. Create inside an object "images" and there create the keys you need, and set as value the link you have from step 1.
3. On your template use liquid translation to translate the image address it will manage to change the file address. done!

EX: on pseudo code:

file: locales/en.default.json

{
  "images": {
    "sliders": {
      "1": "slider_1_en.jpg",
      "2": "slider_2_en.jpg"
    }
  }
  // .... rest of the file 
}

file: locales/es.json

{
  "images": {
    "sliders": {
      "1": "slider_1_es.jpg",
      "2": "slider_2_es.jpg"
  }
  // .... rest of the file 
}

IMPORTANT: save the name of the file including the extension. slider_1_es not works. It should be slider_1_es.jpg.

Do the same on all the languages you use

Now on any liquid file were you need the translated image, you can do a simple image:

<img
 src="{{ 'images.sliders.1' | t | file_img_url: '1500x' }}"
 loading="lazy"
>

Or even somethin more complex using srcset:

<img
  srcset="
   {{ 'images.sliders.1' | t | file_img_url: '375x' }} 375w,
   {{ 'images.sliders.1' | t | file_img_url: '750x' }} 750w,
   {{ 'images.sliders.1' | t | file_img_url: '1100x' }} 1100w,
   {{ 'images.sliders.1' | t | file_img_url: '1500x' }} 1500w,
   {{ 'images.sliders.1' | t | file_img_url: '1780x' }} 1780w,
   {{ section.settings.image | img_url: '2000x' }} 2000w
 "
 sizes="(min-width: 750px) calc(100vw - 22rem), 1100px"
 src="{{ 'images.sliders.1' | t | file_img_url: '1500x' }}"
 loading="lazy"
>