Bilder werden nicht richtig dargestellt

    Hallo zusammen,

    ich habe seit kurzem ein Problem und habe leider keine Ahnung wie ich das beheben kann.

    Meine Internetseite habe ich selbst in HTML erstellt und sie ist nun schon viele Jahre im Netz.

    Die Bilder wurden bisher auch immer richtig dargestellt, doch irgend etwas scheint nun plötzlich nicht mehr zu stimmen, nur komme ich nicht drauf woran es liegt.

    Bilder, die eigentlich hochkant auf der Seite platziert sind werden im Querformat angezeigt.

    Bilder im Querformat werden richtig dargestellt.

    Im Quelltext habe ich keine Fehler erkennen können. Ich bin Anfänger, vielleicht habe ich auch etwas übersehen. Wäre super, wenn mir jemand einen Tipp hat.


    Bis vor einem halben Jahr ungefähr wurde in Opera alles richtig dargestellt, dann kam ein Update von Opera und plötzlich stimmte es nicht mehr.

    Zu dem Zeitpunkt war es im Internet Explorer noch ok, seit kurzem besteht das Problem aber auch hier.


    Ich gebe euch mal den Link zu einer Seite, auf der beide Formate (Hochkant und Querformat) eingebunden sind:

    https://woodpeckershop.de/pirate.html und hier der Quelltext dazu: view-source:https://woodpeckershop.de/pirate.html


    Diese Fehler ziehen sich durch die komplette Internetseite und das ist optisch ein Graus.

    Was muss ich tun, um diese Fehler zu beheben?


    Viele Grüße

    Beanie70

    Chrome (und damit auch Opera und Edge) scheint die Bilder gemäß exif-Informationen zu drehen - drehe die Bilder in der Bildbearbeitung (Gimp z.B. weist beim Öffnen auf die exif-Infos hin) und speicher sie ohne diese Infos. Allerdings gibt es bei der Seite noch einiges mehr zu überarbeiten …

    Im Beispiel des TO war es ausreichend, die Exif-Informationen zu entfernen, ein Drehen des Bildes war nicht erforderlich. Unter "Orientation" stand "Rotate 90 CW", dadurch wurde das Bild in die falsche Position gedreht. Nach Entfernen der Exif-Informationen war das Bild OK.

    Dafür eignet sich auch sehr gut das Kommandozeilentool exiftool.

    Ich will ja nicht kritisieren, aber diese Seite ist weder ansprechend noch für kleine Geräte, wie Smartphones oder Tablets geeignet (responisive). Die Navigation ist völlig unübersichtlich und das Design altbacken. Hast du schon mal über einen Relaunch mit modernem Design nachgedacht? Für die Navigation würde ich ein Dropdown-Menü verwenden und ansonsten Flexbox.

    Vielen Dank für die Tipps!

    Ich hatte die Seite erstellt, als wir uns selbständig gemacht haben. Gelernt habe ich HTML rein durch learning by doing. Da bin ich weit davon entfernt gut zu sein, aber mit der Seite habe ich zumindest die Chance Aktualisierungen ohne fremde Hilfe durchzuführen. Dass da noch einiges nicht korrekt ist kann ich mir sehr gut vorstellen. Leider fehlt mir inzwischen die Zeit mich ausführlich damit zu beschäftigen. So lange es richtig angezeigt wird muss ich damit zufrieden sein.

    Was die Bilder angeht denke ich, wird es dann wirklich ein reines HTML-Problem sein, oder?

    Auf PHP-Seiten werden die selben Bilder richtig dargestellt. Wir haben noch ein Shopsystem, bei dem die Bilder richtig angezeigt werden (da hakt es leider an anderer Stelle).


    Mein Englisch ist leider zu schlecht, als dass ich mit dem exiftool zurecht kommen kann.

    Nun habe ich mir GIMP herunter geladen, da das zumindest in deutsch erhältlich ist.

    Die Information "Rotate 90 CW" habe ich da zwar gesehen, allerdings weiß ich nicht, wie ich das bearbeiten kann. Geht das mit diesem Programm überhaupt?

    Sorry für die dummen Fragen, aber das ist totales Neuland für mich.


    Bisher habe ich Ulead Photo Impact genutzt als Bildbearbeitungsprogramm. Damit komme ich einigermaßen klar, nur scheint das wohl leider nicht mehr zu funktionieren, dass die Bilder dann richtig angezeigt werden können.

    Mit Gimp können die Exif-Informationen wohl nicht direkt bearbeitet werden. Allerdings merkt Gimp offensichtlich, dass die Exif-Infos nicht dem Standard entsprechen und fragt beim Öffnen der Bilder entsprechend nach. Allerdings hat Gimp die Eigenart, Bilder in seinem eigenen Format speichern zu wollen. Zur Korrektur kannst du deshalb folgendermaßen vorgehen:


    Zunächst kopierst du die betreffenden Bilder in ein Verzeichnis.


    Dann öffnest du Gimp, markierst alle Bilder und ziehst somit alle Bilder mit der Maus in Gimp.


    Gimp fragt jetzt für jedes einzelne Bild nach ob es rotiert werden soll. Das bestätigst du jeweils mit einem Klick auf den Button "Rotieren".


    Jetzt werden die Bilder korrekt (also um 90 Grad gedreht) angezeigt. Für jedes Bild gibt es einen Reiter.


    Nun rufst du jedes Bild auf, gehst in der Menüleiste auf "Bild - Transformation - Um 90° drehen". Ich musste die Bilder gegen den Uhrzeigersinn drehen, das solltest du dann aber sehen, zumal der Ergebnis direkt angezeigt wird.


    Jetzt drückst du die Tastenkombination "Shift+Strg+e", um das Bild zu exportieren, da Gimp das Bild ansonsten in seinem Format speichern will.


    Es erscheint ein Fenster, in dem der Dateiname mit der Endung "jpg" vorgegeben sein sollte. Das kannst du dann einfach mit der Enter-Taste bestätigen.


    Danach erscheint ein zweites Fenster mit einer Überschreibwarnung. Auch hier kannst du einfach Enter drücken.


    Jetzt erscheint ein drittes Fenster mit dem markierten Button "Exportieren" Auch hier einfach Enter drücken.


    Oder zusammengefasst: Shift-Strg+e, danach dreimal Enter drücken.


    Dann kannst du das nächste Bild aufrufen und genau so drehen.


    Zum Schluß kannst du die Bilder schließen. Dazu klicke ich auf das Schließen-X von Gimp. Mit jedem Klick wird das aktive Bild geschlossen und zuletzt Gimp selbst.

    Vielen Dank für tolle Erklärung!
    Das Drehen und Abspeichern der Bilder funktioniert, nur leider werden sie, wenn man sie hochläd immer noch verkehrt angezeigt.

    Das Bild aus dem Link oben habe ich auf diese Weise abgespeichert und neu hochgeladen, aber leider wird es immer noch falsch angezeigt.

    Bei 2 weiteren Bildern von einer anderen Seite sieht es ebenso aus.

    Irfanview starten und Datei - Thumbnails oder T. Dann in das Verzeichnis mit den Bildern navigieren und die Bilder auswählen.

    Rechtsklick - "JPG - Verlustfreie Operationen" - "Verlustfreie Rotation der selektierten Bilder".


    html-seminar.de/woltlab/attachment/2645/


    In dem Fenster, das dann aufgeht, "Benutzerdefiniert" aktivieren und den Haken bei "EXIF behalten" heraus nehmen. Ganz oben "Transformation: Keine" aktiviert lassen:

    html-seminar.de/woltlab/attachment/2647/


    Mit Starten wird das Ganze dann gestartet.

    Dabei wird auf der originalen Datei gearbeitet, zuvor eine Sicherung anlegen, wenn noch nicht vorhanden, falls etwas nicht so funktioniert wie erwartet.

    Habe die Bilder alle in einen separaten Ordner gemacht und dann bearbeitet.

    Das Bearbeiten ging super schnell, diese Info "Rotate 90 CW" wird nun auch nicht mehr angezeigt, wenn ich bei GIMP das Bild nochmal öffne danach, aber leider ist es auf der Internetseite noch immer nicht richtig dargestellt.


    Geht das nur vom Originalfoto aus oder sollte das auch mit den Fotos funktionieren, die ich bisher auf der Internetseite habe?

    Die unbearbeiteten Originalfotos habe ich auch noch, aber da diese aus sehr unterschiedlichen Jahren sind habe ich die nicht alle sofort parat. Da muss ich die Sicherungen durcharbeiten.

    Super! Vielen herzlichen Dank! Jetzt sieht es wieder aus wie es sein soll.
    Ich werde die Bilder noch mal alle durchsehen, aber so weit ich es beurteilen kann sind die, die ich bearbeitet habe jetzt in Ordnung und was noch fehlt werde ich so auch bearbeiten.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden