How to Embed a GIF in a Forum Post

To embed a GIF in a forum post, you need the image's direct link (a URL ending in .gif) wrapped in your forum's image code, usually BBCode like [img]https://example.com/image.gif[/img]. This guide walks through that, plus HTML, linked images, and the etiquette around hotlinking, using our animated popcorn smiley as the worked example.

Popcorn smiley: Settling in to watch the drama. — Popcorn smiley

Step 1: Get the direct image link

A direct link points to the image file itself, not to a web page that contains the image. You can tell the difference by the ending:

Direct link (works): https://www.smiley-faces.org/smiley-faces/smiley-face-popcorn.gif
Page link (won't embed): https://www.smiley-faces.org/smiley/popcorn/

The page link is great for sharing, but if you put it inside an image tag the forum will show a broken image, because it is a web page, not a picture.

To find a direct link on most sites, right-click the image (or long-press on a phone) and choose "Copy image address" or "Copy image link". Paste it somewhere to check it ends in .gif, .png, .jpg or .webp.

Step 2: Use the [img] BBCode tag

Most forum software uses BBCode, a simple markup with square brackets. To show an image, wrap the direct link in [img] tags:

[img]https://www.smiley-faces.org/smiley-faces/smiley-face-popcorn.gif[/img]

Paste that into the post editor, preview it, and you should see the animated smiley munching popcorn. Tags are usually not case sensitive, so [IMG] works too on most boards.

Many editors also have an image button on the toolbar. Clicking it either inserts the [img][/img] tags for you or asks for the URL.

Step 3 (optional): Make the image a link with [url]

The [url] tag creates a link. You can use it on its own:

[url=https://www.smiley-faces.org/smiley/popcorn/]Popcorn smiley[/url]

Or wrap it around an [img] tag so the GIF itself becomes clickable:

[url=https://www.smiley-faces.org/smiley/popcorn/][img]https://www.smiley-faces.org/smiley-faces/smiley-face-popcorn.gif[/img][/url]

Make sure the tags close in the reverse order they opened: [url][img]...[/img][/url]. Getting the order wrong is the most common reason a linked image doesn't show.

Using HTML instead

Some older boards, blogs and comment systems accept HTML rather than BBCode. The equivalent is an <img> tag:

<img src="https://www.smiley-faces.org/smiley-faces/smiley-face-popcorn.gif" alt="Popcorn smiley">

The alt text describes the image for screen-reader users and shows up if the image fails to load. To make it a link, wrap it in an <a> tag:

<a href="https://www.smiley-faces.org/smiley/popcorn/"><img src="https://www.smiley-faces.org/smiley-faces/smiley-face-popcorn.gif" alt="Popcorn smiley"></a>

If neither BBCode nor HTML works, your forum may only allow images through its attachment uploader, or images may be switched off entirely. In that case, posting the plain page link is the polite fallback.

Whistling smiley: Who, me? Innocently whistling. — Whistling smiley

Hotlinking etiquette

Hotlinking means displaying an image on your post while it is still stored on someone else's server. Every time somebody views your post, their browser downloads the image from the original site, using that site's bandwidth.

Some sites don't mind; many do, and some block it so the image shows as broken or gets swapped for a different picture. Good habits:

Only hotlink when the site says it's allowed. smiley-faces.org explicitly allows hotlinking of its smileys, so the examples above are fine to use as they are.
Otherwise, download and re-upload the image to your forum's attachment system or your own image host, if the image's licence allows that.
Use HTTPS links. Many forums load over HTTPS, and browsers may block or warn about images served over plain HTTP.
Don't hotlink from private or logged-in pages. Those links often expire or only work for you.

Image size

Forum smileys are meant to sit alongside text, so small is better. A typical animated smiley is only a few dozen pixels across and a few kilobytes in size. Big GIFs slow down the page for everyone reading the thread, especially on mobile.

Some boards support a width option such as [img width=100]...[/img], but this varies between forum software, so check your board's BBCode help page. In HTML you can add width and height attributes. Note that shrinking an image this way only changes how it is displayed; readers still download the full file.

Before you hit post

Always use the preview button. Check that the image shows, that it isn't huge, and that the link goes where you expect. Then think about whether the smiley fits the thread; our guide to forum smiley etiquette has some tips.