DEV Community

Cover image for Adding large external GIFs to GitHub README.md (over 10MB limit)
Voy
Voy

Posted on

Adding large external GIFs to GitHub README.md (over 10MB limit)

(SKIP TO SOLUTION)

I've recently been adding a GIF to a README.md in my new repo on GitHub, following for instance this cool tutorial on DEV and I was puzzled with this unfortunate choice:

  • Either I include the GIF in the repo, pumping its size from less than 1MB to 30MB, or
  • I host the GIF externally, but that only will work with GIFs below 10MB (See this SO answer).

Neither was great, since:

  • I don't want to needlessly bloat my repo.
  • My GIF is 1 minute long, 500x500px, 10 FPS, average quality - and still occupies around 30MB.
  • I could make it shorter, faster, lower resolution, lower FPS, lower quality - all of which are not great either. Is the only choice dropping readability? 😔

However 😮

If GitHub allows the GIFs to be over 10MB if they're currently in a GitHub repo, will it allow me to link to a large GIF located in a different public repository?

  • I could keep the original repo clean, no large GIFs stored directly inside.
  • I could have a README.md with a large, good quality GIF.

The answer is YES

  1. Create a new public GitHub repo. I called it voyz/voyz_public
  2. Open terminal, create a new direcotry where you want to locate the repo. For me it was mkdir voyz_public.
  3. Copy-paste the large GIF into that directory.
  4. Once inside, run: (you need installed Git working with GitHub credentials)
    1. git init
    2. git add .
    3. git commit -m "added large GIF"
    4. git remote add origin https://github.com/Voyz/voyz_public.git - Naturally, change this address for the URL of your repo.
    5. git push
  5. Now that the GIF is hosted on GitHub, its URL can be used in a README.md of another GitHub repo! Go to your new repo, find your GIF and copy its address to the README.md you want to include it in. Works in both Markdown and HTML:

Markdown:



![](https://github.com/Voyz/voyz_public/blob/master/databay_promo_vidA_gif_A03.gif)


Enter fullscreen mode Exit fullscreen mode

HTML:



<img src="https://github.com/Voyz/voyz_public/blob/master/databay_promo_vidA_gif_A03.gif" alt="Databay showcase gif" title="Databay showcase gif" width="500"/>


Enter fullscreen mode Exit fullscreen mode

Hey I can even link to it here on dev.to if I add ?raw=true to the URL! 😊

Databay showcase gif

I tried to look for information whether GitHub is okay with this method, although to no avail. Any feedback on this method most welcome! There are even other repos like this repo with a ton of GIFs so I'm gonna cross my fingers that this isn't unexpected or illegal. Otherwise... quick! upload bloated GIFs while GitHub are asleep!

Hope it helps! 👋
Voy

Top comments (2)

Collapse
 
grace_cho profile image
grace

Thank you very much. It helped me fix my website.

Collapse
 
hanguk0726 profile image
hanguk0726

It was helpful. Thank you!