Image rotation made easy

As a computer enthusiast, I never thought rotating an image could be difficult. Turns out, for some people, it is. So why not change that?

Wait, another image rotation tool?

Well, kind of! When I was working as a freelance developer for a side-project the company had an issue using pictures that had a different rotation.

These were mostly supposed to be in portrait mode where the camera originally had been set to shoot in landscape and automatically rotate into portrait mode by EXIF.

But after uploading these images to their content management application the EXIF information got stripped and the image turned out to be landscape instead of portrait mode as intended (and as it looked like on their PC).

So they called me and asked how to fix it. At first, I tried explaining the steps by using an Image Processing Software but that turned out to be a bit too complicated for an inexperienced user.

Then I had an idea: why not just write an app automatically rotating (as in applying the EXIF orientation information) your image(s) just by uploading it to a website and get the result immediately.

The image rotation tool

The logic behind that is quite simple. As long as the image (well, JPEG it has to be as well) contains EXIF orientation data you can just get the rotation angle and rotate the image as needed.

Even unflipping flipped images is not much of a deal this way.

Using either ImageMagick or gd2 via PHP extension here enables a lot of ways to deal with images.

The result is a simple website serving as a web application frontend.

It accepts multiple JPEG images to be uploaded and tries rotating them as specified in the EXIF orientation information.

As soon as the rotation is done the image(s) will be returned and directly provided for downloading.

And that's basically it.

The challenges

Wait, didn't you say the logic was simple? Indeed, and it really is.

But I'm still in the progress of becoming a modern web designer so it took me a while until I was sufficiently happy with what the paged looked like.

If you're interested, read more on parts of the design process and how to rotate an image on scroll.

Are people using it?

Well, so far not many. I'm not even sure if there will ever be enough people in need for this.

But it was a fun experience and I learned a few things. My goals were:

1. Stay as minimal as possible (aka MVP)

2. Get to production as fast as possible

3. Just do one thing and do it as easy as possible

4. Really launch it

5. Gather feedback

6. Write up the learnings

7. Score at least 95 at google lighthouse for every check but PWA

So far I managed to achieve: #1, #3, #4, #7. Why not #2 you might ask! Well, the application was done pretty fast but as I said, the design...

What about #6 and #5? Well, that's what this article is about, among sharing the application to other people.

What I have learned

1. Even if you want to stay lean with your code try using an existing UI framework to accelerate going live and looking good (will do that next time)

2. Include at least one unusual design element (like having an image rotated on scroll)

3. Just restricting you to one thing really helps to get something to launch

4. There were a lot of interruptions where I couldn't work on this project. But never give up and stick with it. Even if it won't be used that much, training your ability to stick with something is worth a lot. Satisfying google lighthouse and pagespeed insights

Satisfying google lighthouse and pagespeed insights

I call myself proud having achieved almost a full 100% for every category of google's pagespeed requirements, especially all of the Core Web Vitals.

See for yourself on the following images:

Mobile

Desktop

Possible future features

Being able to rotate an image automatically, even when there was no EXIF information, would be a great extension so rotating images could become even easier.

This, though, is a bit more of a challenge and requires training some Machine Learning Models to correctly recognize rotated images and how to fix the rotation.

I already thought a bit about that challenge and did some minor tests. Also, this could be a way of monetizing the service.

Although, I would probably need a lot of sample images and processing power to pull this off with a high enough precision.

What do you think?

If you want to get in touch, try writing to me on twitter.