Ina Eberle: Bilder werden im Browser gedreht

problematische Seite

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 EberleOchsenzunge; das Bild wurde im Browser gedreht

  1. problematische Seite

    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

    1. problematische Seite

      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.

      1. problematische Seite

        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

        1. problematische Seite

          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

    2. problematische Seite

      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.

      1. problematische Seite

        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.

        1. problematische Seite

          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

          1. problematische Seite

            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

            --
            Ήταν διασκεδαστικό όσο κράτησε.
            Χρύσιππος ὁ Σολεύς, 220 π.Χ.
    3. Dieser Beitrag wurde gelöscht: Der Beitrag ist ein Duplikat eines anderen Beitrags.
    4. problematische Seite

      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

      1. problematische Seite

        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

        --
        Du kannst das Projekt SELFHTML unterstützen,
        indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
      2. problematische Seite

        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

        --
        Ήταν διασκεδαστικό όσο κράτησε.
        Χρύσιππος ὁ Σολεύς, 220 π.Χ.
  2. problematische Seite

    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.

    1. Dieser Beitrag wurde gelöscht: Der Beitrag ist ein Duplikat eines anderen Beitrags.
  3. Dieser Beitrag wurde gelöscht: Der Beitrag ist außerhalb des durch dieses Forum abgedeckten Themenbereichs.