0

I have big problem with image which has higher height then width. Look there:

http://www.ledgreen.cz/test.html

I don't understand why this image is rotate can you someone explain it to me?

Thanks

Michal

folpy
  • 139
  • 2
  • 10
  • have you checked if your image is saved in landscape or portrait? – Sphinx Jan 26 '16 at 10:48
  • Because your camera took the image in landscape mode? – AVAVT Jan 26 '16 at 10:48
  • check this: http://stackoverflow.com/questions/24658365/img-tag-displays-wrong-orientation – Salem Ouerdani Jan 26 '16 at 10:51
  • 1
    why down vote ? it is duplicate but he is seing his picture source file opened on the right direction when opening on new tab (at leat on chrome): http://ledgreen.cz/img/cms/IMG_0113.JPG – Salem Ouerdani Jan 26 '16 at 10:55
  • sorry but image-orientation: from-image; according to http://caniuse.com/#feat=css-image-orientation support only firefox. Do you think that problem could be in image? If I look there http://regex.info/exif.cgi?dummy=on&imgurl=http%3A%2F%2Fledgreen.cz%2Fimg%2Fcms%2FIMG_0113.JPG it look also wrong. So maybe images are wrong because this is first time which I see this fault. – folpy Jan 26 '16 at 11:00
  • I could use transform but some images will be in landspace mode. – folpy Jan 26 '16 at 11:01
  • yes. problem in image. the html page and regex.info gave you the real image orientation. you can reorient it within CSS or check the image itself & your camera settings. – Salem Ouerdani Jan 26 '16 at 11:05
  • in the same url you gave ([regex.info](http://regex.info/exif.cgi?dummy=on&imgurl=http%3A%2F%2Fledgreen.cz%2Fimg%2Fcms%2FIMG_0113.JPG)) you'll see on its EXIF data : `Orientation : Rotate 90 CW` – Salem Ouerdani Jan 26 '16 at 11:15
  • Thanks guys I solve it there was really wrong photo when I open it on Photoshop and save it then everything is OK. I hope that even thought you vote down I help someone with this thread. – folpy Jan 26 '16 at 11:57

1 Answers1

1

According to Wikipedia :

Exchangeable image file format (officially Exif, according to JEIDA/JEITA/CIPA specifications) is a standard that specifies the formats for images, sound, and ancillary tags used by digital cameras (including smartphones), scanners and other systems handling image and sound files recorded by digital cameras.

With different words :

Almost all digital cameras and smartphones save photos with EXIF data. Those informations like camera settings, image orientation... are recorded by the camera into the image file.

The EXIF data of the image you are using (as shown in the same link you provided: regex.info) has an orientation attribute set to 90° (Orientation : Rotate 90 CW).

Some navigators or image editor softwares (like GIMP, Photoshop, OS X Preview, OS X Finder) respect the EXIF orientation flag, and display the image upright. But others may ignore it.

I found this linked bug in Chromium issue pages where according to thakis@chromium.org :

As of webkit r132525, this is done when viewing image files directly. That change missed today's canary by 15 revisions, but it should be intomorrow's.

Images referenced from html files in elements are not affected, intentionally for web compat -- this might be addressed through an explicit opt-in via css as suggested by noel in comment 8, but that's not done at the moment.

It doesn't look to be yet fixed to me as shown within your exemple while I did notice that some google services like Gmail will consume the EXIF metadata with attached images to output it with the expected orientation.

I think an ordered list of possible solutions to this starting from the most recommended would be :

  1. Checking settings of any camera or device before taking any picture to disable rotation within EXIF metadata when those pictures are meant to be used on web pages due to incompatibilities with several web navigators.
  2. Use an image editor. to reorient the image or disable the reset orientation EXIF meta flag.
  3. Use CSS or equivalent to reorient images in webpages. (see exemple)

NOTE: Several offline or online applications like Jeffrey's Exif Viewer or exifdata.com may help to parse and read EXIF metadata.

Community
  • 1
  • 1
Salem Ouerdani
  • 7,596
  • 3
  • 40
  • 52