Recently I took a photo of a friend and it was portrait orinetation and the dimensions were maybe 200px wide X 400px tall.
However, when the < img > was displayed on my web page, the picture got rotated 90 degrees so my friend is sideways?
If I preview her picture it is oriented the correct way, but for some weird reason is getting displayed incorrectly on my web page.
Picture was taken with my digital SLR and this happens now and then.
What is going on?
members would need the link to the web page in question.
This would enable them to actually view the problem and
perhaps offer solutions to it.
Have you teasted the orientation of the image in your image
editor software?
coothead
The photo has some EXIF meta data that tells whatever viewer you’re using on your machine to rotate the image when displaying it. Browsers don’t look at this EXIF data, so they display the image without rotating it.
The solution is to strip out this EXIF metadata and then rotating the image by rotating the pixels.
See https://docs.krita.org/en/contributors_manual/optimising_images.html#editing-the-metadata-of-a-file for editing EXIF data (they call it metadata on that page, same thing).
So let’s apply what you said to my problem.
Let’s say that I take a picture of Mary with my camera rotated 90 degrees to portrait and take her picture. So maybe it is 4 X 6 - I don’t know the dimensions in my camera.
When I view that picture, I would expect to see it portrait/vertical to mimic real life.
But considering how you normally hold a camera, to the camera itself I guess it was like Mary was standing sideways, correct?
And you are saying the EXIF tag tells my photo viewer to rotate the picture to mimic reality, right?
So because I rotated my camera to do a portrait, I need to rotate the file 90 degrees so when I view the photo on my computer or on my webpage it displays to relfect real life?
If I use software like Photoshop of Lightroom can I strip out the EXIF data and rotate things so they display properly?
Photoshop’s “save for web” command will remove exif, and you can certainly rotate too. EXIF is good to strip out even if you don’t have this rotation issue, because it can be a decent sized chunk of data which is rarely useful on a web site (if it’s a photography web site for example, some tools will extract and display EXIF info (e.g. “shot at 1/1000 sec, f/2.8”) to the user, which will of course not be available if you strip it out).
So do you think the reason my photos are displaying correctly on my computer but not on my web page is because the EXIF data got messed up?
No, I’ve never heard of exif data getting messed up. Some products that display photos read through exif and try to “help” you by doing rotations. Others don’t. Until such time as all software does the same thing, this will be a problem.
Well, to be clear, sometimes my photos which appear with the correct orientation in preview on my OS are not being displayed that same correct way on my web page.
This happens randomly with both my digital SLR and my iPhone.
A few weeks ago I was taking a picture of a friend with my phone and so I was holding the phone in normal portrait orientation, and when I viewed the photo on my computer it looked okay, but on my web page - the one I am hand coding using HTML/CSS - my friend’s picture was rotated 90 degrees.
So why would my web page decide to rotate a portrait photo of my friend and make it landscape orientation, thus making my friend look like he was attached to the wall?! 
I am thinking the EXIF data is messed up, or there is something about HTML/CSS that I have yet to learn…
Correct. And the camera may store that it was rotated in the EXIF data so that when you view the image in a viewer that supports EXIF the orientation is correct.
What model digital SLR do you have?
If Canon, their “Digital Photo Professional” software will show you the EXIF data and separately show the orientation of the image
Nikon.
I am looking at various digital editors now…
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.