I was updating some photos on a client site in WordPress when I ran into this strange issue. Though the images were showing up properly in my browser, on my iPhone, they would end up sideways. I hadn’t really encountered anything like this before. When I tried to investigate using my browser’s developer tools, the photos still appeared properly oriented. So what was I to do? Write a media query to rotate the pictures on a mobile device? Um, that sounds a bit sketchy.
I did what any good web designer would do and I headed over to Google.
Apparently this is a well-known issue with photos taken by iPhone that Apple refuses to fix. In simple terms, the metadata tells the image to rotate, so you have to get rid of the metadata before posting your picture. Doing this completely fixed my problem! My WordPress image problem, that is. It hasn’t paid my rent or cleaned my bathroom. *cough*
Here’s how to remove EXIF metadata from your photo in Photoshop. I’m using a cute photo that I took of Bruce and Noel in the office as an example.
- Open up your photo that you took with your iPhone in Photoshop.
- Head to File > Export > Save For Web.
- Choose the settings that you want to save your photo with, and under Metadata, choose None. Then, hit Save.
I hope you found this blog post helpful!