Animated images support for GitHub

[LRANUL]

Guidance for displaying an animated image by using the HTML <img> element or in combination with the <picture> for using with themes. These animated images supports embedding GIFs into your issues, pull requests, discussions, comments and .md files.

Note Retrieve the raw URL of "assets/images/help/writing/base-octocat.gif" once the asset have been merged to GitHub's original 'docs' repository and use the link to replace the forked repository's source raw URL .

Why:

Closes Issue #18206

What's being changed:

Changes will be made to *Images section of the page, new addition will improve GitHub's user experience by allowing users to use animated images (GIFs). e.g. For example, the following code displays an animated octo-cat with <img> element:

<img alt="This is GIF" src="https://raw.githubusercontent.com/LRANUL/docs/c2f6b7f68622266cf628b1773c98871e4d967261/assets/images/help/writing/base-octocat.gif">

Updates

• Added GitHub's own Octocat GIF to assets to be used with docs for showing infographics with the syntax guide.
• Added writing animated image syntax on GitHub markdowns for GIFs to be displayed on GitHub's issues, pull requests, discussions, comments and .md files.

Notes

Retrieve the raw URL of "assets/images/help/writing/base-octocat.gif" once the asset have been merged with this pull request to GitHub's original 'docs' repository and use the link to replace the above forked repository's source raw URL . This will remove any affiliations it has with my profile and repository, please take this action to avoid creation of broken content on GitHub docs over time as forked repositories get deleted.

Screenshot

Screencast

https://user-images.githubusercontent.com/48907530/170197104-c0b47665-504b-4dc1-817d-d9deb9230644.mp4

Check off the following:

• [x] I have reviewed my changes in staging (look for "Automatically generated comment" and click Modified to view your latest changes).
• [x] For content changes, I have completed the self-review checklist.

Writer impact (This section is for GitHub staff members only):

• [ ] This pull request impacts the contribution experience
  • [ ] I have added the 'writer impact' label
  • [ ] I have added a description and/or a video demo of the changes below (e.g. a "before and after video")

[github-actions[bot]]

Automatically generated comment ℹ️

This comment is automatically generated and will be overwritten every time changes are committed to this branch.

The table contains an overview of files in the content directory that have been changed in this pull request. It's provided to make it easy to review your changes on the staging site. Please note that changes to the data directory will not show up in this table.

---

Content directory changes

You may find it useful to copy this table into the pull request summary. There you can edit it to share links to important articles or changes and to give a high-level overview of how the changes in your pull request support the overall goals of the pull request.

Source	Preview	Production	What Changed
get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax.md	fpt ghec ghes@ 3.5 3.4 3.3 3.2 3.1 ghae	fpt ghec ghes@ 3.5 3.4 3.3 3.2 3.1 ghae

[janiceilene]

@LRANUL Thanks so much for opening an issue and a PR! I'll get this triaged for review ⚡

[LRANUL]

@janiceilene I would like to let you know that the following update works with any .gif source including third-party like sources GIPHY, however when the source is from GitHub and used with the additional HTML <picture> element it should be a raw URL for the functionality to work, blob URLs work as well but <img> element should not be combined with the <picture> element as found during QA tests.

An internal engineer will need to update the source of the <img> element of this pull request after the base-octocat.gif have been added to the original repository (this GIF source is included on this pull request but is tied to forked repository as an asset). Updating the link to the original repository will keep the functionality unaffected on the hosted docs even if the forked repository gets deleted at a later date as the new links will be tied to the original repository assets.

[github-actions[bot]]

Thanks for opening a pull request! We've triaged this issue for technical review by a subject matter expert :eyes:

[github-actions[bot]]

This is a gentle bump for the docs team that this PR is waiting for technical review.

[github-actions[bot]]

This is a gentle bump for the docs team that this PR is waiting for technical review.

[cmwilson21]

Thank you for your patience as we work through our backlog 💛

[cmwilson21]

@LRANUL Thank you again for submitting this PR. After chatting with the team, we decided to address this internally while considering certain accessibility related issues. 💛

We'd love for you to contribute again! Please take a look at our help wanted section to find open issues you can work on, if you'd like.

Thank you for your interest in improving GitHub Docs! :sparkling_heart: