Bilder werden im Browser gedreht

[Ina Eberle]

Hallo, ich erstelle meine Seiten schon lange ohne Probleme mit Ulli Meybohms HTML EDITOR. Nun plötzlich werden einige Bilder im Browser um 270 Grad gedreht und in Folge verzerrt dargestellt. In der Bildinfo steht dann:

Maße: 167px × 250px (Skaliert zu 250px × 167px)

Was kann ich tun? Grüße aus Wellie von Ina Eberle

[Felix Riesterer]

Liebe Ina,

Nun plötzlich werden einige Bilder im Browser um 270 Grad gedreht

wenn Du mit dem Smartphone ein Bild machst, dann speichert das, ob Du das Bild hochkant oder breitformatig aufgenommen hast. Diese Information berücksichtigt das Smartphone bei der Anzeige, damit das Bild immer "aufrecht" angezeigt wird. Der Browser berücksichtigt diese Information nicht. Daher passiert Dir das beschriebene Verhalten.

Die Lösung ist, das Bild mit einer vernünftigen Bildbearbeitung zu öffnen, die diese Information berücksichtigt und Dir anbietet, das Bild entsprechend zu drehen, bevor Du es bearbeitest. Empfehlen kann ich Dir die freie Software GIMP, von der ich aus eigener Erfahrung weiß, dass sie hier wie beschrieben hilft.

Liebe Grüße

Felix Riesterer

[Mitleser 2.0]

wenn Du mit dem Smartphone ein Bild machst, dann speichert das, ob Du das Bild hochkant oder breitformatig aufgenommen hast. Diese Information berücksichtigt das Smartphone bei der Anzeige, damit das Bild immer "aufrecht" angezeigt wird. Der Browser berücksichtigt diese Information nicht. Daher passiert Dir das beschriebene Verhalten.

Soweit alles richtig, nur eine kleine Korrektur: es gibt tatsächlich Browser, die das auswerten. Zumindest beim IE11 war das so.

Ansonsten muss es nicht zwangsläufig Gimp sein. Z.B. IrfanView würde auch schon reichen.

[me-too]

Hi,

wenn Du mit dem Smartphone ein Bild machst, dann speichert das, ob Du das Bild hochkant oder breitformatig aufgenommen hast. Diese Information berücksichtigt das Smartphone bei der Anzeige, damit das Bild immer "aufrecht" angezeigt wird. Der Browser berücksichtigt diese Information nicht. Daher passiert Dir das beschriebene Verhalten.

Soweit alles richtig, nur eine kleine Korrektur: es gibt tatsächlich Browser, die das auswerten. Zumindest beim IE11 war das so.

Dafür gab es das Attribut orientation, mit dem man die Drehung steuern, bzw. unterdrücken konnte. Leider finde ich das jetzt auch nicht sofort. Könnte auch im CSS gewesen sein.

Ansonsten muss es nicht zwangsläufig Gimp sein. Z.B. IrfanView würde auch schon reichen.

LG
me-too

[me-too]

Hi,

wenn Du mit dem Smartphone ein Bild machst, dann speichert das, ob Du das Bild hochkant oder breitformatig aufgenommen hast. Diese Information berücksichtigt das Smartphone bei der Anzeige, damit das Bild immer "aufrecht" angezeigt wird. Der Browser berücksichtigt diese Information nicht. Daher passiert Dir das beschriebene Verhalten.

Soweit alles richtig, nur eine kleine Korrektur: es gibt tatsächlich Browser, die das auswerten. Zumindest beim IE11 war das so.

Dafür gab es das Attribut orientation, mit dem man die Drehung steuern, bzw. unterdrücken konnte. Leider finde ich das jetzt auch nicht sofort. Könnte auch im CSS gewesen sein.

Kaum hat man das Posting abgeschickt, findet die Suchmaschine doch etwas:

image-orientation

Ansonsten muss es nicht zwangsläufig Gimp sein. Z.B. IrfanView würde auch schon reichen.

LG
me-too

[Ina]

Herzlichen Dank für den Hinweis - nun besteht das Problem erst nach einem Firefox Update am 4.Juni, also gestern. Vorher hat das Bearbeiten der Bilder und hochladen geklappt. Bei Microsoft Edge werden alle Bilder dagegen korrekt dargestellt. Viele Grüße von Ina.

[me-too]

Herzlichen Dank für den Hinweis - nun besteht das Problem erst nach einem Firefox Update am 4.Juni, also gestern. Vorher hat das Bearbeiten der Bilder und hochladen geklappt. Bei Microsoft Edge werden alle Bilder dagegen korrekt dargestellt.

Da muss man dann wohl image-orientation: from-image angeben.

Viele Grüße von Ina.

[JürgenB]

Hallo,

Da muss man dann wohl image-orientation: from-image angeben.

z.Zt merken das aber nur etwas mehr als die Hälfte der Besucher:

https://caniuse.com/#search=image-orientation

Gruß
Jürgen

[Matthias Scharwies]

Servus!

Hallo,

