Simple pictures
![[alt text EN]](https://dezem2.meiio.net/wp-content/uploads/deZem-sense-check-act-energy-management.jpg)
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]](https://dezem2.meiio.net/wp-content/uploads/testbild-1920x1280-EN.jpg)
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


