VSL thumbnail: how to design, size and test the poster image of your video sales letter

A VSL thumbnail, or poster image, is the still a visitor sees before the video's first frame plays and, on players that re-show it, again on pause. A good one shows a face mid-sentence or one clear promise, reads well at phone size, matches the ad that brought the visitor and loads fast. Test it on play or unmute rate first, then on pitch reach.

What does a VSL thumbnail actually do?

The poster's job depends on how your player starts. MDN describes the poster as the image shown while the video is downloading; without one, nothing appears until the first frame is available (MDN). What happens next depends on your setup.

What the poster does in each player setup

Click-to-play

• When the poster shows: until the visitor presses play
• Its main job: earn the play
• Number it moves: play rate

Muted autoplay

• When the poster shows: while the stream starts, and on pause
• Its main job: look intentional while loading; revive interest on pause
• Number it moves: unmute rate, retention after pauses

Autoplay blocked by the browser

• When the poster shows: until the visitor presses play
• Its main job: same as click-to-play
• Number it moves: play rate on those browsers

The third case is real. Firefox, for example, lets users block all media from autoplaying, even when it's muted (Mozilla). So even an autoplay VSL needs a poster that works as a click-to-play ad.

With muted autoplay, the first frames of the video take over most of the work the poster used to do; the VSL autoplay guide covers the unmute overlay. A poster on an autoplay page has fewer moments to make a difference than on a click-to-play page, which is why the pause state deserves as much design attention as the first impression. In RevvyScales, pausing re-shows the poster or a custom pause image instead of a frozen frame, so one design does double duty (player conversion features).

The pause and resume guide covers what a pause image should say, and the VSL player features guide shows where the poster fits among everything else the player does.

What makes a good VSL poster image?

Treat the poster as a print ad with one second to work. Five elements earn their place.

1. A face, eyes on the camera, mouth mid-word. A frozen smile looks like a stock photo; a face caught mid-sentence looks like someone about to talk to you. If your VSL has a presenter, use a real frame from the video, so the switch from poster to first frame doesn't jar.
2. One promise line, under eight words. Don't repeat the headline above the player; add to it. If the headline states the outcome, the poster can name the mechanism or the format, such as "The 3-minute kitchen test" for a fictional cooking course.
3. Text readable at phone size. Do the math: a 1280-pixel poster shown 390 pixels wide shrinks to about 30%, so 80-pixel letters display at about 24 pixels. Treat that as a floor. For contrast, WCAG's minimum is 4.5:1 for normal text and 3:1 for large text (W3C). Put a solid or darkened panel behind any text that sits on a busy photo, then check the ratio with a contrast checker.
4. Clear zones for the player. Keep the center, where play and unmute overlays appear, and the bottom strip, where controls and captions sit, free of text.
5. Continuity with the ad. The visitor clicked a specific creative. A poster with the same face, setting or color tells them they landed in the right place.

Poster ideas by VSL format

Open the format of your VSL:

Posters that fit each format

PresenterSlidesUGC-styleProduct demoAnimated

Presenter or talking head

Poster that fits: presenter mid-sentence, eye contact, short promise line.

Watch out for: blinks and half-closed eyes; pick frames by hand.

Text-on-screen slides

Poster that fits: the opening slide, or a bold version of the hook line.

Watch out for: walls of text; one line only.

UGC-style

Poster that fits: the creator in their real setting, using the product.

Watch out for: looking staged; keep it as filmed.

Product demo

Poster that fits: the product mid-use, at the moment the result shows.

Watch out for: before/after claims you can't support.

Animated or whiteboard

Poster that fits: the key drawing from the hook.

Watch out for: thin lines that vanish at phone size.

A poster brief to hand your designer

A vague request like "make a thumbnail" gets you a generic image. Send a brief instead:

• Ad it follows: a screenshot of the winning ad creative.
• Source frames: two or three timestamps from the video with the presenter mid-word and eyes open.
• Promise line: one line, under eight words, that adds to the headline rather than repeating it.
• Readability: about 24 pixels of letter height at 390 pixels wide, contrast of at least 4.5:1, on a solid or darkened panel.
• Keep clear: the center and the bottom strip.
• Export: 16:9 (plus a 9:16 version if your setup shows one to phones on a portrait cut), 1280 or 1600 pixels wide, WebP or AVIF with a JPEG fallback, within your size budget.
• Variants: a face-led version and a text-led version, so your first test compares two real ideas.

What never goes on a poster

A poster is advertising, so the same honesty rules apply:

• People who don't appear in the video, or anyone implying an endorsement they didn't give.
• "LIVE" badges or news-style banners on a recorded video.
• Play counts, "watching now" numbers or countdowns that aren't real. The FTC's 2022 staff report on dark patterns lists false activity messages and baseless countdown timers among practices that trick or manipulate users (FTC).
• Claims the video doesn't substantiate. The poster is not a loophole.

How big should a VSL thumbnail file be?

The poster is often the largest thing on screen when the page loads, which makes it a likely Largest Contentful Paint (LCP) element. For video elements, LCP uses the poster image load time or the first frame presentation time, whichever is earlier, and the "good" threshold is 2.5 seconds or less at the 75th percentile of page loads (web.dev). A heavy poster costs you either way: on a click-to-play page it is usually the video's LCP candidate, and on an autoplay page it competes with the first video segments for the same connection.

