How to Embed a GIF | Paste the Code or Upload the File

Embedding a GIF on any platform comes down to pasting a host-provided embed code or uploading the .gif file directly, with the right method depending on where it’s going.

Copying a GIF’s browser URL into a text box gives you a broken link, not animation. The steps for how to embed a GIF split into two routes: a code snippet from the host site or a standard file upload into an editor that supports images. Picking the wrong one wastes time, but the choice is straightforward once you know what your platform accepts.

What You Need Before You Embed a GIF

Three things have to be in place before the actual embedding step. Without any one of them, the process stalls.

• A GIF file or a direct link to one. You can upload your own .gif to a host like GIPHY or find one already on the web. GIPHY limits uploads to 15 seconds and 100 MB, with 6 seconds and 8 MB as their recommended targets for best performance.[6]
• A platform that accepts the method you plan to use. Websites and CMS platforms typically accept HTML or iframe embed codes. PowerPoint and Squarespace accept direct .gif file uploads. Forums often use BBCode-style [img] tags.
• The embed code or the file itself on hand. For the code route, you copy it from the GIF’s detail page on the host. For the upload route, you save the .gif file to your computer or have its URL ready.

Embedding a GIF From GIPHY — The Two Code Options

GIPHY is the most common source for web GIFs, and it provides two embed code formats. Which one you choose affects how the GIF behaves inside your page layout.

Getting the Embed Code on GIPHY

Open the GIF you want on giphy.com or in the GIPHY mobile app. On the GIF’s detail page, click the < > Embed button. GIPHY then shows two embed options, and the code you copy depends on which one you select.GIPHY’s embed documentation walks through the full flow, including how each option appears inside a live page.

Responsive or Non-Responsive — Which Embed Should You Pick?

The Responsive On option gives you an HTML5 <video>-style embed that scales to fit its container. The Responsive Off option gives you an iframe with fixed pixel dimensions. Pick Responsive On when your page layout needs to adapt to different screen sizes — most modern websites should use this. Pick Responsive Off when you need the GIF to stay at an exact size, such as inside a sidebar or a tightly styled component. Paste the copied code into your page’s HTML block, custom HTML widget, or embed block, then publish and check the preview.

Uploading a GIF File Directly

Not every platform wants code. Many content editors handle a .gif the same way they handle a .jpg — you upload the file and the system does the rest.

In PowerPoint

Open the slide where you want the GIF. Go to Insert > Pictures and select the .gif file from your computer or OneDrive. The image appears on the slide. The animation only plays during a Slide Show, not in the editing view, so run the presentation to confirm it works. Microsoft’s support page confirms this workflow and notes that the GIF loops automatically in show mode.[9]

On Squarespace

Squarespace treats animated GIFs as images. Upload a .gif into any block that accepts images — Image blocks, Banners, Gallery blocks, Portfolio pages, and several other locations. The GIF plays automatically, loops, and has no sound. Squarespace recommends formatting the .gif to the exact display size before uploading so it appears at the right dimensions on the page.[10]

On Forums and Other Systems

Forums that don’t support direct file uploads often use a BBCode image tag. The syntax is [img src="https://example.com/animation.gif"]. Replace the URL with the direct link to your GIF file, and the forum software renders it as an animated image in the post. ProBoards officially documents this pattern for its community platforms.[11]

Common GIF Embedding Mistakes

A few errors cause most embedding failures. The GIF shows as a static image, doesn’t appear at all, or breaks the page layout.

• Pasting the wrong embed type. Using a non-responsive iframe inside a responsive layout can overflow the container or leave empty space. Match the embed format to your page’s structure.
• Expecting animation in edit mode. PowerPoint and some CMS editors show a static frame during editing. Preview or run the presentation to confirm the animation works.
• Uploading an oversized GIF. A 100 MB file or a 15-second animation loads slowly and may cause performance issues on mobile. GIPHY recommends keeping GIFs under 8 MB, under 6 seconds, and under 100 frames for reliable playback.[6]
• Assuming all platforms support direct .gif uploads. Some systems only accept image URLs or embed codes. Check the platform’s documentation before preparing your file.
• Expecting sound to play. Animated GIFs do not include audio. If you need motion with sound, use a video format like mp4 instead.

GIF Size Limits Worth Knowing

GIPHY publishes both hard caps and recommended targets for uploads. Staying within the recommended range helps your GIF load quickly on small screens and messaging apps, where most GIF viewing happens.

Making Your GIF Embed Work the First Time

One of these three paths fits every common scenario. Match your platform to the right method and you avoid the trial-and-error loop most people hit on their first attempt.

• For a website or blog that accepts custom HTML: Use the GIPHY embed code, preferably the responsive HTML5 version, and paste it into an HTML block or embed widget.
• For a presentation, a Squarespace page, or a visual editor: Download the .gif file and use the platform’s image uploader. Format the GIF to the exact display size beforehand.
• For a forum or a system that only accepts text: Host the GIF on a site like GIPHY, get the direct image URL, and wrap it in a [img] BBCode tag or whichever syntax the platform uses.

After you paste or upload, preview the result and confirm the animation plays. That quick check catches the layout issues and sizing problems that turn a working embed into a broken one.