Test page: Translated images

Test page: Translated images
  1. Home
  2. Template pages
  3. Test page: Translated images

Simple pictures

[alt text EN]

The picture on the homepage

–> nicht manuell übersetzt, aber TranslatePress holt das übersetzte Bild aus seiner Library und zeigt die Sprachvarianten
–> korrekte Anzeige auf dem Desktop, auch bei schmaleren Breiten (<960 px = Tablet, <576px = Smartphone)
–> keine korrekte Anzeige für EN und ES auf Mobilgeräten, hier wird das Bild in DE angezeigt

[Alternative text EN]

Bild mit Varianten für die Übersetzungen

Prozess:
Bild wurde in der Original-Sprache eingesetzt (DE)
In TranslatePres wurden für EN und ES jeweils andere Bilder zugeordnet

Bildformat:

Original aspect ratio: 3:2 (1920 x 1280 px)
Image format in Pagebuilder: 2:1

Bildquellen:
testbild-1920×1280-DE.jpg
testbild-1920×1280-EN.jpg
testbild-1920×1280-ES.jpg

https://dezem2.meiio.net/wp-content/uploads/testbild-1920×1280-DE.jpg
https://dezem2.meiio.net/wp-content/uploads/testbild-1920×1280-EN.jpg
https://dezem2.meiio.net/wp-content/uploads/testbild-1920×1280-ES.jpg

Probleme:

Anzeige der übersetzten Bilder:

Desktop:
Die übersetzten Bilder werden in allen 3 Breiten korrekt angezeigt.

Tablet Hochformat (<576 px):
Die Bilder der anderen Sprachen werden nicht korrekt angezeigt, es wird das Bild in DE gezeigt.
Im Code ist die falsche Bildquelle eingesetzt (DE), aber der Alt-Text wird korrekt und passend zur Sprache im Code eingesetzt.

Mobile:
Die Bilder der anderen Sprachen werden nicht korrekt angezeigt, es wird das Bild in DE gezeigt.
Im Code ist die falsche Bildquelle eingesetzt (DE), aber der Alt-Text wird korrekt und passend zur Sprache im Code eingesetzt.

Proportion der übersetzten Bilder:

DE: alles ok
EN: Bild wird nicht mehr vertikal zentriert – Grund unklar
ES: Bild wird nicht mehr vertikal zentriert – Grund unklar

Bildoptimierung im Theme uncode

Möglichkeiten: 
1. keine
2. Dynamic Srcset = Das scrset wird per JS aus data-Attributen des img-Elements erstellt. Im Theme können manuell die Stufen für das srcset eingestellt werden.
3. Adaptive Images = Beim Rendern der Seite wird ein gesonderter, leerer Container in der Größe des Bildes per JS ausgemessen und danach das passende Bild als Quelle eingesetzt.

Eingestellte Optimierung:
Adaptive Images = OFF
Dynamic Scrset = ON
Images Sizes Range = 360,720,1080,1920

Quellen:

Adaptive Images:
https://support.undsgn.com/hc/en-us/articles/214003845-Adaptive-Images

Dynamic Scrset:
https://support.undsgn.com/hc/en-us/articles/4403183673873-Dynamic-Srcset-Images

Discover more

Einstellungen zum Datenschutz

Einstellungen

We use cookies and similar technologies to operate our website in a convenient and technically secure manner and to collect usage statistics:
- Technically necessary cookies that are required for convenience and security (e.g. for the selected language).
- Optional anonymised tracking with Google Analytics and Google Tag Manager. Data may be transferred to third countries such as the USA.
- Optionally the display of videos from YouTube. Data may also be transferred to third countries such as the USA.
You can decide for yourself which services you want to authorise. You can change your selection at any time. A detailed description of all services and cookies can be found in our privacy policy. You can access this information without having to consent to the services.

Necessary Cookies

Erforderlich
[Description for necessary cookies: uncode theme, language switcher] Some cookies are used to optimise the presentation of this website and to make it easier to use. For example, the size of the browser window and your choice of language are stored, but no personal data. They are only stored locally and only for the duration of your visit. A list of these cookies can be found in the privacy policy. These cookies are necessary for the operation of the website (legitimate interest according to Art. 6 para. 1 GDPR).

Tracking

[Description for tracking: Google Analytics + Tag Manager] Google Analytics and Google Tag Manager tracking is used in anonymised form for the anonymised collection and analysis of usage statistics. Cookies are set locally and data such as the number of visits and page views are recorded and stored anonymously. Anonymised data is transferred to Google in third countries, in particular the USA. A detailed description can be found in our privacy policy.

YouTube

[Description for YouTube] Videos from YouTube are integrated for the presentation of our products and services. When you watch the videos, data is transferred to third countries such as the USA. You can find a detailed description in our privacy policy.