How to Compare Image Revisions In Github

With Git, not only can you track changes in code, you can also compare the changes (aka diff). And in case the revisions go wrong you can revert to previous versions easily. You can also compare code changes easily and intuitively with Github.

Although primarily used to share codes, projects and contributions by developers, Github has a way for you to see historical changes and file comparisons. To see this, click one of your files, and click the History button, as follows.

In the following image, you can see Github comparing the previous revision and the new revision with green and red lines. The green lines represent line additions, while the red represent line substractions. So, basically, these colors marker guides youon what was there and what has just been added in the file.

Often a project is not all about textual codes, it may also comprise a lot of images and even PSD files. Github recently added the ability to compare images and PSD interactively. This is an exciting new feature that is worth exploring, so let’s see how it works.

Recommended Reading: How To Create A Github Page For Your Project

Image Revisions and Comparisons

Github supports a number of image formats such as PNG, JPG, GIF, and PSD. Similar to how we compare codes, we first select the image and click the History button. Below the image, you will see the list of ways to compare the image, namely 2-Up, Swipe, and Onion Skin.

First, let’s try the Swipe method. With Swipe, we can split the image in two portions and view changes made in the image side by side. Swipe is best used if you have changed the image as a whole like, for example, turning it into grayscale, like so.

2-Up is the image-comparing method that displays two revisons (older and newer) side by side, as shown below. This method is particularly useful to see the changes in image dimension, as shown below.

Onion Skin is the way to go when your image change is very decent and so that the difference is barely noticeable. When you select Onion Skin, there will be a handle bar, as shown below.

Upon dragging the handle bar to the left you will see the older revision of the image, and dragging it to the right will make the image fade in to the newer revision. This fade-in effect will help you spot the difference between revisions easily.

Final Thought

I can see that this new feature addition will bring new perspective that Github is not only for coders. If you are a graphic designer you should be very excited; you can also take advantage of this feature and us Git and Github to manage your design revisions.