Darstellungsfehler bei rotierten Bildern im Hochformat in WordPress

Manche Bilder im Hochformat werden in WordPress falsch dargestellt – hier die Lösung für diesen lästigen Bug.

Bei einem WordPress Projekt tauchte letztens der merkwürdige Bug auf: Hochkantige JPEG-Bilder wurden beim Hochladen direkt um 90 Grad rotiert. Zu Beginn dachte ich mir nichts dabei und passte die Bilder manuell an. Das schien das Problem zumindest in klassischen Webbrowsern zu beheben. Zum Testen rief ich das Frontend dann auf einem iPad unter iOS 10.1 auf mit Safari / Chrome. Und die entsprechenden Bilder wurden hier völlig falsch zugeschnitten angezeigt.

Bei der Recherche kam ich dann auf Foren. Und das Problem liegt nicht bei WordPress, sondern den EXIF-Informationen der Bilder. Ich dachte erst das Phänomen sei auf Fotos beschränkt, die von Apple Geräten stammen, aber dem ist nicht so. Ich kann das Phänomen auch mit Fotos einer Canon Powershot Kamera reproduzieren. Sobald in den Metadaten die Rotation „Rotate 90 CW“ auftaucht, produziert WordPress den Fehler in der Darstellung.

Mit diesem Tool http://exif.regex.info/ lassen sich die Daten vollständig anzeigen wie in diesem Screenshot:

Hier die Lösungsvorschläge für das Problem:

1) Die Dateien in Adobe Photoshop oder Gimp öffnen und neu speichern unter „Für Web und Geräte speichern…“ (Photoshop). Dies geschieht dann ohne Metadaten.

2) Das Plugin Image Rotation Fixer installieren. Allerdings benötigt es die PHP Exif Extension und die hat nicht jeder Server.
Alternativ gibt es auch dieses ios-images-fixer Plugin, das notfalls mit der PHP internen GD Library arbeitet.

3) Du verwendest ein Programm zur Datenkompression wie Image Optimizer (Mac), das die Metadaten des Bildes entfernt. Vor einem Upload auf Bildplattformen wie flickr ist dies nicht zu empfehlen, bei WordPress aber schon.

In diesem Sinne: viel Erfolg!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.