Replace a product-page GIF with a muted MP4: autoplay loop

To replace an animated GIF on a product page, serve the same motion as a <video autoplay loop muted playsinline>. web.dev's guide says a video with those attributes plays automatically, loops and behaves like a GIF, and its worked example shrinks a 3.7 MB GIF to a 551 KB MP4 and a 341 KB WebM. Sume's video-trim returns an MP4 with audio: "drop", so it can produce the silent MP4 half of that; the WebM half you would make elsewhere.

What do the numbers in web.dev's example say?

These are one example file, not a promise. Your clip will compress differently. The point that holds is the direction: video of similar visual quality tends to be far smaller than a GIF.

Which attributes make a video behave like a GIF?

web.dev lists four. autoplay starts it, loop repeats it, muted keeps it silent like a GIF, and playsinline is necessary for autoplay on iOS. Source order matters when you offer two formats: browsers do not guess which <source> is best, so an MP4 listed first is used even when WebM is supported. List the one you prefer first.

For a clip below the fold, web.dev adds loading="lazy", which keeps the video from loading until it is near the viewport and also delays autoplay until then. For a clip at the top of the page, do not lazy-load it; the hero video post covers that.

<video autoplay loop muted playsinline loading="lazy"
       poster="/cdn/mug-turn-poster.jpg" width="640" height="640">
  <source src="/cdn/mug-turn.webm" type="video/webm">
  <source src="/cdn/mug-turn.mp4" type="video/mp4">
</video>

How do you make the silent MP4 with Sume?

Video trim cuts one range into a new MP4 and takes audio: "drop". The default precision: "exact" re-encodes with libx264 and yuv420p, the same codec and pixel format web.dev's own FFmpeg command uses. The output object conforms width, height (256 to 2160) and fps (24, 25, 30 or 60), and the result lists duration_seconds. The price is $0.02 per job.

Start from the moving part of your source, not the whole clip. A few seconds is usually enough for a turn or a pour; the cap is 900 seconds, so nothing forces a long cut. Then pull a poster with video frames so the page has a still while the video loads.

curl -X POST https://api.sume.com/v1/video-trim \
  -H "Authorization: Bearer $SUME_API_KEY" \
  -H "Content-Type: application/json" \
  -H "Idempotency-Key: gif-replacement-001" \
  -d '{
    "video_url": "https://media.sume.com/artifacts/artf_demo/talk.mp4",
    "start": 3,
    "duration": 4,
    "audio": "drop",
    "output": { "width": 640, "height": 640, "fps": 24 }
  }'

What does Sume not do here?

The trim and frames docs describe MP4 video and JPEG or PNG stills. They do not document a WebM output, so if you want the smaller WebM source, convert the MP4 yourself. They also do not expose a size target, so compare the result to the GIF you are replacing, and keep the GIF only if the MP4 comes out larger.