Design & UX
I've got a REALLY weird issue. In 14 years of web development, I've never seen this. Please see the below page:
If you scroll down to the photos, look at the 5th one (the bathroom mirror). As you can see - its sideways! However, the image itself is fine:
Some are even worse - and rotated 180 degrees!
What could cause this? I'm drawing a blank on it. The only stuff I've found online so far, is about the iPad/iPhones, who treat image rotation Exif data differently... but this is occuring in Chrome, FF and Safari for me... so I'm wondering if it goes deeper than that.
I also looked into the possibility that maybe a CSS rule was doing the rotation, but I can't see anything :/
Mmm ok - so after some more digging, I'm still no closer
Here is a test page, where you can see those images:
I'm absolutely baffled as to why this is happening. Anyone got any ideas?
That is bizarre.
Except for the one that's rotated a full 180 degrees, I would guess the script that is scaling the images is responsible.
If you make a test page with just img tags and no script are they still rotated?
Thanks for the reply! Yeah, well the JSFiddle literally has no scripts - its just basic HTML:
<img src="http://chambresorgslides.ereserveltd.netdna-cdn.com/links/images/0/xlarge-549510-image.jpg" />
<img src="http://www.chambresdhotes.org/links/images/0/xlarge-549510-image.jpg" />
At first, I thought maybe it was the CDN causing the issues (using maxcdn), but even with the local file its having the same issue.
We do pass the original images via
jpgtran to optimize them, and also image::magick's
convert command to shrink them down. But that being said, I would have expected the image here to be sideways as well, if that were the cause:
I'm really at a loss as to what could be causing it :/
I saved a copy of the 549510 image and checked it's properties.
Even though it displays in "portrait" orientation (right side up) it has
Width 600 pixels
Height 448 pixels
which seems opposite.
Yeah, its really bizarre :/ I'm sure it can't be a jpgtran issue, as that doesn't do anything with orientation - and imagemagick, I'm sure it can't be that doing it either - as I've been using that for 10+ years, and never had a problem like this
Its driving me up the wall :S
What imagemagick command are you using?
I downloaded and opened the following image using Linux's Gimp editor and informed me that the Exif orientation was incorrect.
The option to correct the orientation was selected, file saved to a different file name, opened in a HTML file and the orientation was correct.
Thanks for the reply everyone. This is the command:
convert "$uploaddir/$temp_id/$filename" -resize 1000x1000\\> "$uploaddir/$temp_id/$filename"`
Basically, converting the uploaded image into a max size of 1000x1000. People on our site have a habit of uploading 5000x5000 pics, and they kill disk space!
I can't see how that command could be breaking it though?
I'm also not sure we could correct the Exif programmatically, by detecting the issue at source? (its entirely possible the user had a bad file they uploaded too!)
As you say that command should not cause a problem.
I'm also not sure we could correct the Exif programmatically, by detecting the issue at source?
How will you know which file is correct and which is wrong?
It seems a bit strange to use jpgtran and Imagemagick, I suppose you do not have the original photo if it is being uploaded by the user? Could you ask the photo uploader to send you the photos via email so you could carry out some tests as anything else is speculation.
How will you know which file is correct and which is wrong?
My thoughts exactly
It seems a bit strange to use jpgtran and Imagemagick,
I'm using jpgtran to remove exif headers we don't need - as we had images that were 100kb for a 100x100 image (due to having a ton of location, meta, etc etc, which was useless to us) ... then we do the resize into the respective sizes we need
I suppose you do not have the original photo if it is being uploaded by the user? Could you ask the photo uploader to send you the photos via email so you could carry out some tests as anything else is speculation.
Already ahead of ya Just waiting to hear back from them.
Just out of interest -thumbnail will remove all the file data except the colour profile as will -resize wxh -strip and would save you one step. Although not very helpful if there is some data you want to keep.
Ugh! The only thing I can think of is copying the images and saving them with a known EXIF
Not the best idea and a definate maintenance nightmare.
Hopefully going with an email solution will buy you enough time to get it automated by the time you need to.
Ah cool - Is that a simple case of just replacing "resize" with "thumbnail" ? That would certainly help from a programing point of view, as it means I wouldn't need to run jpgtran as well
Yeah for sure TBH, its not happening on a ton of images - but it is getting more common. It'll be interesting to see if the original image has the same issue (if so, then it could be something to do with the device it was taken on, in which case we'll just have to fix them up as we find them - which would be a sod)
Thanks for looking so far though!
Ah cool - Is that a simple case of just replacing "resize" with "thumbnail" ?
On my gallery I use a database and get any EXIF data I need from the image before resizing it with -thumbnail.
Ah brill, I'll have to give that a go tomorrow Doubt it'll help with this issue, but its handy to know for optimizing
Sorry I took so long to get back on this. For some reason, the person didn't reply to my email asking for the original! Anywho, on a totally different job - I just came across the same problem.
I'm pretty sure its an iOS issue - but I'm not too sure why it happens. Any suggestions would be much appreciated
BTW - I'm hoping it comes out ok (I didn't do any resizing, but it looks like the forum may well have - as the original was 1mb, not 250kb, as is showing here)