How to Add a GIF to WordPress
- Sophie Ricci
- Views : 28,543
Table of Contents
GIFs are everywhere — and for good reason.
A single looping animation can explain a workflow, celebrate a win, or make your content feel alive in seconds. Yet most WordPress users are still uploading GIFs the wrong way and watching them break, freeze, or slow down their pages.
WordPress powers 43.4% of all websites on the internet as of 2025. That’s hundreds of millions of pages competing for the same eyeballs. Visual content — including GIFs — is one of the fastest ways to break the noise. Posts that include images and animations receive 94% more views than text-only content, and visual content is 40x more likely to be shared on social media.
This guide covers every method — from dragging and dropping directly into the editor, to using plugins for animated GIF galleries, to embedding from external sources. Pick the one that fits your workflow and run with it.
Why GIFs Work So Well on WordPress Sites
Before you start uploading, it helps to know what you’re working with.
A GIF (Graphics Interchange Format) is a lightweight image format that supports animation through frame sequences. Unlike video, GIFs autoplay silently, loop automatically, and require zero user interaction — which is exactly why they capture attention. Studies show that animated content can increase click-through rates by up to 26% compared to static visuals.
The catch? GIFs can be heavy. A single unoptimized GIF can run 5–20 MB, which will tank your page speed and hurt your SEO. Page load time is a ranking factor for Google, and 53% of mobile users abandon a page that takes longer than 3 seconds to load. That means every GIF you add needs to be optimized before it goes live.
The good news: WordPress makes this manageable if you follow the right steps.
What You Need Before You Start
Getting this right takes thirty seconds of prep:
- A GIF file under 5 MB (aim for under 2 MB for best results)
- Access to your WordPress dashboard
- The Block Editor (Gutenberg) or Classic Editor depending on your version
- Optional: a GIF optimization tool like Ezgif.com or GIPHY’s compression tool
WordPress supports GIF uploads natively. No extra plugin is required for basic uploads. Plugins come into play when you want galleries, lazy loading, or animated GIF pickers.
Method One — Upload a GIF Through the Block Editor
This is the fastest method and works for 90% of use cases.
Step One: Open Your Post or Page
Log into your WordPress dashboard, navigate to Posts or Pages, and open the content where you want the GIF to appear.
Step Two: Add an Image Block
Click the + button to add a new block. Search for “Image” and select it. This block handles both static images and GIFs — no special block needed.
Step Three: Upload Your GIF
Click Upload and select your GIF from your computer. WordPress will upload it directly to your Media Library. Alternatively, click Media Library if you’ve already uploaded the GIF previously.
Step Four: Confirm It Animates
Once uploaded, you should see the GIF animating in your editor preview. If it appears as a static image in the editor, don’t panic — many themes only animate GIFs on the front end. Click Preview to confirm it plays correctly.
Step Five: Add Alt Text
Click the image block, then in the right-hand panel, add descriptive alt text. This is essential for accessibility and SEO. Something like “animated demo of [what the GIF shows]” works well.
Step Six: Publish or Update
Hit Publish or Update to make the GIF live on your page.
Method Two — Add a GIF Using the Classic Editor
Still running the Classic Editor? No problem.
Step One: Position Your Cursor
Place your cursor where you want the GIF to appear in your content.
Step Two: Click “Add Media”
Click the Add Media button above the editor toolbar.
Step Three: Upload or Select
In the Media Library popup, either drag and drop your GIF file or click Upload Files → Select Files. Find your GIF and click Open.
Step Four: Insert Into Post
Once uploaded, select the file and click Insert into Post at the bottom right. WordPress will place the GIF at your cursor position.
Step Five: Check Alignment and Size
Click on the GIF in the editor to adjust alignment (left, center, right) and resize if needed. Always keep the aspect ratio locked to avoid stretching.
Method Three — Upload a GIF via the Media Library Directly
This method works well when you’re preparing multiple GIFs in advance before embedding them across posts.
Go to Media → Add New in your WordPress dashboard. Drag your GIF files into the uploader or click Select Files. Once uploaded, your GIFs are stored in the Media Library and accessible from any post or page editor.
This approach is especially useful for teams managing multiple contributors — upload assets centrally, then each team member can access them without re-uploading.
Method Four — Embed a GIF from an External Source (GIPHY, Tenor)
External embedding keeps your server storage clean and avoids page speed penalties — the GIF loads from a CDN instead of your hosting.
Option A: Use the GIPHY Block (if available)
Some WordPress setups include a GIPHY integration block. Click +, search “GIPHY,” and enter your search term. Select the GIF and insert it directly.
Option B: Copy the Embed Code
Go to GIPHY.com or Tenor.com. Find the GIF you want. Click Share → Embed and copy the provided iframe or link code.
In WordPress, add a Custom HTML block (search “HTML” in the block inserter), paste the embed code, and save. The GIF will render from GIPHY’s servers, keeping your load time protected.
Important: External embeds depend on the source platform staying active. For business-critical content, upload to your Media Library instead.
Method Five — Use a Plugin for Advanced GIF Features
If you want animated GIF pickers, bulk galleries, or lazy loading, a plugin will save you hours.
WP GIF Player — Adds a play/pause button on GIFs so users control the animation. Great for accessibility. Over 10,000 active installations with consistent positive reviews.
Gifcast — Converts GIFs to WebP animated format, which can reduce file size by 25–34% compared to standard GIFs while maintaining quality. Automatically handles conversion on upload.
Envira Gallery — If you’re building a gallery of GIFs, Envira supports animated previews with lazy loading. Lazy loading alone can reduce initial page load time by 50% on image-heavy pages.
To install any plugin: Go to Plugins → Add New, search by name, click Install Now, then Activate. Configure through the plugin settings page.
How to Optimize a GIF Before Uploading to WordPress
This step gets skipped constantly, and it costs rankings every time.
Compress Before Uploading
Use Ezgif.com/optimize — paste your GIF URL or upload the file, choose your compression level (try 30–50% reduction first), and download the result. Test playback quality before proceeding.
Resize to Display Dimensions
If your content area is 800px wide, there’s no reason to upload a 1400px GIF. Use Ezgif’s resize tool or any image editor to match the actual display size. This alone can cut file size by 60%.
Consider Converting to WebP or Video
For very long or complex animations, consider converting to an MP4 and using the WordPress Video block with autoplay, muted, and loop enabled. MP4 files are typically 70–80% smaller than equivalent GIFs at the same quality level. Chrome, Firefox, and Safari all support autoplay muted video, making this an increasingly common approach for performance-conscious publishers.
Common Problems and How to Fix Them
GIF uploads but doesn’t animate
Check that your theme isn’t overriding image behavior with CSS. In your browser’s developer tools, inspect the element and look for animation: none or pointer-events: none. Also verify the file actually uploaded as a .gif — sometimes compression tools export as static formats.
GIF breaks page speed score
Compress the file, then test with Google PageSpeed Insights. If the score still drops significantly, consider the MP4 video approach described above. Also enable lazy loading for images in WordPress (it’s on by default since WordPress 5.5 for images — extend it to GIFs using a plugin like Smush or ShortPixel).
GIF upload fails with a file size error
Your hosting has a maximum upload size limit. Go to Media → Add New and check the maximum upload size shown. To increase it, either contact your host or add this to your php.ini:
upload_max_filesize = 32M
post_max_size = 32M
Alternatively, upload the GIF via FTP and reference it via a Custom HTML block.
GIF appears blurry
WordPress generates multiple image sizes on upload. Make sure you’re inserting at “Full Size” rather than a smaller auto-generated thumbnail. In the block settings, click the image, go to Image Size in the right panel, and select Full Size.
Best Practices for Using GIFs on WordPress
A few rules that separate the sites people bookmark from the ones they bounce from:
Keep GIFs relevant and purposeful. An animation that explains a concept earns its place. A looping GIF used purely for decoration trains visitors to ignore your visuals.
Limit GIFs per page. One to three focused GIFs per piece of content is a practical ceiling for most publishers. More than that and you’re competing against yourself for attention — and hammering load times.
Always add alt text. Screen readers can’t interpret GIF content, so alt text is both an accessibility requirement and an SEO signal. Over 1 billion people globally live with some form of disability, making accessibility a meaningful consideration for any serious publisher.
Test on mobile. GIFs that look great on desktop can dominate a mobile screen. Preview your content on a mobile device before publishing, or use a responsive preview tool in your WordPress editor.
Conclusion
Adding a GIF to WordPress is a five-minute task once you know which method to use. The Block Editor makes it as simple as uploading any image — the only real work is optimizing the file before it goes live so it doesn’t slow your page down.
Start with a compressed GIF under 2 MB, use the Image block, confirm it animates in preview, and you’re done. If you need more control — lazy loading, galleries, or format conversion — the plugin ecosystem has you covered.
The bigger takeaway: visual content works. Pages with visual elements see 94% more views, animated content drives engagement, and the creators who use every tool available to hold attention are the ones who win in competitive spaces.
Now you have the tools. Go make your WordPress content impossible to ignore.
🎯 Turn Visitors Into Qualified Pipeline
We build outbound lead generation systems that consistently book high-value meetings.
7-day Free Trial |No Credit Card Needed.
FAQs
What is the best way to add a GIF to WordPress to maximize engagement while protecting page speed?
Can I add an animated GIF to WordPress without a plugin?
Why does my GIF show as a static image in WordPress?
Does adding GIFs affect my WordPress SEO?
We deliver 100–400+ qualified appointments in a year through tailored omnichannel strategies
- blog
- Sales Development
- How to Add a GIF to WordPress