Da muss man dann wohl image-orientation: from-image angeben.

z.Zt merken das aber nur etwas mehr als die Hälfte der Besucher:

https://caniuse.com/#search=image-orientation

Da das angesprochene Problem ja erst seit kurzem auftritt, ist es ja ok.

Alte Browser stellen die Bilder auch ohne CSS richtig dar - neue Browser drehen und benötigen deshalb diese CSS-Eigenschaft.

Herzliche Grüße

Matthias Scharwies

[Ina]

Hallo Felix, Betrifft: https://www.dorfgemeinschaft-wellie.de/20blumen.html

Hallo, ich erstelle meine Seiten schon lange ohne Probleme mit Ulli Meybohms HTML EDITOR. Im Editor werden alle Bilder auch richtig angezeigt. Nun plötzlich werden einige Bilder im Browser um 270 Grad gedreht und in Folge verzerrt dargestellt. In der Bildinfo steht dann:

Maße: 167px × 250px (Skaliert zu 250px × 167px)

Bei den richtigen Bildern steht das nicht so. Bisher ist das auch nie passiert, und ich finde den Fehler nicht. Bei Microsoft Edge gibt es das Problem nicht.

Nun übers Wochenende habe ich bei Freunden rumgefragt und erfahren, dass je nach Browser die Bilder mal korrekt und mal gedreht dargestellt werden. Vielleicht hilft diese Info ja bei dem Problem weiter:

iMac (Rechner) unter Safari (Version 13.0.1) korrekt

unter Safari (letzte Version 12.4.6., wird nicht mehr gepflegt) fünf Bilder um 90 Grad verdreht

korrekt sind Microsoft Edge, nicht korrekt Firefox und Opera

Korrekt Samsung Internet Browser 11.2.2.3 (aktuell) auf Tablet und handy
Danke und Grüße aus Wellie von Ina Eberle 

Danke und Grüße von Ina

[Matthias Apsel]

Hallo Ina,

Nun übers Wochenende habe ich bei Freunden rumgefragt und erfahren, dass je nach Browser die Bilder mal korrekt und mal gedreht dargestellt werden. Vielleicht hilft diese Info ja bei dem Problem weiter:

Wenn du den Thread aufmerksam liest, wirst du feststellen, dass das Problem schon gelöst ist. Die empfohlene Vorgehensweise ist die Änderung der Bilder mit einem geeigneten Programm. Für neue Browser und neu hinzukommende Bilder kannst du die CSS-Eigenschaft image-orientation verwenden.

Bis demnächst
Matthias

[Matthias Scharwies]

Hallo Ina,

Hallo Felix, Betrifft: https://www.dorfgemeinschaft-wellie.de/20blumen.html

Hallo, ich erstelle meine Seiten schon lange ohne Probleme mit Ulli Meybohms HTML EDITOR. Im Editor werden alle Bilder auch richtig angezeigt.

Du redest von deiner HTML-Webseite; Felix von den Bildern.

Bilder enthalten neben den Bilddaten oft noch Metadaten, in denen die technischen Details des Fotoapparats, bei teuren Spiegelreflexkameras und Handys oft auch noch die GPS-Daten gespeichert werden.

Bis jetzt hat das im Webdesign keine Rolle gespielt; die Bilder wurden „normal“ dargestellt.

Nun plötzlich werden einige Bilder im Browser um 270 Grad gedreht und in Folge verzerrt dargestellt. In der Bildinfo steht dann:

korrekt sind Microsoft Edge, nicht korrekt Firefox und Opera

Da haben die Browser jetzt neu etwas eingebaut, dass die in den Metadaten vorhandene image-rotation (ob Du das Handy hochkant oder quer hattest) berücksichtigt.

In diesen neuen Browsern musst du, wie me-too erwähnte, jetzt dies setzen:

image-orientation: from-image ;

Keine Angst, dass es dann in den alten Browsern schief aussieht. Diese verstehen diese CSS-Eigenschaft nicht und ignorieren sie deshalb.

Felix hatte die Möglichkeit erwähnt, diese Metadaten durch ein Bildbearbeitungsprogramm zu entfernen. Da muss man nichts tun. Beim Drehen und Zuschneiden wird so etwas automatisch getan.

Herzliche Grüße

Matthias Scharwies

[territrades]

Passiert dir das mit alten Bildern oder sind das neue Bilder?

Smartphones und Digitalkameras haben ja einen Neigungssensor um das Bild richtig rum anzuzeigen wenn der Nutzer die Kamera dreht. Einige Kameras speichern dann das jpeg direkt gedreht ab, andere speichern nur ein Attribut ab dass das Bild beim Anzeigen vom Betrachterprogramm gedreht werden soll, aber manche Programme ignorieren dieses Attribut.

Das passiert mir z.B. bei Bildern von meinen iPhone. Die werden mir auf dem PC in manchen Programmen richtig angezeigt, in anderen verkehrt rum. Da hilft einem nur das Bild selbst in einen Bildbearbeitungsprogramm zu drehen und dann neu abzuspeichern.