Convert GIF to Video: Replace GIFs on Your Website (2026)

To replace a GIF with video, convert it to MP4 and WebM, then use a muted, looping <video> element with a poster and reduced-motion fallback. It looks like a GIF but can load far less data.

This guide covers conversion, page markup, accessibility, platform installation, and speed measurement. If you need a file now, start with the next section.

Convert a GIF to video right now

Use an online GIF-to-video converter

For a one-off animation, an online converter needs no install and finishes in a browser tab. EZGIF offers a direct GIF-to-MP4 workflow, while VEED and Adobe Express provide broader browser-based editing before export. Upload the GIF, keep its original dimensions and frame rate, choose MP4, and download the result. Use a local tool instead when the animation contains private product information or you need to convert a large batch.

Check the output before replacing the source: confirm the first frame, loop timing, dimensions, and audio track. A decorative web animation should not carry unwanted audio.

Convert GIF to MP4 with ffmpeg

ffmpeg is the repeatable option for developers, build pipelines, and batch conversion. Install it from the official ffmpeg download page, open a terminal in the folder containing the GIF, and run:

ffmpeg -i animation.gif -movflags faststart -pix_fmt yuv420p -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" animation.mp4

faststart moves the MP4 index to the beginning so playback can start before the entire file downloads. The even-dimension scale filter avoids a common H.264 encoding error, and yuv420p keeps the file compatible with browsers and devices. The yuv420p pixel format and the even-dimension fix both come from the web.dev GIF replacement workflow; faststart is our addition for earlier playback.

To create a WebM version, run:

ffmpeg -i animation.gif -c vp9 -b:v 0 -crf 30 -pix_fmt yuv420p animation.webm

We ran both commands on a 20-frame test loop before publishing this guide: a 228 KB GIF came out as an 8.7 KB MP4 and a 5.6 KB WebM. A synthetic gradient loop compresses unusually well, so treat those ratios as a ceiling, not a promise. The -pix_fmt yuv420p flag on the WebM command is there because our first attempt failed on an RGB-with-alpha GIF without it — the VP9 encoder rejects that pixel format.

Lower the WebM crf value for higher quality and a larger file; raise it for a smaller file. Compare the first, middle, and final frames before replacing the source. A timing change or dropped frame can make a short interface animation feel broken.

For a folder of animations, loop the same command instead of running it by hand. In bash or zsh:

for f in *.gif; do ffmpeg -i "$f" -movflags faststart -pix_fmt yuv420p -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" "${f%.gif}.mp4"; done

The PowerShell equivalent is Get-ChildItem *.gif | ForEach-Object { ffmpeg -i $_.Name -movflags faststart -pix_fmt yuv420p -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" "$($_.BaseName).mp4" }. Each output lands beside its source with the same base name, so hero-loop.gif becomes hero-loop.mp4 in the same folder.

Run the loop on a copy of the directory the first time and spot-check two or three outputs. A batch job applies the same scale and pixel format to a 60-frame product loop and a two-frame icon alike. Swap the WebM command into the same loop to produce the second source in one pass.

Choose the right output settings

Match the source dimensions unless the GIF is far larger than its displayed size. Downscaling a 1,600-pixel animation that renders at 400 pixels removes wasted bytes, but enlarging a small GIF creates blur. Preserve the source frame rate first, then reduce it only if the motion remains smooth and the file is still too large.

Export both WebM and MP4 for a website. WebM can produce a smaller download in supported browsers; MP4 with H.264 is the practical fallback for broad compatibility. Put WebM first in the HTML and MP4 second. For a deeper format comparison, see our guide to the best video format for a website.

Do not convert every GIF to AV1 automatically. AV1 can reduce bandwidth further, and decode now reaches roughly 79% of global browser traffic with full support plus another 15% partial, Safari being the partial case (caniuse, 2026). The real objection is encode time: an AV1 pass runs several times longer than H.264 for the same clip, which matters when a build pipeline touches dozens of files.

Why replace an animated GIF with video?

GIF is an image format with animation added on top. It has no efficient modern video compression, no audio support, and a 256-color palette per frame. The GIF89a specification (CompuServe, 1989) defines that indexed color model; video codecs can represent a much broader range of color and compress changes between frames. That is why a video conversion can look cleaner while weighing less.

The size difference is not theoretical. In one example, a 3.7 MB GIF became a 551 KB MP4 and a 341 KB WebM (web.dev, 2018). Your result depends on dimensions, duration, motion, and compression, so measure the actual files.

Lighthouse agrees: its long-standing “Use video formats for animated content” audit moved into the “Improve image delivery” insight as of Lighthouse 13, and it still recommends replacing large animated GIFs with video (Chrome for Developers, 2026). Treat it as a triage signal, not a rule that every GIF must disappear: a tiny decorative GIF may be fine, while a hero animation deserves attention.

Replacing the file does not automatically solve every speed problem. A self-hosted MP4 can still compete with the page’s main content or be loaded eagerly below the fold. Conversion fixes encoding; markup, loading behavior, and delivery determine the page’s result.

Replace the GIF with HTML5 video

Use the correct video element

Use this markup for a decorative animation that should behave like a GIF. It is the same foundation a standard HTML5 video player is built on:

<video autoplay muted loop playsinline poster="animation-poster.jpg" width="800" height="450">
  <source src="animation.webm" type="video/webm">
  <source src="animation.mp4" type="video/mp4">
  <img src="animation.gif" alt="Short description of the animation">
</video>

autoplay starts playback, but browsers permit autoplay reliably only when the video is muted. loop repeats it, and playsinline keeps it in the page on iPhone instead of forcing fullscreen. For another autoplay pattern, see how to make an autoplaying background video.

The poster is the static frame shown before playback. Skip preload="metadata" here: with autoplay present, browsers fetch the video regardless, so the hint does nothing — MDN documents that autoplay takes precedence over preload. Reserve preload for videos without autoplay, and use the lazy-loading pattern below for below-the-fold loops. Each attribute is defined in the MDN <video> reference, and the muted-plus-playsinline combination is the exact pattern WebKit introduced for GIF replacement (WebKit, 2016).

Set width and height to the video’s intrinsic dimensions or matching aspect ratio. That reserves layout space and prevents the page from jumping when the animation loads. If the video is decorative, an empty alt is appropriate for the fallback image; if it communicates information, describe that information and provide the same meaning in nearby text.

Handle fallback and reduced motion

The final <img> is a fallback for browsers that cannot play the sources. It is also a useful safety net for environments where autoplay is blocked. Do not treat it as a full replacement for every user: people who prefer reduced motion should receive a still frame or no animation.

<div class="gif-replacement-wrap">
  <video class="gif-replacement" autoplay muted loop playsinline poster="animation-poster.jpg" width="800" height="450">
    <source src="animation.webm" type="video/webm">
    <source src="animation.mp4" type="video/mp4">
  </video>
</div>

<style>
@media (prefers-reduced-motion: reduce) {
  .gif-replacement {
    display: none;
  }
  .gif-replacement-wrap {
    background: url("animation-poster.jpg") center / cover no-repeat;
    aspect-ratio: 800 / 450;
  }
}
</style>

The still frame has to be painted by an element that is still visible, which is why the poster moves to the wrapper. Hiding the video with visibility: hidden instead is a common trap: the box keeps its layout space but nothing inside it is painted, including its own background, so reduced-motion visitors get an empty rectangle where the animation was. Export the poster from the animation itself rather than reusing a generic thumbnail, because for these visitors that one frame carries the whole message.

If the animation is meaningful, provide its information in nearby text or a user-controlled play button. Do not rely on a blinking loop to communicate a status or warning.

Lazy-load below-the-fold animations

For an animation below the first viewport, delay the source request until the element is close to view. Omit src from the sources and add it back with an Intersection Observer. Keep the poster available so the reserved space has a useful visual state.

<video class="lazy-gif-replacement" autoplay muted loop playsinline poster="animation-poster.jpg" width="800" height="450">
  <source data-src="animation.webm" type="video/webm">
  <source data-src="animation.mp4" type="video/mp4">
</video>

<script>
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (!entry.isIntersecting) return;
    entry.target.querySelectorAll("source[data-src]").forEach((source) => {
      source.src = source.dataset.src;
    });
    entry.target.load();
    observer.unobserve(entry.target);
  });
});

document.querySelectorAll(".lazy-gif-replacement").forEach((video) => observer.observe(video));
</script>

Do not lazy-load the animation that is the page’s main visual without testing LCP. A below-the-fold loop can wait; a hero element may need a prioritized poster or video request. The right choice follows the page’s visual hierarchy, not a blanket “lazy-load all video” rule.

Install the replacement on your platform

WordPress

In WordPress, add the converted file through the Media Library and insert a Video block. Enable autoplay, loop, and muted playback in the block settings, then add a poster image and set the dimensions. Page builders expose the same controls under their video widgets, but inspect the rendered HTML: some widgets add a player wrapper or load the file before it enters the viewport.

For a small, occasional animation, the native block is enough. If the site has many videos or serves visitors across regions, a video host can handle encoding variants, edge delivery, and lazy loading. SmartVideo provides a WordPress block and shortcode, so the video can be placed in a page, widget area, or builder without uploading large media files directly to the WordPress server. That is the same delivery concern covered in our guide to optimizing video for the web.

In a 2026 comparison, SmartVideo measured 707 KB versus 1,513 KB for a YouTube embed, with 17 versus 25 requests (SmartVideo features page, 2026).

Squarespace, Shopify, or plain HTML

Squarespace accepts the same markup in a Code Block. Shopify pages can use an HTML or Custom Liquid section, with the video files hosted where the theme can fetch them. On a custom site, put the element in the body and serve the files with correct MIME types: video/webm for WebM and video/mp4 for MP4.

A hosted player works the same way on all three, and it means you skip stitching together storage, transcoding, CDN configuration, and responsive playback yourself. With SmartVideo, add the script snippet from Dashboard → Configuration to the site header, then place a <smartvideo> tag where the animation belongs:

<smartvideo src="animation.mp4" width="800" height="450" class="swarm-fluid" muted autoplay playsinline></smartvideo>

The responsive class preserves the aspect ratio while the player scales with the browser. Pick this route when the files are already converted and the delay that remains is how far the video has to travel to reach the visitor.

Check the Core Web Vitals result

Find every animated GIF on the site

Lighthouse names offenders one page at a time. In Lighthouse 13 and later, expand the “Improve image delivery” insight and it lists animated GIFs with their estimated savings (older versions used a separate “Use video formats for animated content” audit). That is enough for a landing page and useless across a few hundred URLs.

For a site-wide inventory, crawl the site with Screaming Frog or Sitebulb, open the Images report, filter the extension to .gif, and sort by size descending. If the files are self-hosted and you have shell access to the web root, one command produces the same ranked list from the source directory:

find . -name "*.gif" -size +100k -exec du -h {} + | sort -rh

A file-system scan has a blind spot worth knowing: it finds files, not requests. A GIF injected by a plugin, pulled from a third-party embed, or set as a CSS background-image never appears in that list. Confirm the result against a crawl or against the DevTools Network panel filtered to Img on your highest-traffic templates.

Then rank the list by file size multiplied by page views, not by file size alone. A 4 MB GIF on a page nobody visits costs less real bandwidth than a 300 KB loop sitting in the site header on every page, and the header loop is the easier conversion to justify.

Run a before-and-after test

Record a baseline before changing the page. Run the URL through Lighthouse or PageSpeed Insights in a mobile configuration, note page weight, the animated-content audit, and LCP, then test the same URL after replacing the GIF. Keep the viewport, network profile, cache state, and page content consistent. That paired capture is what stops a faster network or an unrelated page edit from taking credit for the improvement.

Chrome 116 changed LCP handling for both video and animated images: a video can become an LCP candidate when its first frame is presented, while an animated image is measured from its first displayed frame rather than waiting for the complete animation. The change is documented in the project’s own notes (Chromium metrics changelog, 2023). That means a smaller file is helpful, but the poster, first frame, request priority, and delivery path still matter.

After the lab test, check field data when it is available. Look for a change in real-user LCP and the distribution of slow visits, not only the single Lighthouse score. We keep the original asset available for rollback until field data confirms that the replacement helped. If video is part of a conversion page, our guide on why video speed kills conversions explains why that field check matters.

Check the details that audits miss

Watch the page on an iPhone with Low Power Mode enabled, on a slow Android connection, and with reduced motion enabled in the operating system. iOS blocks autoplay of silent video in Low Power Mode even when the markup is correct — it is deliberate battery behavior shipped in 2017, not a bug in your page (WebKit bug 168985, 2017). The poster should still communicate the page’s intent, and a visitor should be able to start the animation manually when motion is useful.

Inspect the network panel for duplicate downloads. Leaving the original GIF in an <img> element can make both assets load. Keep the GIF in a separate folder for email and social workflows, but remove its web-page request.

GIF versus MP4 versus WebM

Ship WebM first and MP4 second, then let the browser select a supported source. Keep GIF only where the destination requires it, such as email or social publishing.

Animated WebP is the one genuine alternative to video for this job, and it is what most Lighthouse-adjacent advice suggests next. It stays inside an <img> tag, so there is no player, no autoplay policy, and no markup to get wrong — MDN treats it and APNG as the modern replacements for GIF’s animation model (MDN, 2026).

Use it for very short, few-frame loops that already land under 100 KiB. Past a couple of seconds, video wins on both counts: WebP animation is built on the older VP8 compression, so the file grows faster than the same clip encoded as VP9 or H.264, and an <img> gives you no poster, no preload control, and no way to defer the request. APNG makes the same trade with worse compression — a niche fallback, not a target format.

The practical web answer is WebM plus MP4, with a poster and accessible fallback. Replacing a web GIF does not mean deleting the source asset.

Frequently asked questions

Conclusion: make the conversion part of your speed workflow

Converting a GIF to video is a small code change with a complete workflow behind it: export MP4 and WebM, preserve the visual dimensions, add the autoplay attributes, reserve layout space, respect reduced motion, and verify the page on mobile. If the converted file is still slow, investigate delivery and loading priority instead of compressing it blindly.

For sites with a growing video library, SmartVideo combines hosted delivery, adaptive bitrate playback, and lazy loading, so file conversion is not the last performance step you get to take. Try SmartVideo free and compare the result on your own pages.