How to Add Screenshots and Animation to GitHub Pull Requests

by
Spread the love

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.

Content

Also read: The Beginner’s Guide to Git

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.

  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.

  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.

  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.”

  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.

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.

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.

Also read: Windows 11 Snipping Tool Not Working: 12 Possible Fixes

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.

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.

  1. The good thing about this software is that you can choose to create a GIF directly by selecting the GIF mode.

  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.

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.

Also read: How to Record Your Screen on a Mac for Free

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.

  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.

  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.”

  1. Wait a few seconds for the screenshot or animation file to be added to your repository branch.

  1. The created screenshot/video/animation is added successfully to the GitHub branch, and in turn, the repository.

  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.

  1. Once you finish the merger, the videos/screenshots will show as “commits” in the master repository.

Also read: How to Clear Git Cache

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.

  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 ().

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.

  1. Before committing the changes to your GitHub branch, you can easily preview the image, screenshot, or GIF.

Also read: How to Install Git and Git Bash in Windows

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

Sign up for all newsletters.
By signing up, you agree to our Privacy Policy and European users agree to the data transfer policy. We will not share your data and you can unsubscribe at any time. Subscribe


Sayak Boral –
Staff Writer

Sayak Boral is a technology writer with over eleven years of experience working in different industries including semiconductors, IoT, enterprise IT, telecommunications OSS/BSS, and network security. He has been writing for MakeTechEasier on a wide range of technical topics including Windows, Android, Internet, Hardware Guides, Browsers, Software Tools, and Product Reviews.

Comments are closed