Issue Embedding Animated GIF in GitHub README - Displays as Static Image

[wkrouse]

Select Topic Area

Question

Body

I'm trying to visually demonstrate how my userscript deletes the last column in a table within my GitHub Readme. To show this subtle change, I'm using an animated GIF. It successfully works in Imgur, Imgflip, and the GitHub file view. However, when embedding it in the Readme using Markdown, the GIF only displays as the same static image, not showing its animation. Could anyone please advise me on how to best visually demonstrate the effect of my user script? Thank you!

I've tried the following ways to embed the GIF.
The GitHub repository URL is .
The raw GitHub file URL is .
The direct link from Imgur is .

[Talha-Hamza]

Consider the following:

1. Markdown Image Syntax:
   Ensure that you are using the correct Markdown syntax to embed the GIF. The syntax for embedding an image in Markdown is as follows:

   ![Alt text](url)

   Make sure that the URL you are providing points directly to the raw image file, and not to a webpage or HTML page that contains the image.

2. Direct Link to Raw GIF:
   If you are using a direct link from Imgur or GitHub, make sure it is a link directly to the raw GIF file. For GitHub, the URL should end with the file extension (e.g., ".gif") to ensure it points directly to the raw image.

3. File Size Considerations:
   Check the file size of your animated GIF. Some platforms may have limitations on the size of images that can be displayed. GitHub, in particular, has a file size limit for displaying images directly in the repository. If your GIF is too large, consider optimizing it or hosting it on a platform that supports larger files.

4. GitHub Pages:
   Consider using GitHub Pages to host your animated GIF and then link to it from your Readme. Upload the GIF to the "docs" folder of your repository, and then you can link to it using the GitHub Pages URL. This may help bypass any restrictions on directly embedding large files.

5. Use HTML Tag:
   If the Markdown syntax is not working as expected, you can try using HTML <img> tag to embed the image:

   <img src="url" alt="Alt text">

   Replace "url" with the direct link to your GIF and "Alt text" with an appropriate description.

6. Testing Locally:
   Clone your GitHub repository to a local machine and test the Readme with the animated GIF locally. This can help you identify whether the issue is specific to the GitHub rendering or if there's an issue with the GIF file itself.

7. Check GitHub Rendering:
   Sometimes, GitHub may take a bit of time to update and render changes to your Readme. Ensure that you have committed and pushed the changes to your repository, and give it some time to reflect the updates.

[wkrouse]

Thank you @Talha-Hamza for your detailed answer! I've tested using the format you recommended while linking directly to raw image files. I think the size of 7,470 bytes (8 KB on disk) is significantly below the maximum file size. The HTML tag and GitHub Pages both appear to act the same as other embeddings. I cleared the website browsing data. Even after I waited multiple hours after committing, the images continued to not work. When I checked a local clone in Visual Studio Code, the preview displayed the embeddings working as expected. How do I get the website GitHub to work correctly like the local clone does?

The imgur is ![Alt text](https://i.imgur.com/1Ol4UJH.gif)
The GitHub Pages is ![Alt text](https://github.com/wkrouse/Bringing-My-OCD-Online/blob/main/docs/8952xv.gif?raw=true)
The GitHub file is ![Alt text](https://raw.githubusercontent.com/wkrouse/Bringing-My-OCD-Online/Gif/1st.gif)
The HTML <img> tag is <img src="https://raw.githubusercontent.com/wkrouse/Bringing-My-OCD-Online/Gif/1st.gif" alt="Description of GIF">

[github-actions[bot]]

🕒 Discussion Activity Reminder 🕒

This Discussion has been labeled as dormant by an automated system for having no activity in the last 60 days. Please consider one the following actions:

1️⃣ Close as Out of Date: If the topic is no longer relevant, close the Discussion as out of date at the bottom of the page.

2️⃣ Provide More Information: Share additional details or context — or let the community know if you've found a solution on your own.

3️⃣ Mark a Reply as Answer: If your question has been answered by a reply, mark the most helpful reply as the solution.

Note: This dormant notification will only apply to Discussions with the Question label. To learn more, see our recent announcement.

Thank you for helping bring this Discussion to a resolution! 💬