Convert GIF to WebP on Mac

Your landing page hero animation is a 4 MB GIF. The same loop as animated WebP often lands under 800 KB with smoother gradients and full color. Marketing sites, docs, and internal dashboards still ship GIF because every browser played it twenty years ago. Modern browsers load animated WebP efficiently, and WebP supports lossy compression that GIF cannot match. Converting locally keeps unreleased UI motion off random upload sites. Front-end teams that refresh hero loops each release benefit from one saved preset instead of rediscovering FFmpeg flags every sprint.

Why animated WebP instead of GIF

GIF stores a full raster per frame and caps at 256 colors. Animated WebP uses modern compression, supports lossy and lossless modes, and typically produces smaller files at similar visual quality.

Factor	GIF	Animated WebP
Color depth	256 colors per frame	Full color (lossy or lossless)
Typical web size	Large for gradients	Often 50 to 80% smaller
Browser support	Universal	Wide on modern browsers
Alpha transparency	Yes	Yes (lossless mode)

For UI demos and marketing loops, GIF banding shows up fast on dark gradients. WebP handles those frames more cleanly when you accept lossy output. See lossy vs lossless compression when you need to decide which mode fits a brand asset.

Asset type	First format to try
UI screen recording loop	MP4 or animated WebP
Logo spin with flat colors	Lossless WebP or small GIF
Photo slideshow	MP4, not GIF or WebP

Before you convert every GIF in a repo, confirm your site serves WebP with a GIF or MP4 fallback in markup. WebP is the optimized primary, not the only file you ship.

When WebP is the better choice

Use animated WebP when file weight hurts Lighthouse scores, mobile load times, or CDN bills. Keep GIF when a third-party tool, old email client, or legacy CMS field accepts only GIF.

Scenario	Recommended output
Marketing site hero	Animated WebP plus MP4 fallback
Slack or Notion thread	MP4 first; GIF if required
GitHub README badge	Small GIF or static PNG
Design handoff archive	Keep MP4 master; export WebP for web

If the source is video, skip GIF entirely when possible. See video to GIF on Mac for the GIF path, or export MP4 from QuickTime when the destination allows video. For shrinking an existing GIF without format change, see compress GIFs on Mac .

Target page weight	Practical WebP settings
Under 500 KB	640 px wide, 10 fps, lossy q 75
Under 1 MB	800 px wide, 12 fps, lossy q 80
Lossless UI icon	Short loop, small canvas

Measure before and after in your browser network panel on one hero loop. A 60% byte drop on a 3 MB GIF is common when you resize to CSS width first.

Convert GIF to WebP with FFmpeg

Open Terminal (Applications → Utilities → Terminal). Install FFmpeg through Homebrew (install Homebrew first if brew is not found):

brew install ffmpeg

Convert a GIF to animated WebP with lossy compression:

ffmpeg -i loop.gif -vcodec libwebp -filter:v "fps=12,scale=640:-1" -lossless 0 -compression_level 6 -q:v 80 -loop 0 loop.webp

For a lossless animated WebP (larger file, flat colors):

ffmpeg -i icon-loop.gif -vcodec libwebp -lossless 1 -loop 0 icon-loop.webp

Batch every GIF in a folder:

mkdir webp-out
for f in *.gif; do
  ffmpeg -i "$f" -vcodec libwebp -filter:v "fps=12,scale=640:-1" -lossless 0 -q:v 80 -loop 0 "webp-out/${f%.gif}.webp"
done

Flag	Smaller file	Better quality
fps	8 to 10	12 to 15
scale width	480 to 640	800 to 960
-q:v (lossy)	70 to 75	80 to 85
-lossless 1	N/A	Flat UI, small canvas

Trim idle frames in QuickTime or Preview before conversion when the source came from screen recording. Re-encoding GIF to WebP and back causes generation loss; keep the MP4 or MOV master when you have it.

Design exports from After Effects or Principle often arrive as oversized GIF. Convert to WebP at display width instead of re-exporting from source when you only need a smaller web asset.

Using GetCompress

GetCompress fits convert GIF to WebP on Mac when you want preview, trim, and export without maintaining FFmpeg recipes per project.

Drop an existing GIF to convert, or drop MOV/MP4 to create animated WebP directly from source video.

Workflow features that help:

• Preview and trim: cut to the action before compression limits colors.
• Frame-by-frame preview: catch banding or muddy text before deploy.
• Width presets: 640 or 800 px covers most hero and doc layouts.
• Quality control: pick lossy or lossless output per asset type.
• Batch queue: convert a folder of GIF loops after a design review.
• Local processing: keep staging UI and NDA flows off online converters.

Save a preset like “marketing WebP 640w 12fps q80” if your team ships hero loops weekly. When quality is still poor at small size, prefer MP4 for motion docs or a static PNG for icons instead of a giant animated file. Compare WebP output against the original GIF in preview before you commit assets to the repo.

GetCompress also helps when design sends ten GIF files from a sprint review that all exceed your page weight budget. Queue them, apply the same width and quality preset, and export WebP in one pass while keeping originals untouched in a separate folder.