How can I avoid that Github rotates my jpg in my readme.md?

Question

I have added a image reference in my readme.md on github. The picture is a portrait format photo, but when I view it on the github page the picture is rotated.

I have tried clone the repo to a new location to confirm that the picture is indeed still portrait as expected in the repo.

The image part of the readme.md:

Here is a picture of the hardware setup. ![picture of the hardware setup](HelloButtonModule.jpg)

This is the affected github repo

Update

Now I am really baffled I tried to simplify the problem in a new repo, but the picture shows up unrotated as (originally) expected.

Update

I have created a repo with an exact copy of the picture. Then the picture is rotated.

Answer 1

If you are on a Debian based distro, you can use exiftran.

sudo apt-get install exiftran
exiftran -ai *.jpg

This will automatically rotate all the .jpg files based on their exif data.

I ran

git clone https://github.com/steenhulthin/HelloButtonModule/
cd HelloButtonModule/
exif HelloButtonModule.jpg

and this produced:

EXIF tags in 'HelloButtonModule.jpg' ('Motorola' byte order):
--------------------+----------------------------------------------------------
Tag                 |Value
--------------------+----------------------------------------------------------
Image Width         |4128
Image Length        |2322
Manufacturer        |SAMSUNG
Model               |GT-I9505
Orientation         |Top-left
X-Resolution        |72
Y-Resolution        |72
Resolution Unit     |Inch
Software            |I9505XXUDMH8
Date and Time       |2013:10:16 23:22:57
YCbCr Positioning   |Centred
Image Width         |512
Image Length        |288
Compression         |JPEG compression
Orientation         |Right-top
X-Resolution        |72
Y-Resolution        |72
Resolution Unit     |Inch
Exposure Time       |1/33 sec.
F-Number            |f/2.2
Exposure Program    |Normal programme
ISO Speed Ratings   |100
Exif Version        |Exif Version 2.2
Date and Time (Origi|2013:10:16 23:22:57
Date and Time (Digit|2013:10:16 23:22:57
Components Configura|Y Cb Cr -
Shutter Speed       |5.06 EV (1/33 sec.)
Aperture            |2.28 EV (f/2.2)
Brightness          |2.44 EV (18.56 cd/m^2)
Exposure Bias       |0.00 EV
Maximum Aperture Val|2.28 EV (f/2.2)
Metering Mode       |Centre-weighted average
Light Source        |Unknown
Flash               |Flash did not fire
Focal Length        |4.2 mm
Maker Note          |98 bytes undefined data
User Comment        |METADATA-START
FlashPixVersion     |FlashPix Version 1.0
Colour Space        |sRGB
Pixel X Dimension   |4128
Pixel Y Dimension   |2322
Sensing Method      |One-chip colour area sensor

As you can see, the Orientation tag says top left. This means the EXIF data won't make a difference to the rotation, i.e. the image will appear the same on your computer and on Github.

I then ran

git clone https://github.com/steenhulthin/githubreadmeimagerotation2
cd githubreadmeimagerotation2/
exif HelloButtonModule.jpg

And I got:

EXIF tags in 'HelloButtonModule.jpg' ('Intel' byte order):
--------------------+----------------------------------------------------------
Tag                 |Value
--------------------+----------------------------------------------------------
Image Width         |4128
Image Length        |2322
Manufacturer        |SAMSUNG
Model               |GT-I9505
Orientation         |Right-top
X-Resolution        |72
Y-Resolution        |72
Resolution Unit     |Inch
Software            |I9505XXUDMH8
Date and Time       |2013:10:16 23:22:57
YCbCr Positioning   |Centred
Image Width         |512
Image Length        |288
Compression         |JPEG compression
Orientation         |Right-top
X-Resolution        |72
Y-Resolution        |72
Resolution Unit     |Inch
Exposure Time       |1/33 sec.
F-Number            |f/2.2
Exposure Program    |Normal programme
ISO Speed Ratings   |100
Exif Version        |Exif Version 2.2
Date and Time (Origi|2013:10:16 23:22:57
Date and Time (Digit|2013:10:16 23:22:57
Components Configura|Y Cb Cr -
Shutter Speed       |5.06 EV (1/33 sec.)
Aperture            |2.28 EV (f/2.2)
Brightness          |2.44 EV (18.56 cd/m^2)
Exposure Bias       |0.00 EV
Maximum Aperture Val|2.28 EV (f/2.2)
Metering Mode       |Centre-weighted average
Light Source        |Unknown
Flash               |Flash did not fire
Focal Length        |4.2 mm
Maker Note          |98 bytes undefined data
User Comment        |METADATA-START
FlashPixVersion     |FlashPix Version 1.0
Colour Space        |sRGB
Pixel X Dimension   |4128
Pixel Y Dimension   |2322
Sensing Method      |One-chip colour area sensor

Here the orientation says Right-top which means the right top corner of the image is currently in the top left corner. Github does not honor this information, so your image is displayed incorrectly.

I then ran exiftran -ai HelloButtonModule.jpg and this fixed the problem. There is a fork here https://github.com/texasflood/githubreadmeimagerotation2 which shows the correct rotation for the image.

If you are on Windows, IrfanView might work, courtesy of this question: https://superuser.com/questions/36645/how-to-rotate-images-automatically-based-on-exif-data