WebP vs PNG vs JPG for image sequences: file-size and performance test

Short answer: for scroll image sequences, WebP and JPG are the sensible choices, while PNG is almost always a mistake. PNG files are 5× to 10× larger, destroying load times, stalling network queues, and blowing past mobile cellular limits. If you don't need transparency, JPG and WebP offer fast decode and compact file sizes (15–90KB per frame). If you do need transparency, use lossy WebP with alpha instead of PNG to get the same clean transparent edges at 70–85% smaller file sizes. Remember: whatever the format on disk, decoded memory in RAM is always the same: width × height × 4 bytes per frame.

Why does format matter more for sequences than for normal images?

A normal webpage shows each image once. A scroll sequence downloads, decodes, and draws dozens to hundreds of frames in rapid succession while the visitor scrolls. This compounds three separate costs:

• Total download size: frames × average file size. An extra 100KB per frame turns a snappy 4MB sequence into a bloated 19MB payload.
• Network concurrency & latency: browsers open a limited number of parallel HTTP connections. Giant frame files queue up, leaving the canvas blank on fast scrubs.
• Decompression overhead: uncompressing heavy files continuously consumes CPU cycles on the main thread, competing with scroll handlers and layout recalculation.

A format that inflates file size ruins the smoothness before a single frame even hits the screen.

Comparison overview

What the formats mean in practice

1. JPG: The fast, reliable workhorse for opaque footage

JPG has existed for decades, and modern mobile hardware chips decode JPGs blisteringly fast.

• Strengths: Universally supported, highly reliable, and decodes with minimal CPU overhead.
• Weaknesses: No alpha channel (no transparency). At identical visual quality levels, JPG files are typically 25–35% larger than equivalent WebP frames.
• When to use: Great for full-bleed photography, live-action footage, and as a guaranteed fallback when transparency is not required.

2. WebP: The modern standard for scroll animations

Developed by Google and supported in all modern browsers (including Apple Safari on iOS 14 and macOS Big Sur onwards), WebP is the sweet spot for web animation:

• Strengths: 25–35% smaller than JPG for photography, fast decode times, and crucially: lossy compression with alpha transparency.
• Weaknesses: Encoding can take slightly longer than JPG when generating sequences from command line tools (though tools like vid2ssq optimize this).
• When to use: The recommended default for all scroll image sequences today.

3. PNG: The bandwidth trap

PNG is a lossless format designed for crisp line-art, icons, and archival graphic assets—not video sequences.

• The problem: Because PNG does not discard imperceptible pixel data, a single 1080p frame from a 3D render or video clip frequently weighs 500KB to 2MB. A 120-frame hero sequence exported in PNG can easily exceed 80MB to 150MB!
• Decode cost: Decompressing complex PNG zlib streams frame-by-frame while scrubbing puts unnecessary load on mobile CPUs.
• The transparency myth: Developers often default to PNG because "I need transparent cutout frames for my product rotation." But WebP supports alpha channels with lossy compression, providing identical transparent cutouts at a tiny fraction of the weight.

Does format change memory use?

No. This is the biggest misconception about image formats.

Compression formats (WebP, JPG, PNG) only dictate the file size stored on disk and sent over the network. Once the browser decodes an image to paint it onto a <canvas>, it decompresses into a raw bitmap:

Decoded size = width × height × 4 bytes (Red, Green, Blue, Alpha)

• A 1920×1080 frame takes ~8.3 MB in memory whether the file was a 35KB WebP, a 60KB JPG, or a 1.8MB PNG.
• 100 frames at 1920×1080 consume ~830 MB of memory if kept decoded simultaneously.

Converting from PNG to WebP will fix your network bottlenecks, eliminate initial loading lag, and prevent mobile data caps from being blown—but it will not prevent iOS memory crashes by itself. To solve memory issues, you must reduce dimensions, frame counts, and avoid holding all decoded frames at once (see image sequence lagging on mobile? 9 fixes).

Recommendations: Which should you choose?

1. For opaque animations (full-screen video, product spins, landscape heroes): Use WebP at quality 75–85 (or optimized JPG). Target roughly 15–90KB per desktop frame and 10–35KB for mobile frames.
2. For cutouts and transparent products (floating 3D models, UI overlays): Always use lossy WebP with alpha. Never use PNG unless you have an ultra-short sequence (10–15 frames) of flat vector graphics.
3. For conversion: Use tools built specifically for scroll sequences like vid2ssq (npx scrollsequence vid2ssq or built into Scrollsequence for WordPress), which automatically optimizes frame sizing and WebP compression for smooth canvas delivery. For general frame extraction tools, check out how to convert video to images: free tools tested.

Related reading

• Image sequence lagging on mobile? 9 fixes
• How many frames does a scroll animation need?
• iPhone Safari crashes or reloads on my scroll animation
• How to convert video to images: free tools tested

FAQ

Does WebP work on iPhone? Yes. Safari has natively supported WebP since iOS 14 (released in 2020). The myth that iPhones can't display WebP is years out of date.

Why is PNG so bad for scroll image sequences? Because PNG is lossless. A 1080p PNG frame is easily 500KB–1.5MB. Multiply that by 100 frames, and visitors must download over 100MB of data before they can smoothly scroll your hero section.

Can WebP replace transparent PNGs? Yes. WebP supports full alpha transparency (variable opacity) using lossy compression. You get the transparent background and crisp foreground object with 70–85% lower file sizes.

What quality setting should I use for WebP sequences? Start around quality 75–80. Because images are in rapid motion while the user scrolls, visual artifacts that might be visible in a stationary photograph are completely imperceptible during scroll animation.