Animation Parameters#

Convert and optimize animated GIFs to modern animated-webp format for better performance and smaller file sizes.

Animated WebP Overview#

What is Animated WebP?#

A modern alternative to GIF format that offers:

• 60% smaller file size compared to GIF
• Better visual quality with lossy compression
• Smooth playback with adjustable frame rate
• Wide browser support (Chrome, Firefox, Edge, Safari 14+)

Why Use Animated WebP?#

FPS (Frames Per Second)#

Description#

Control the frame rate of animated images.

Range#

• 1 to 60
• Default: Original frame rate

Usage#

Recommended FPS Values#

Examples#

Low FPS (smaller file): ?transform=format:animated-webp,fps:15,quality:80

Standard FPS (balanced): ?transform=format:animated-webp,fps:24,quality:85

High FPS (smooth): ?transform=format:animated-webp,fps:30,quality:85

Frame Range#

Description#

Extract a specific range of frames from the animation.

Format#

frameRange:start-end

Limits#

• start ≥ 0
• end > start
• Maximum 1000 frames

Usage#

First 50 frames: ?transform=format:animated-webp,frameRange:0-50

Frames 10 to 60: ?transform=format:animated-webp,frameRange:10-60

Use Cases#

• Extract specific animation segments
• Shorten long animations
• Create preview clips
• Reduce file size by limiting frames

Complete Examples#

Basic GIF to WebP Conversion#

Result: 60% smaller file with same visual quality

Optimized for Web#

Best for: Standard web animations with good quality

Small File Size#

Best for: Loading indicators, simple animations

High Quality#

Best for: Premium content, hero animations

Extract Segment#

Best for: Previews, highlights from longer animations

Combining with Other Parameters#

Resize + Optimize#

Extract Region + Convert#

Full Optimization#

Use Cases#

Website Loading Animation#

Requirements:

• Small file size
• Quick loading
• Smooth enough

Solution: ?transform=w:100,format:animated-webp,fps:15,quality:75

Social Media Share#

Requirements:

• Optimized for mobile data
• Good quality
• Standard duration

Solution: ?transform=w:600,format:animated-webp,fps:24,frameRange:0-100,quality:80

Hero Animation#

Requirements:

• High quality
• Smooth playback
• Eye-catching

Solution: ?transform=w:800,format:animated-webp,fps:30,quality:90

Tutorial GIF Optimization#

Requirements:

• Clear and readable
• Manageable file size
• Full animation

Solution: ?transform=w:800,format:animated-webp,fps:24,quality:85

Important Notes#

Requirements#

• Source format: Original must be GIF or animated format
• Format parameter: Must use format:animated-webp
• Static images: Cannot be converted to animated format

What Works#

✅ ?transform=format:animated-webp,fps:24
✅ ?transform=format:animated-webp,frameRange:0-50
✅ ?transform=w:600,format:animated-webp,fps:30

What Doesn't Work#

❌ ?transform=format:jpeg,fps:24       // FPS only for animated-webp
❌ ?transform=format:png,frameRange:0-50  // frameRange only for animated-webp

Performance Comparison#

File Size Reduction#

Quality Comparison#

• Visual quality: Near-identical to original GIF
• Color support: Full RGB vs GIF's 256 colors
• Smoothness: Adjustable via fps parameter

Browser Support#

Supported Browsers#

• Chrome 32+ ✅
• Firefox 65+ ✅
• Edge 18+ ✅
• Safari 14+ (macOS 11+) ✅
• Opera 19+ ✅

Fallback Strategy#

<picture>
  <source srcset="animation.webp" type="image/webp" />
  <img src="animation.gif" alt="Animation" />
</picture>

Next Steps#

• Download Control - Control download behavior
• Best Practices - Learn optimization strategies
• Use Cases - See more real-world examples