How to Add Screenshots and Animation to GitHub Pull Requests

Spice up your GitHub repository with animation!

Featured Image Add Screenshot Animation Github Pull Requests

GitHub programmers often add screenshots or animated GIFs to their repository pull requests. These techniques are definitely more eye-catching than making someone read several lines of plain text. Adding static screenshots is helpful if you want to insert visual changes or photographs inline. To demonstrate process flows and mouse-cursor motion, you can use MP4 videos and GIF animation. The following tutorial shows you how to add screenshots and MP4/GIF animation in GitHub pull requests.

1. Add a New Repository and Branch

Even if you have never used GitHub before, you can use the below steps to get started as a developer. Currently, you only need an email for GitHub account creation. This makes getting started with GitHub much easier than before.

  1. After signing in to your GitHub profile, click the “+” sign on the top right to create a new repository.
Github Add Animation Add New Repo 1
  1. Give the repository a name of your choice and choose to keep it public or private. Remember to check the “Initialize this repository menu along with checking a README” option.
Github Add Animation Repository Name Initialize
  1. You can choose to release your code in the form of an Apache 2.0 license, GNU general public license, MIT license, Eclipse, Mozilla public license, etc. Choose “none” if you if don’t want others to freely use the code.
  2. Click “Create repository” to confirm your repository addition under your profile’s main branch.
Github Add Animation Choose License Create Repository
  1. In the next stage, add a branch to your repository using the drop-down menu shown below. Here, the branch “Guten-tag-1” has been added to the “Guten-tag” repository, which itself is a branch of the main repository “Hola-World.”
Github Add Animation Screenshot Creating New Branch Process
  1. The purpose of a branch in GitHub is to help the developer work on features and bug fixes separate from the master production branch. Adding a serial number such as 1, 2, 3, etc., is an easier way to memorize the branch’s level.
Github Add Animation Screenshot Branch Pushed

2. Create Screenshots for GitHub

To add screenshots in GitHub, you need a good screen capture software. In Windows 11, the Snipping Tool is a Microsoft app best suited for this purpose. If you’re having some issues with it, follow our troubleshooting guide.

Github Add Screenshot Snipping Tool Windows11 1

Windows 10, however, uses a “Snip & Sketch” app that works very similarly to Windows 11 Snipping Tool but with less functions. It does have a timer of either 3 or 10 seconds for the delay in capturing the screen.

Github Add Screenshot Snip Sketch Windows10

3. Create Videos and GIF Animation for GitHub

To add videos or GIFs for GitHub, you need a good video screen capture tool. In the past, you couldn’t upload an MP4 in GitHub, but that has changed.

In both Windows 11 and Windows 10, you can use a Microsoft Store app called Screen recorder & Screen record. Microsoft Store is the safest source to download screen-recording software, as each app is designed to work well with Windows. To learn how to record your screen for free on a Mac, follow this guide.

Github Add Animation Screen Recorder Microsoft Store
screenshot taken from Windows Store
  1. Launch the Screen recording app and choose a capture mode: “Full,” “Area,” “Camera,” or “Only Audio.” Press “Start” whenever you’re ready to start recording on your screen.
Github Add Animation Screen Record Hd
  1. The good thing about this software is that you can choose to create a GIF directly by selecting the GIF mode.
Github Add Animation Screen Record Hd Gif Selection
  1. Alternatively, you can easily convert an MP4 to GIF using Ezgif or any other online tool. First, add the MP4 video using the upload link.
Github Add Animation Ezgif Conversion Purpose
screenshot taken from EzGif
  1. You’ll get a rough estimate of GIF file size, width, and length. You can change the frame rate of your GIF file to make it slower for easy instructions.
Github Add Animation Ezgif Conversion Convert Gif Formulajpg

4. Add Screenshots or Animations to GitHub Pull Requests

Once you’ve created your screenshots or videos, you can easily add them to GitHub pull requests.

  1. To add screenshots or video/animations to GitHub, go back to the branch you created earlier and navigate to “Pull requests.” Alternatively, reach it directly by just clicking on the branch.
Github Add Animation Screenshot Go To Branch Pull Request Step
  1. To add a new file, such as MP4 or GIF, select “Upload files” in the branch where you want the file to be available.
Github Add Animation Screenshot Creating Add Files
  1. Once in editor mode, you can attach the screenshot image and MP4/GIF files from the “choose your files” option. If you’re committing for the first time in the GitHub branch repository, click “commit changes.” If not, choose to “update comment.”
Github Add Animation Screenshot Add Files Via Upload
  1. Wait a few seconds for the screenshot or animation file to be added to your repository branch.
Github Add Animation Screenshot Mp4 Uploading
  1. The created screenshot/video/animation is added successfully to the GitHub branch, and in turn, the repository.
Github Add Animation Screenshot Pushes Mp4 Inserted
  1. GitHub is all about collaboration with other developers. If they like your proposed changes, they may merge it upstream into their own repository. This is done automatically if you’re able to see an “Able to merge” option.
Github Add Animation Screenshot Creating Able To Merge
  1. Once you finish the merger, the videos/screenshots will show as “commits” in the master repository.
Github Add Animation Screenshot Merging Successful

5. Display Screenshots and GIF Images on a GitHub Page

Instead of uploading screenshots and GIF files separately within the pull request repository, you can also make them visible on the GitHub page.

  1. The trick is to click the “ReadMe.md” file visible on any branch. Once it opens, click an icon called “Display the Source blob.” This branch can be edited to display images, screenshots, GIFs, and more.
Github Add Animation Screenshot Readme
  1. Clicking on the “edit file” icon will lead to a coding screen where you can add the screenshot or animated GIF code. It is easy to display an image by adding ! and wrapping the alt text in [ ], then embedding the link for the image in parentheses ().
Github Add Animation Screenshot Coding

If you don’t want to code, there is an easier way to add a screenshot/GIF directly to the repository page.

  1. Click “edit file” on the Readme.md page, which will lead to a new window where you can attach the screenshot/GIF to be displayed on the branch page.
Github Add Animation Screenshot Attach Files
  1. Before committing the changes to your GitHub branch, you can easily preview the image, screenshot, or GIF.
Github Add Animation Screenshot Preview

Frequently Asked Questions

How do I align or resize an image or screenshot in GitHub?

To align an image or screenshot on your GitHub page, click “edit this” on the ReadMe.md file, then upload the image or screenshot and add the following code:

<img align="left" width="100" height="100" src="URL/100/100">

Modify the code to whether you want the image left-aligned, right-aligned, or in the center. To resize the image, modify the width and height dimensions.

Is there a size limit to GIF and video files on GitHub?

Yes. The maximum file size is 50 MB for individual GIF or MP4 files. Using a hidden GitHub feature called “GitHub Blocks,” you can push that to 100 MB for each file. The GitHub repositories (your main branch) should remain less than 5 GB.

If you need to upload an image or video with a higher file size, use a GitHub program called GitHub Large File Storage (LFS), which has a maximum limit of 2 GB per file for Free/Pro users.

How do I share images on GitHub?

GitHub currently does not have any facility to directly share images using chat and related tools, such as screenshots or GIFs. However, you can create “issues” in a GitHub page and submit them for their review. These issues can include the images. To notify a person on GitHub, use @ before their username.

Image credit: Groot and Octocat at Unsplash All screenshots taken by author.

Subscribe to our newsletter!

Our latest tutorials delivered straight to your inbox