Size it for the slot, not for the camera:

• Work out the pixels you need. Multiply the widest display width by the screen's pixel density. A slot 390 pixels wide on a phone with a device pixel ratio of 3 needs about 1,170 pixels; a 960-pixel desktop slot at a ratio of 2 needs 1,920.
• Pick a sensible master. A 1280- or 1600-pixel-wide 16:9 image covers that phone slot. Serve a larger file only where your player can send it to desktops alone.
• Use a modern format. MDN reports that lossy WebP files are on average 25–35% smaller than JPEGs of similar quality, and lossy AVIF around 50% smaller, with JPEG as the usual fallback for photographs (MDN).
• Set a budget. For example, 100 KB for the poster, and treat anything above it as a bug to fix.

Here is the sizing math from this guide in one place:

The poster sizing math

Pixels you need=widest display width × device pixel ratio

Size on screen=size in the image × display width ÷ image width

A slot 390 pixels wide on a phone with a device pixel ratio of 3 needs about 1,170 pixels; a 960-pixel desktop slot at a ratio of 2 needs 1,920. A 1280-pixel poster shown 390 pixels wide shrinks to about 30%, so 80-pixel letters display at about 24 pixels.

Then get the loading order right:

• Never lazy-load the poster. web.dev's guidance is blunt: never lazy-load your LCP image (web.dev).
• Make it discoverable early. The same guidance says the LCP resource should be discoverable from the HTML source. A poster that only appears after a player script runs starts late, however small it is.
• Raise its priority where you can. Chrome starts images at low priority and boosts the ones in the viewport after layout; a fetchpriority hint of "high" on the LCP image tells the browser to fetch it sooner (web.dev). Whether you can set it depends on your page builder and player.
• Don't count on a blurry placeholder. Chromium's LCP heuristics exclude low-entropy placeholder images, so a blurred stand-in isn't counted as your largest paint; the real poster still is (web.dev).

In RevvyScales, hosted pages preload the poster from the page head, and large PNG or JPEG uploads are automatically served as lighter JPEG copies, at most 1,920 pixels wide (transparent images keep the original). The crop, the face and the words are still up to you.

The rest of the page matters too: scripts, fonts and tags compete with the poster for the first seconds. The VSL page speed guide covers them in priority order.

Should phones get a different poster?

If you serve the same 16:9 video everywhere, one 16:9 poster is enough; just check the text at phone size. If you serve a vertical cut to phones, check which poster those viewers actually see and how it crops. Whatever appears has to work at 9:16, with the face in the upper middle of the frame and text clear of the bottom controls.

RevvyScales can attach a 9:16 portrait companion video that phones and tablets get while desktops get the landscape version, on the Growth plan and up. Whatever tool you use, preview the portrait version on a real phone before you send traffic, because a crop that works at 16:9 can cut through a forehead or a line of text at 9:16.

How do you A/B test VSL thumbnails?

Pick the metric that matches the poster's job: play rate on click-to-play pages, unmute rate or pitch reach on autoplay pages, and revenue per visitor as the guardrail on both. A poster that wins plays by teasing something the video doesn't deliver will lose at the pitch.

Test big differences first: a face versus a text-led poster, or two different promise lines. Border colors and font tweaks are unlikely to produce a difference you can detect at normal traffic levels.

A worked example on sample size. Poster A gets a 52% play rate and poster B 56% after 1,000 visitors each. It looks like a win, but a two-proportion test gives about z = 1.8, a p-value near 0.07, which is not significant at 95% confidence. Keep going. At 3,000 visitors each with the same rates, z is about 3.1 (p ≈ 0.002), and you can call it. A 4-point difference needs thousands of visitors per side, not hundreds. Here is the same pair of posters at the two sample sizes:

Poster A vs poster B: when can you call it?

Worked example: a 52% play rate against 56%, two-proportion test

Not yet1,000 visitors each

• z is about 1.8
• A p-value near 0.07
• Not significant at 95% confidence: keep going

Call it3,000 visitors each

• z is about 3.1
• p ≈ 0.002
• The same rates, and now you can call it

On the Growth plan and up, RevvyScales can run poster variants inside one VSL, each shown by weight and sticky per viewer, with results broken down per variant (variant tests).

Test one thing at a time. If you change the poster and the headline together, you won't know which one moved the number. The headline testing guide covers the other half of the first impression, and the play rate guide explains how to set a baseline before you start.

Common VSL thumbnail mistakes

A 15-minute poster checklist

Tick each one off against your current poster; the ticks stay in this browser:

A 15-minute poster checklist

• The poster is a hand-picked frame or a designed still, not an automatic grab.
• It carries one face or one promise, with under eight words of text.
• Text displays at about 24 pixels or more at phone width, with contrast of at least 4.5:1, or 3:1 for large text.
• The center and the bottom strip are free for controls and captions.
• It visibly matches the ad that sends the traffic.
• Everything on it is true: the people, the badges, the numbers.
• Its width matches the slot, it uses WebP or AVIF where supported, and it fits your budget.
• It isn't lazy-loaded and is discoverable early in the page.
• If phones get a portrait cut, you've checked which poster they see and how it crops at 9:16.
• Pausing shows a designed image, not a frozen frame.
• Your next poster test has enough visitors per variant to detect the difference you care about.

0 of 11 done