How to add gifs to Github readme file
In this article I’m going to show you how to add gifs to your Github readme file. All you need to do is create a free account on Giphy Website.
Use Giphy as a Free Cloud Hosting Website for GIFs
Here is the link to Giphy Website:
After You’ve signed up, you can just upload your gif to Giphy by clicking on the “Upload” button at the top right corner as shown below.
Now this page will open where you can browse and upload your gif from your device or just paste a url of your gif.
After the gif finishes uploading as shown below, now click on “Copy link” and a window will show up with the available links for this gif.
Copy the “GIF Link” the one with .gif at the end.
Use Markdown Syntax to add the gif link to the GitHub readme
Now if you want to make use of this copied gif link from Giphy and display the gif in the GitHub readme file, you will need to use the Markdown syntax. For those of you who don’t know what is Markdown. Markdown is a plain text formatting syntax for writers. It allows you to quickly write structured content for the web, and have it seamlessly converted to clean, structured HTML.
If you want to learn more about Markdown syntax and all the different types of content that you can include in the Github readme using this syntax including headings, quotes, lists, images, etc, then check out this great blog article at ghost.
What you have to do now is go back to Github, open the readme section, and paste the following markdown in your post including the url you’ve just copied. Make sure you specify the width like giving it a value of 300 or so, or the screenshot will be huge!
<img src="https://media.giphy.com/media/U7c2TesYruxCiw11qK/giphy.gif" width="300">
And here is the readme file with the gif added:
That’s how we can easily add gifs to the Github readme file. If you want to know how to add images to the Github readme, just check out the “How to add images to GitHub readme” article.
