Convert MOV to WebP

That is what makes this different from taking a thumbnail out of somebody else’s file. You have the MOV because you shot it or exported it, and you are about to put both the video and its poster on a page you control. The two files have to agree with each other, and the person choosing the frame is the person who knows what happens at second three.

It also means the poster is doing real work rather than decoration. It is what a visitor sees during the seconds the video is negotiating its way down the connection, it is what appears if autoplay is refused, and on a phone with data saving on it may be all they ever see. A poster chosen carelessly is a video that looks broken to a meaningful proportion of the audience.

The single most useful trick on this page. Find the moment the video will be showing once it begins playing — for most edits that is a second or two in, after whatever fade or hold opens it — and take the poster from there rather than from zero.

Do that and the transition from poster to playback is invisible: the browser paints the poster, then paints a nearly identical first frame, and nothing jumps. Take the poster from the first frame of a fade-from-black and the visitor sees a black rectangle until playback starts, then a sudden picture. The timestamp control is where this decision lives and it costs one conversion to test.

The still arrives at the video’s own resolution, which for a modern camera or phone means 3840 pixels wide. A poster is displayed at whatever the video element is, which on most pages is between 640 and 1280.

Shipping the full-resolution WebP means a visitor downloads perhaps a megabyte to look at a picture rendered at a third of the size. Resize to roughly twice the displayed width for a high-density screen and no more, which typically brings a photographic poster to somewhere between 60 and 200 kilobytes. The extraction here is deliberately not a resizing tool; do that step in whatever you use to prepare images for the site.

Frame extraction offers one control — the timestamp — so the WebP is encoded at a fixed quality of 82 on the usual hundred-point scale. That is a well-chosen middle setting: visually indistinguishable from the source on photographic content at normal viewing sizes, and materially smaller than anything higher.

If you need a specific number, the route is to take a PNG from the same timestamp and encode the WebP yourself with the settings you want. For a poster on a page, 82 is almost certainly what you would have chosen anyway, and the resize you are doing afterwards has a far larger effect on the file size than the quality figure does.

Phone footage is stored as landscape frames with a rotation flag, and the flag is honoured when the frame is read, so a portrait clip produces a portrait image with the same proportions the player will use.

That is more important for a poster than for any other still. The poster is painted into the video element’s box, so a landscape image behind a portrait video is letterboxed with bars that vanish the instant playback starts — a visible, ugly reflow that reads as a broken page. Check the dimensions of the WebP against the dimensions the video reports before you wire it up.

A still taken from a compressed recording carries that compression. Fast motion produces blur and blocking, fine texture is coarser than it looked while moving, and shadow detail can be visibly stepped. A better encoder cannot add back what the video never stored.

The practical consequence is that a static moment makes a much better poster than a dynamic one, which is convenient because a static moment usually makes a better poster anyway. If the whole clip is movement, the alternative is to shoot a still deliberately — most cameras and phones will take a photograph while recording, and a real photograph beats any frame.

The image is written with no ICC profile. A browser rendering an untagged image treats it as sRGB, which is the right assumption for the web and is not necessarily what the footage was.

Where that shows is on wide-gamut sources. iPhone video is Display P3, and a saturated frame — a sunset, a neon sign, a strongly coloured product — can look a little duller as an untagged still than it did in the video, which the browser is displaying with the video’s own colour information. If exact colour matters on a product page, check the poster against the playing video and adjust in your image editor rather than assuming the conversion is at fault.

The poster attribute on the video element takes the image directly, and setting preload to metadata rather than auto stops the browser fetching the video before anyone has asked for it — which is the combination that makes the poster earn its place instead of being a second download on top of a full video.

For a listing or a card, the same file usually serves, and a width and height on the image element prevent the layout shifting when it loads. If the page has several videos, one poster each at a sensible width is a smaller total than a single autoplaying preview, and it does not spend a visitor’s data on something they did not choose.

The decoding and the WebP encode both happen in this tab. Nothing carrying the video is sent anywhere, and you can confirm that in the network tab while a conversion runs.

It is the natural fit for the job. The video is not live yet, the poster is being prepared as part of publishing it, and the frame you are extracting is by definition the most representative image in the whole piece. Sending the master to an unknown converter to obtain it would be the one avoidable leak in an otherwise controlled release.