Why are commerce engineers swapping micro MP4 hover clips for animated WebP?
Hover previews sell fabric drape, gloss, and hinge motion better than a static tile—but hanging a `<video>` on every row taxes JS, memory, and mobile users who never had hover. Queries like product card hover performance, webp hover animation, and cls list page bundle the same worry: motion that helps conversion without tanking scroll smoothness. Animated WebP can decode like an image with familiar caching semantics on desktop, yet you still need tap-to-play strategies for phones and guards against accidental hover downloads. Crop MP4 sources to the two or three seconds that actually differentiate SKUs and cap pixel width so dozens of cards do not decode cinema-grade loops while the user scrolls.
Checklist for MP4-sourced hover preview WebP on product grids
- Define desktop-only hover affordances with breakpoints, ship static or tap-to-play alternatives for touch devices, and stop converting one long MP4 for every SKU blindly.
- Extract the smallest loop that proves material difference, cap width near twice the thumbnail column, and lower FPS before you chase marketing-perfect lighting inside a 120px tile.
- Profile scrolling with performance recordings on real catalogs, roll out category by category, and roll back categories where conversion lift does not justify GPU load.
MP4 to WebP hover previews — FAQ
How do we stop a grid of animated WebP cards from decoding all at once when shoppers fling-scroll the list?
Gate decode on hover dwell time, pause off-screen loops with `IntersectionObserver`, and cap concurrent decodes to a small neighborhood around the viewport center.
Does cropping three seconds of a model-led MP4 into hover WebP reduce copyright exposure versus linking the full video?
Cropping does not shrink likeness or wardrobe rights; use cleared commerce footage or product-only angles and keep music out of the slice entirely.
Can animated hover WebP worsen CLS if thumbnails load asynchronously—and how do we prevent layout jumps?
Reserve aspect-ratio boxes and skeleton backgrounds before swapping still to motion so the grid never reflows when bytes arrive.
If CDN hit rates are low in a region and hover WebP first paint lags, should we tune cache keys first or shrink files?
Verify cache headers and query-string busting before blaming CDNs; once hits are healthy, tighten dimensions and palette complexity to shave latency.
Our A/B shows higher click-through but slightly worse scroll FPS—how should product weigh that trade-off?
Model revenue lift against scroll jank percentiles and bounce risk, then allow per-category toggles with guardrail metrics instead of a single global switch.