Sign in Subscribe
Markdown Tips & Tricks

How to Add GIFs in Markdown

Learn how to add GIFs in Markdown using simple syntax or HTML tags. Embed GIFs with `![Alt Text](URL)` for basic usage or `<img>` for more customization, including width and height adjustments. Enhance your documents with rich, animated content effortlessly.

How to Add GIFs in Markdown

"Don't waste another minute formatting Markdown by hand. Try our free tools now and see the difference!"

Markdown is a lightweight markup language widely used for writing README files, blog posts, documents, and more. When writing documents in Markdown, you may want to insert GIF images to enhance the expressiveness and vividness of your content. This article will detail how to add GIFs in Markdown.

1. Basic Syntax

The basic syntax for inserting images (including GIFs) in Markdown is as follows:

![Alt Text](URL)
  • Alt Text: Alternative text displayed when the image cannot be shown; it also helps with SEO.
  • URL: The link to the GIF image.

For example:

![Funny Cat]()

2. Local Files

If you want to insert a GIF image stored locally, first place the image file in the project's relative path, and then reference it using the relative path. For example:

![Local GIF](./images/funny-cat.gif)

Make sure your project structure looks like this:

project/
│
├── images/
│   └── funny-cat.gif
│
└── README.md

3. Using HTML Tags

Markdown also supports embedding HTML, so you can use the <img> tag to insert GIF images and set more attributes, such as width and height. For example:

<img src="" alt="Funny Cat" width="300" height="200">

4. Common Issues

4.1 Image Not Displaying
  • Ensure the URL is correct and valid.
  • If it's a local image, make sure the path is correct and case-sensitive.
4.2 Image Size Not Suitable
  • Use the HTML <img> tag to set the width and height of the image.
  • You can use CSS for more complex styling adjustments.

5. Practical Example

Below is a practical example demonstrating how to insert a GIF image in a Markdown document and adjust its size using HTML tags:

# My Markdown Document

This is an example of inserting a GIF image:

![Alt Text]()

You can also insert an image and adjust its size using HTML tags:

<img src="" alt="Funny Cat" width="200">

6. Conclusion

With this guide, you should have learned how to add GIFs in Markdown. Whether using Markdown's basic syntax or HTML tags, you can easily insert GIF images into your document, providing a richer content experience for your readers.

Read next

Comments ()