[{"data":1,"prerenderedAt":1292},["ShallowReactive",2],{"content:\u002Fimage-media-optimization\u002Fvideo-performance-optimization\u002Fvideo-poster-images-and-lcp":3,"surroundings:\u002Fimage-media-optimization\u002Fvideo-performance-optimization\u002Fvideo-poster-images-and-lcp":1283},{"id":4,"title":5,"body":6,"description":1262,"extension":1263,"meta":1264,"navigation":1276,"path":1277,"seo":1278,"stem":1281,"__hash__":1282},"content\u002Fimage-media-optimization\u002Fvideo-performance-optimization\u002Fvideo-poster-images-and-lcp\u002Findex.md","Video Poster Images and LCP",{"type":7,"value":8,"toc":1245},"minimark",[9,14,34,40,212,217,254,258,264,270,279,285,398,402,407,529,533,732,735,739,758,900,904,914,1019,1023,1037,1041,1058,1062,1065,1069,1098,1102,1108,1114,1124,1130,1134,1146,1167,1176,1185,1194,1203,1207,1230,1235,1238,1241],[10,11,13],"h1",{"id":12},"video-poster-images-and-lcp-how-to-keep-video-heroes-fast","Video Poster Images and LCP: How to Keep Video Heroes Fast",[15,16,17,18,23,24,28,29,33],"p",{},"This guide focuses on the LCP mechanics of ",[19,20,22],"a",{"href":21},"\u002Fimage-media-optimization\u002Fvideo-performance-optimization\u002F","Video Performance Optimization",", within ",[19,25,27],{"href":26},"\u002Fimage-media-optimization\u002F","Image & Media Optimization",". When a hero section is built around a video, the largest element in the viewport is the video element — and what the browser paints there first is either the ",[30,31,32],"code",{},"poster"," image or, if there is none, the first decoded frame. In Chromium, both are eligible LCP candidates: the poster as an image, and the first frame of a video as a video-type candidate. Whichever paints first with the largest area defines LCP until something larger replaces it.",[15,35,36,37,39],{},"That makes the poster one of the most important images on the page, and one of the most commonly neglected: a full-resolution PNG export of a video frame, referenced only in a ",[30,38,32],{}," attribute (which the preload scanner may discover late), downloaded at default priority, sometimes larger than a mobile-sized video rendition. Fix the poster and the video hero's LCP behaves like any well-optimised image hero.",[15,41,42],{},[43,44,50,51,50,58,50,62,50,65,50,74,50,80,50,91,50,96,50,104,50,111,50,117,50,121,50,125,50,128,50,131,50,135,50,139,50,143,50,150,50,155,50,160,50,166,50,170,50,174,50,178,50,182,50,185,50,189,50,193,50,197,50,201,50,207,50],"svg",{"viewBox":45,"width":46,"role":47,"ariaLabel":48,"style":49},"0 0 760 264","100%","img","Timelines comparing LCP for a video hero with no poster, an unoptimised poster, and an optimised preloaded poster.","height:auto;max-width:760px;display:block;margin:1.75rem auto;font-family:inherit;color:var(--fp-svg-ink)"," ",[52,53],"rect",{"className":54,"x":56,"y":56,"width":46,"height":46,"fill":57},[55],"svg-canvas","0","#ffffff",[59,60,61],"title",{},"Video hero LCP with three poster setups",[63,64,48],"desc",{},[52,66],{"x":67,"y":67,"width":68,"height":69,"rx":70,"fill":71,"stroke":72,"style":73},"1","758","262","10","none","currentColor","stroke-opacity:0.18",[75,76,61],"text",{"x":77,"y":78,"fill":72,"style":79},"28.0","34.0","font-size:16px;font-weight:700",[81,82],"line",{"x1":83,"y1":84,"x2":83,"y2":85,"stroke":86,"strokeWidth":87,"strokeDashArray":88,"style":90},"462.3","72.0","194.0","#b8860b","1.5",[89,89],"4","stroke-opacity:0.9",[75,92,95],{"x":77,"y":93,"fill":72,"style":94},"96.0","font-size:12.5px;font-weight:700","No poster",[52,97],{"x":98,"y":99,"width":100,"height":101,"rx":102,"fill":72,"stroke":72,"style":103},"133.3","78.0","90.8","26.0","3","fill-opacity:0.06;stroke-opacity:0.4",[75,105,110],{"x":106,"y":107,"fill":72,"style":108,"textAnchor":109},"178.7","95.5","font-size:11.5px","middle","HTML+CSS",[52,112],{"x":113,"y":99,"width":114,"height":101,"rx":102,"fill":115,"stroke":86,"style":116},"225.7","446.9","#ffc300","fill-opacity:0.24;stroke-opacity:0.9",[75,118,120],{"x":119,"y":107,"fill":72,"style":108,"textAnchor":109},"449.1","video data → first frame",[75,122,124],{"x":77,"y":123,"fill":72,"style":94},"134.0","PNG poster",[52,126],{"x":98,"y":127,"width":100,"height":101,"rx":102,"fill":72,"stroke":72,"style":103},"116.0",[75,129,110],{"x":106,"y":130,"fill":72,"style":108,"textAnchor":109},"133.5",[52,132],{"x":133,"y":127,"width":134,"height":101,"rx":102,"fill":115,"stroke":86,"style":116},"252.0","275.4",[75,136,138],{"x":137,"y":130,"fill":72,"style":108,"textAnchor":109},"389.7","1.4MB PNG poster",[75,140,142],{"x":77,"y":141,"fill":72,"style":94},"172.0","AVIF preloaded",[52,144],{"x":145,"y":146,"width":147,"height":101,"rx":102,"fill":148,"stroke":148,"style":149},"172.9","154.0","143.6","#0466c8","fill-opacity:0.14;stroke-opacity:0.9",[75,151,154],{"x":152,"y":153,"fill":72,"style":108,"textAnchor":109},"244.7","171.5","90KB AVIF poster",[81,156],{"x1":157,"y1":85,"x2":158,"y2":85,"stroke":72,"style":159},"132.6","726.0","stroke-opacity:0.4",[75,161,165],{"x":162,"y":163,"fill":164,"style":108,"textAnchor":109},"143.3","211.0","#51617a","0ms",[75,167,169],{"x":168,"y":163,"fill":164,"style":108,"textAnchor":109},"198.5","500ms",[75,171,173],{"x":172,"y":163,"fill":164,"style":108,"textAnchor":109},"264.5","1000ms",[75,175,177],{"x":176,"y":163,"fill":164,"style":108,"textAnchor":109},"330.4","1500ms",[75,179,181],{"x":180,"y":163,"fill":164,"style":108,"textAnchor":109},"396.3","2000ms",[75,183,184],{"x":83,"y":163,"fill":164,"style":108,"textAnchor":109},"2500ms",[75,186,188],{"x":187,"y":163,"fill":164,"style":108,"textAnchor":109},"528.2","3000ms",[75,190,192],{"x":191,"y":163,"fill":164,"style":108,"textAnchor":109},"594.1","3500ms",[75,194,196],{"x":195,"y":163,"fill":164,"style":108,"textAnchor":109},"660.1","4000ms",[75,198,200],{"x":199,"y":163,"fill":164,"style":108,"textAnchor":109},"712.3","4500ms",[75,202,206],{"x":83,"y":203,"fill":204,"style":205,"textAnchor":109},"68.0","#8a6608","font-size:12px;font-weight:700","LCP 2.5s",[75,208,211],{"x":77,"y":209,"fill":164,"style":210},"242.0","font-size:12.5px","The preloaded AVIF poster starts downloading while the HTML is still arriving and paints well inside the budget.",[213,214,216],"h2",{"id":215},"rapid-diagnosis","Rapid Diagnosis",[218,219,220,236,242,248],"ul",{},[221,222,223,227,228,231,232,235],"li",{},[224,225,226],"strong",{},"Identify the LCP element."," In the Performance panel, if LCP points at the ",[30,229,230],{},"\u003Cvideo>"," element, check the LCP entry's ",[30,233,234],{},"url",": a poster URL means the poster won; a video URL or empty means a frame did.",[221,237,238,241],{},[224,239,240],{},"Check the poster's size and format."," Exported PNG or JPEG frames at full video resolution are common and huge.",[221,243,244,247],{},[224,245,246],{},"Check discovery."," Is the poster requested early (preload scanner or preload hint) or late (after CSS\u002FJS)?",[221,249,250,253],{},[224,251,252],{},"Check priority."," Poster requests often start at Low priority.",[213,255,257],{"id":256},"root-cause-analysis","Root Cause Analysis",[15,259,260,263],{},[224,261,262],{},"1. Missing poster."," LCP waits for video bytes and decoding of the first frame, which is far slower than an image.",[15,265,266,269],{},[224,267,268],{},"2. Oversized poster."," Full-resolution lossless frames weigh hundreds of kilobytes to megabytes.",[15,271,272,275,276,278],{},[224,273,274],{},"3. Late discovery and low priority."," Posters set by JavaScript or inside client-rendered components are found late; the ",[30,277,32],{}," attribute may not be fetched at high priority.",[15,280,281,284],{},[224,282,283],{},"4. Poster replaced too early."," If the video starts playing before the poster finishes, the first frame can become a later, larger LCP candidate.",[15,286,287],{},[43,288,50,291,50,294,50,297,50,299,50,302,50,304,50,309,50,315,50,319,50,323,50,326,50,330,50,334,50,337,50,339,50,343,50,345,50,348,50,350,50,354,50,356,50,359,50,361,50,364,50,367,50,371,50,373,50,376,50,378,50,381,50,384,50,388,50,390,50,393,50,395,50],{"viewBox":289,"width":46,"role":47,"ariaLabel":290,"style":49},"0 0 760 228","Comparison of poster strategies for a video hero by LCP effect.",[52,292],{"className":293,"x":56,"y":56,"width":46,"height":46,"fill":57},[55],[59,295,296],{},"Poster choices compared",[63,298,290],{},[52,300],{"x":67,"y":67,"width":68,"height":301,"rx":70,"fill":71,"stroke":72,"style":73},"226",[75,303,296],{"x":77,"y":78,"fill":72,"style":79},[52,305],{"x":77,"y":306,"width":307,"height":308,"rx":56,"fill":72,"stroke":72,"style":103},"56.0","177.4","30.0",[75,310,314],{"x":311,"y":312,"fill":72,"style":94,"textAnchor":313},"38.0","75.5","start","Poster strategy",[52,316],{"x":317,"y":306,"width":318,"height":308,"rx":56,"fill":72,"stroke":72,"style":103},"205.4","263.3",[75,320,322],{"x":321,"y":312,"fill":72,"style":94,"textAnchor":109},"337.1","Discovery",[52,324],{"x":325,"y":306,"width":318,"height":308,"rx":56,"fill":72,"stroke":72,"style":103},"468.7",[75,327,329],{"x":328,"y":312,"fill":72,"style":94,"textAnchor":109},"600.4","Typical LCP effect",[52,331],{"x":77,"y":332,"width":307,"height":308,"rx":56,"fill":71,"stroke":72,"style":333},"86.0","stroke-opacity:0.35",[75,335,95],{"x":311,"y":336,"fill":72,"style":94,"textAnchor":313},"105.5",[52,338],{"x":317,"y":332,"width":318,"height":308,"rx":56,"fill":115,"stroke":86,"style":116},[75,340,342],{"x":321,"y":336,"fill":72,"style":341,"textAnchor":109},"font-size:12px","first frame only",[52,344],{"x":325,"y":332,"width":318,"height":308,"rx":56,"fill":115,"stroke":86,"style":116},[75,346,347],{"x":328,"y":336,"fill":72,"style":341,"textAnchor":109},"LCP waits for video",[52,349],{"x":77,"y":127,"width":307,"height":308,"rx":56,"fill":71,"stroke":72,"style":333},[75,351,353],{"x":311,"y":352,"fill":72,"style":94,"textAnchor":313},"135.5","Full-size PNG frame",[52,355],{"x":317,"y":127,"width":318,"height":308,"rx":56,"fill":72,"stroke":72,"style":103},[75,357,358],{"x":321,"y":352,"fill":72,"style":341,"textAnchor":109},"attribute, low priority",[52,360],{"x":325,"y":127,"width":318,"height":308,"rx":56,"fill":115,"stroke":86,"style":116},[75,362,363],{"x":328,"y":352,"fill":72,"style":341,"textAnchor":109},"slow image LCP",[52,365],{"x":77,"y":366,"width":307,"height":308,"rx":56,"fill":71,"stroke":72,"style":333},"146.0",[75,368,370],{"x":311,"y":369,"fill":72,"style":94,"textAnchor":313},"165.5","Responsive AVIF + preload",[52,372],{"x":317,"y":366,"width":318,"height":308,"rx":56,"fill":148,"stroke":148,"style":149},[75,374,375],{"x":321,"y":369,"fill":72,"style":341,"textAnchor":109},"early, high priority",[52,377],{"x":325,"y":366,"width":318,"height":308,"rx":56,"fill":148,"stroke":148,"style":149},[75,379,380],{"x":328,"y":369,"fill":72,"style":341,"textAnchor":109},"image-speed LCP",[52,382],{"x":77,"y":383,"width":307,"height":308,"rx":56,"fill":71,"stroke":72,"style":333},"176.0",[75,385,387],{"x":311,"y":386,"fill":72,"style":94,"textAnchor":313},"195.5","Poster via img overlay",[52,389],{"x":317,"y":383,"width":318,"height":308,"rx":56,"fill":148,"stroke":148,"style":149},[75,391,392],{"x":321,"y":386,"fill":72,"style":341,"textAnchor":109},"srcset\u002Fsizes, fetchpriority",[52,394],{"x":325,"y":383,"width":318,"height":308,"rx":56,"fill":148,"stroke":148,"style":149},[75,396,397],{"x":328,"y":386,"fill":72,"style":341,"textAnchor":109},"best control",[213,399,401],{"id":400},"step-by-step-resolution","Step-by-Step Resolution",[403,404,406],"h3",{"id":405},"_1-produce-a-lightweight-poster-at-display-size","1. Produce a lightweight poster at display size",[408,409,414],"pre",{"className":410,"code":411,"language":412,"meta":413,"style":413},"language-bash shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","ffmpeg -ss 0 -i hero.mp4 -frames:v 1 -vf \"scale=1280:-2\" hero-poster.png\nnpx sharp-cli -i hero-poster.png -o hero-poster-1280.avif -f avif -q 50\nnpx sharp-cli -i hero-poster.png -o hero-poster-640.avif -f avif -q 50 --resize 640\n# trade-off: aggressive AVIF compression can introduce banding in smooth\n# gradients common in video frames; inspect the poster at full size.\n","bash","",[30,415,416,453,485,516,523],{"__ignoreMap":413},[417,418,420,424,428,431,434,438,441,444,447,450],"span",{"class":81,"line":419},1,[417,421,423],{"class":422},"sQw3B","ffmpeg",[417,425,427],{"class":426},"sPXB4"," -ss",[417,429,430],{"class":426}," 0",[417,432,433],{"class":426}," -i",[417,435,437],{"class":436},"sZ8jY"," hero.mp4",[417,439,440],{"class":426}," -frames:v",[417,442,443],{"class":426}," 1",[417,445,446],{"class":426}," -vf",[417,448,449],{"class":436}," \"scale=1280:-2\"",[417,451,452],{"class":436}," hero-poster.png\n",[417,454,456,459,462,464,467,470,473,476,479,482],{"class":81,"line":455},2,[417,457,458],{"class":422},"npx",[417,460,461],{"class":436}," sharp-cli",[417,463,433],{"class":426},[417,465,466],{"class":436}," hero-poster.png",[417,468,469],{"class":426}," -o",[417,471,472],{"class":436}," hero-poster-1280.avif",[417,474,475],{"class":426}," -f",[417,477,478],{"class":436}," avif",[417,480,481],{"class":426}," -q",[417,483,484],{"class":426}," 50\n",[417,486,488,490,492,494,496,498,501,503,505,507,510,513],{"class":81,"line":487},3,[417,489,458],{"class":422},[417,491,461],{"class":436},[417,493,433],{"class":426},[417,495,466],{"class":436},[417,497,469],{"class":426},[417,499,500],{"class":436}," hero-poster-640.avif",[417,502,475],{"class":426},[417,504,478],{"class":436},[417,506,481],{"class":426},[417,508,509],{"class":426}," 50",[417,511,512],{"class":426}," --resize",[417,514,515],{"class":426}," 640\n",[417,517,519],{"class":81,"line":518},4,[417,520,522],{"class":521},"sjfSM","# trade-off: aggressive AVIF compression can introduce banding in smooth\n",[417,524,526],{"class":81,"line":525},5,[417,527,528],{"class":521},"# gradients common in video frames; inspect the poster at full size.\n",[403,530,532],{"id":531},"_2-preload-the-poster-with-high-priority","2. Preload the poster with high priority",[408,534,538],{"className":535,"code":536,"language":537,"meta":413,"style":413},"language-html shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","\u003Clink rel=\"preload\" as=\"image\" href=\"\u002Fmedia\u002Fhero-poster-1280.avif\" fetchpriority=\"high\"\n      imagesrcset=\"\u002Fmedia\u002Fhero-poster-640.avif 640w, \u002Fmedia\u002Fhero-poster-1280.avif 1280w\" imagesizes=\"100vw\">\n\u003Cvideo autoplay muted loop playsinline preload=\"metadata\" width=\"1280\" height=\"720\" poster=\"\u002Fmedia\u002Fhero-poster-1280.avif\">\n  \u003Csource src=\"\u002Fmedia\u002Fhero-720.webm\" type=\"video\u002Fwebm\">\n  \u003Csource src=\"\u002Fmedia\u002Fhero-720.mp4\" type=\"video\u002Fmp4\">\n\u003C\u002Fvideo>\n\u003C!-- trade-off: the poster attribute has no srcset; the preload's imagesrcset\n     picks the best file for the device, but the attribute still names one URL.\n     Keep them consistent or use the overlay approach below. -->\n","html",[30,539,540,583,604,656,682,704,714,720,726],{"__ignoreMap":413},[417,541,542,546,550,553,556,559,562,564,567,570,572,575,578,580],{"class":81,"line":419},[417,543,545],{"class":544},"saISM","\u003C",[417,547,549],{"class":548},"sZBmE","link",[417,551,552],{"class":426}," rel",[417,554,555],{"class":544},"=",[417,557,558],{"class":436},"\"preload\"",[417,560,561],{"class":426}," as",[417,563,555],{"class":544},[417,565,566],{"class":436},"\"image\"",[417,568,569],{"class":426}," href",[417,571,555],{"class":544},[417,573,574],{"class":436},"\"\u002Fmedia\u002Fhero-poster-1280.avif\"",[417,576,577],{"class":426}," fetchpriority",[417,579,555],{"class":544},[417,581,582],{"class":436},"\"high\"\n",[417,584,585,588,590,593,596,598,601],{"class":81,"line":455},[417,586,587],{"class":426},"      imagesrcset",[417,589,555],{"class":544},[417,591,592],{"class":436},"\"\u002Fmedia\u002Fhero-poster-640.avif 640w, \u002Fmedia\u002Fhero-poster-1280.avif 1280w\"",[417,594,595],{"class":426}," imagesizes",[417,597,555],{"class":544},[417,599,600],{"class":436},"\"100vw\"",[417,602,603],{"class":544},">\n",[417,605,606,608,611,614,617,620,623,626,628,631,634,636,639,642,644,647,650,652,654],{"class":81,"line":487},[417,607,545],{"class":544},[417,609,610],{"class":548},"video",[417,612,613],{"class":426}," autoplay",[417,615,616],{"class":426}," muted",[417,618,619],{"class":426}," loop",[417,621,622],{"class":426}," playsinline",[417,624,625],{"class":426}," preload",[417,627,555],{"class":544},[417,629,630],{"class":436},"\"metadata\"",[417,632,633],{"class":426}," width",[417,635,555],{"class":544},[417,637,638],{"class":436},"\"1280\"",[417,640,641],{"class":426}," height",[417,643,555],{"class":544},[417,645,646],{"class":436},"\"720\"",[417,648,649],{"class":426}," poster",[417,651,555],{"class":544},[417,653,574],{"class":436},[417,655,603],{"class":544},[417,657,658,661,664,667,669,672,675,677,680],{"class":81,"line":518},[417,659,660],{"class":544},"  \u003C",[417,662,663],{"class":548},"source",[417,665,666],{"class":426}," src",[417,668,555],{"class":544},[417,670,671],{"class":436},"\"\u002Fmedia\u002Fhero-720.webm\"",[417,673,674],{"class":426}," type",[417,676,555],{"class":544},[417,678,679],{"class":436},"\"video\u002Fwebm\"",[417,681,603],{"class":544},[417,683,684,686,688,690,692,695,697,699,702],{"class":81,"line":525},[417,685,660],{"class":544},[417,687,663],{"class":548},[417,689,666],{"class":426},[417,691,555],{"class":544},[417,693,694],{"class":436},"\"\u002Fmedia\u002Fhero-720.mp4\"",[417,696,674],{"class":426},[417,698,555],{"class":544},[417,700,701],{"class":436},"\"video\u002Fmp4\"",[417,703,603],{"class":544},[417,705,707,710,712],{"class":81,"line":706},6,[417,708,709],{"class":544},"\u003C\u002F",[417,711,610],{"class":548},[417,713,603],{"class":544},[417,715,717],{"class":81,"line":716},7,[417,718,719],{"class":521},"\u003C!-- trade-off: the poster attribute has no srcset; the preload's imagesrcset\n",[417,721,723],{"class":81,"line":722},8,[417,724,725],{"class":521},"     picks the best file for the device, but the attribute still names one URL.\n",[417,727,729],{"class":81,"line":728},9,[417,730,731],{"class":521},"     Keep them consistent or use the overlay approach below. -->\n",[15,733,734],{},"Expected outcome: the poster paints early as the LCP element; the video takes over afterwards.",[403,736,738],{"id":737},"_3-use-an-image-overlay-for-full-responsive-control","3. Use an image overlay for full responsive control",[15,740,741,742,745,746,749,750,753,754,757],{},"Render a real ",[30,743,744],{},"\u003Cimg>"," with ",[30,747,748],{},"srcset",", ",[30,751,752],{},"sizes"," and ",[30,755,756],{},"fetchpriority=\"high\""," absolutely positioned over (or instead of) the video until it starts playing, then fade the image out.",[408,759,761],{"className":535,"code":760,"language":537,"meta":413,"style":413},"\u003Cdiv class=\"hero-media\">\n  \u003Cimg src=\"\u002Fmedia\u002Fhero-poster-1280.avif\" srcset=\"\u002Fmedia\u002Fhero-poster-640.avif 640w, \u002Fmedia\u002Fhero-poster-1280.avif 1280w\"\n       sizes=\"100vw\" width=\"1280\" height=\"720\" fetchpriority=\"high\" alt=\"\">\n  \u003Cvideo autoplay muted loop playsinline preload=\"metadata\" width=\"1280\" height=\"720\">\u003C\u002Fvideo>\n\u003C\u002Fdiv>\n\u003C!-- trade-off: the overlay adds a few lines of JavaScript to remove the image on\n     the 'playing' event, and both elements must stay exactly aligned to avoid\n     a visible shift. -->\n",[30,762,763,780,800,838,877,885,890,895],{"__ignoreMap":413},[417,764,765,767,770,773,775,778],{"class":81,"line":419},[417,766,545],{"class":544},[417,768,769],{"class":548},"div",[417,771,772],{"class":426}," class",[417,774,555],{"class":544},[417,776,777],{"class":436},"\"hero-media\"",[417,779,603],{"class":544},[417,781,782,784,786,788,790,792,795,797],{"class":81,"line":455},[417,783,660],{"class":544},[417,785,47],{"class":548},[417,787,666],{"class":426},[417,789,555],{"class":544},[417,791,574],{"class":436},[417,793,794],{"class":426}," srcset",[417,796,555],{"class":544},[417,798,799],{"class":436},"\"\u002Fmedia\u002Fhero-poster-640.avif 640w, \u002Fmedia\u002Fhero-poster-1280.avif 1280w\"\n",[417,801,802,805,807,809,811,813,815,817,819,821,823,825,828,831,833,836],{"class":81,"line":487},[417,803,804],{"class":426},"       sizes",[417,806,555],{"class":544},[417,808,600],{"class":436},[417,810,633],{"class":426},[417,812,555],{"class":544},[417,814,638],{"class":436},[417,816,641],{"class":426},[417,818,555],{"class":544},[417,820,646],{"class":436},[417,822,577],{"class":426},[417,824,555],{"class":544},[417,826,827],{"class":436},"\"high\"",[417,829,830],{"class":426}," alt",[417,832,555],{"class":544},[417,834,835],{"class":436},"\"\"",[417,837,603],{"class":544},[417,839,840,842,844,846,848,850,852,854,856,858,860,862,864,866,868,870,873,875],{"class":81,"line":518},[417,841,660],{"class":544},[417,843,610],{"class":548},[417,845,613],{"class":426},[417,847,616],{"class":426},[417,849,619],{"class":426},[417,851,622],{"class":426},[417,853,625],{"class":426},[417,855,555],{"class":544},[417,857,630],{"class":436},[417,859,633],{"class":426},[417,861,555],{"class":544},[417,863,638],{"class":436},[417,865,641],{"class":426},[417,867,555],{"class":544},[417,869,646],{"class":436},[417,871,872],{"class":544},">\u003C\u002F",[417,874,610],{"class":548},[417,876,603],{"class":544},[417,878,879,881,883],{"class":81,"line":525},[417,880,709],{"class":544},[417,882,769],{"class":548},[417,884,603],{"class":544},[417,886,887],{"class":81,"line":706},[417,888,889],{"class":521},"\u003C!-- trade-off: the overlay adds a few lines of JavaScript to remove the image on\n",[417,891,892],{"class":81,"line":716},[417,893,894],{"class":521},"     the 'playing' event, and both elements must stay exactly aligned to avoid\n",[417,896,897],{"class":81,"line":722},[417,898,899],{"class":521},"     a visible shift. -->\n",[403,901,903],{"id":902},"_4-delay-video-start-until-after-lcp-when-bandwidth-is-scarce","4. Delay video start until after LCP when bandwidth is scarce",[15,905,906,907,910,911,913],{},"On slow connections, attach the video sources after ",[30,908,909],{},"load"," (or after the poster's ",[30,912,909],{}," event), so video bytes never compete with the poster.",[15,915,916],{},[43,917,50,920,50,923,50,926,50,928,50,931,50,933,50,938,50,943,50,947,50,950,50,954,50,958,50,961,50,965,50,969,50,972,50,976,50,980,50,985,50,989,50,993,50,998,50,1000,50,1003,50,1007,50,1010,50,1013,50,1016,50],{"viewBox":918,"width":46,"role":47,"ariaLabel":919,"style":49},"0 0 760 318","Four steps that make a video hero's LCP behave like a fast image hero.",[52,921],{"className":922,"x":56,"y":56,"width":46,"height":46,"fill":57},[55],[59,924,925],{},"Fast video hero checklist",[63,927,919],{},[52,929],{"x":67,"y":67,"width":68,"height":930,"rx":70,"fill":71,"stroke":72,"style":73},"316",[75,932,925],{"x":77,"y":78,"fill":72,"style":79},[52,934],{"x":84,"y":306,"width":935,"height":936,"rx":937,"fill":148,"stroke":148,"style":149},"660.0","51.0","6",[75,939,942],{"x":332,"y":940,"fill":72,"style":941,"textAnchor":313},"77.0","font-size:13px;font-weight:700","Poster at display size in AVIF\u002FWebP",[75,944,946],{"x":332,"y":945,"fill":72,"style":341,"textAnchor":313},"94.0","Tens of kilobytes rather than megabytes",[52,948],{"x":84,"y":949,"width":935,"height":936,"rx":937,"fill":148,"stroke":148,"style":149},"119.0",[75,951,953],{"x":332,"y":952,"fill":72,"style":941,"textAnchor":313},"140.0","Preload with fetchpriority=high",[75,955,957],{"x":332,"y":956,"fill":72,"style":341,"textAnchor":313},"157.0","Or an img overlay with srcset and sizes",[52,959],{"x":84,"y":960,"width":935,"height":936,"rx":937,"fill":148,"stroke":148,"style":149},"182.0",[75,962,964],{"x":332,"y":963,"fill":72,"style":941,"textAnchor":313},"203.0","preload=metadata on the video",[75,966,968],{"x":332,"y":967,"fill":72,"style":341,"textAnchor":313},"220.0","Video data never competes with the poster",[52,970],{"x":84,"y":971,"width":935,"height":936,"rx":937,"fill":148,"stroke":148,"style":149},"245.0",[75,973,975],{"x":332,"y":974,"fill":72,"style":941,"textAnchor":313},"266.0","Same aspect ratio and dimensions",[75,977,979],{"x":332,"y":978,"fill":72,"style":341,"textAnchor":313},"283.0","No shift when playback replaces the poster",[81,981],{"x1":982,"y1":107,"x2":982,"y2":983,"stroke":72,"strokeWidth":87,"style":984},"43.0","130.5","stroke-opacity:0.3",[81,986],{"x1":982,"y1":987,"x2":982,"y2":988,"stroke":72,"strokeWidth":87,"style":984},"158.5","193.5",[81,990],{"x1":982,"y1":991,"x2":982,"y2":992,"stroke":72,"strokeWidth":87,"style":984},"221.5","256.5",[994,995],"circle",{"cx":982,"cy":996,"r":997,"fill":148},"81.5","13",[75,999,67],{"x":982,"y":332,"fill":57,"style":941,"textAnchor":109},[994,1001],{"cx":982,"cy":1002,"r":997,"fill":148},"144.5",[75,1004,1006],{"x":982,"y":1005,"fill":57,"style":941,"textAnchor":109},"149.0","2",[994,1008],{"cx":982,"cy":1009,"r":997,"fill":148},"207.5",[75,1011,102],{"x":982,"y":1012,"fill":57,"style":941,"textAnchor":109},"212.0",[994,1014],{"cx":982,"cy":1015,"r":997,"fill":148},"270.5",[75,1017,89],{"x":982,"y":1018,"fill":57,"style":941,"textAnchor":109},"275.0",[213,1020,1022],{"id":1021},"verification","Verification",[15,1024,1025,1026,1028,1029,1032,1033,1036],{},"In a throttled trace, the LCP marker should land on the poster image within the image-LCP budget, well before video playback starts. The LCP entry's ",[30,1027,234],{}," should be the poster. In RUM with the ",[30,1030,1031],{},"web-vitals"," attribution build, the LCP resource URL for hero templates should be the poster and ",[30,1034,1035],{},"resourceLoadDelay"," should be small.",[213,1038,1040],{"id":1039},"worked-example-an-automotive-landing-page","Worked Example: An Automotive Landing Page",[15,1042,1043,1044,1047,1048,1050,1051,1053,1054,1057],{},"A car manufacturer's model pages opened with a full-bleed video hero, no poster and ",[30,1045,1046],{},"preload=\"auto\"",". LCP on mobile was the first video frame at 4.6s p75. The team generated 640px and 1280px AVIF posters (70KB and 150KB), added an ",[30,1049,744],{}," overlay with ",[30,1052,756],{},", switched the video to ",[30,1055,1056],{},"preload=\"metadata\"",", and started playback after the overlay image loaded. LCP p75 dropped to 1.9s, with the poster as the LCP element on 96% of page views; the video still began playing within a second of LCP on typical connections.",[213,1059,1061],{"id":1060},"choosing-the-poster-frame","Choosing the Poster Frame",[15,1063,1064],{},"The poster is what most users see first, and what users with autoplay blocked or reduced motion see permanently. Choose it deliberately: a frame that communicates the product or message on its own, with legible composition at mobile sizes, and visually continuous with the video's first frame so the transition is seamless. Avoid frames with text that becomes illegible when compressed, and avoid very dark or very busy frames that compress poorly. A designer's two minutes here often matters more than the codec choice.",[213,1066,1068],{"id":1067},"common-mistakes","Common Mistakes",[218,1070,1071,1077,1083,1089],{},[221,1072,1073,1076],{},[224,1074,1075],{},"Lazy-loading the poster or the hero video container."," Delays the LCP element.",[221,1078,1079,1082],{},[224,1080,1081],{},"Using the same giant poster for mobile and desktop."," Wastes bytes on small screens.",[221,1084,1085,1088],{},[224,1086,1087],{},"Mismatched aspect ratios."," The poster and video must share dimensions or the swap shifts layout.",[221,1090,1091,1094,1095,1097],{},[224,1092,1093],{},"CSS background posters."," Background images are discovered late; use an attribute or ",[30,1096,744],{},".",[213,1099,1101],{"id":1100},"edge-cases","Edge Cases",[15,1103,1104,1107],{},[224,1105,1106],{},"Safari behaviour."," Safari's handling of first-frame LCP and poster timing differs; test in Safari for visual smoothness even though LCP is reported from Chromium.",[15,1109,1110,1113],{},[224,1111,1112],{},"Streaming players."," HLS\u002FDASH players initialise via JavaScript; posters must not depend on that JavaScript to appear.",[15,1115,1116,1119,1120,1123],{},[224,1117,1118],{},"Reduced motion."," With ",[30,1121,1122],{},"prefers-reduced-motion",", keep only the poster — which is now the permanent hero image.",[15,1125,1126,1129],{},[224,1127,1128],{},"Low bandwidth."," On 2G or with data saver, skip the video entirely and serve the poster as a static hero.",[213,1131,1133],{"id":1132},"faq","FAQ",[1135,1136,1139,1143],"details",{"className":1137},[1138],"faq-item",[1140,1141,1142],"summary",{},"Does the poster count as an image for LCP?",[15,1144,1145],{},"Yes. Chromium treats a video's poster as an image LCP candidate, with timing based on when the poster paints. The first video frame can also be a candidate if no poster is set.",[1135,1147,1149,1152],{"className":1148},[1138],[1140,1150,1151],{},"Should the poster be preloaded if it is in the HTML?",[15,1153,1154,1155,1157,1158,1160,1161,1163,1164,1166],{},"The ",[30,1156,32],{}," attribute may not be fetched as early or as high priority as an ",[30,1159,744],{},". A preload with ",[30,1162,756],{}," (or an ",[30,1165,744],{}," overlay) guarantees early, high-priority loading.",[1135,1168,1170,1173],{"className":1169},[1138],[1140,1171,1172],{},"Can the first frame become a later LCP candidate?",[15,1174,1175],{},"If it paints a larger area than the poster, yes. With matching dimensions it is the same size, so it does not replace the poster as LCP.",[1135,1177,1179,1182],{"className":1178},[1138],[1140,1180,1181],{},"How small should a poster be?",[15,1183,1184],{},"As small as possible at acceptable quality: typically 50–150KB in AVIF for a full-width mobile-to-desktop hero. Use responsive sizes so phones download the smaller version.",[1135,1186,1188,1191],{"className":1187},[1138],[1140,1189,1190],{},"What if the video is a third-party embed?",[15,1192,1193],{},"Use a facade: a thumbnail image (optimised like a poster) with a play button, loading the player on click. The thumbnail becomes the LCP element.",[1135,1195,1197,1200],{"className":1196},[1138],[1140,1198,1199],{},"Does fetchpriority on the poster delay CSS?",[15,1201,1202],{},"It raises the image above other images and late scripts, but render-blocking CSS remains high priority. On very constrained connections, keep critical CSS small so both arrive quickly.",[213,1204,1206],{"id":1205},"related","Related",[218,1208,1209,1216,1223],{},[221,1210,1211,1215],{},[19,1212,1214],{"href":1213},"\u002Fimage-media-optimization\u002Fimage-cdns-and-fetchpriority\u002Fusing-fetchpriority-to-prioritize-the-lcp-image\u002F","Using fetchpriority to prioritize the LCP image"," — the same technique for still heroes.",[221,1217,1218,1222],{},[19,1219,1221],{"href":1220},"\u002Fimage-media-optimization\u002Fvideo-performance-optimization\u002Flazy-loading-video-without-hurting-lcp\u002F","Lazy-loading video without hurting LCP"," — keeping video bytes off the critical path.",[221,1224,1225,1229],{},[19,1226,1228],{"href":1227},"\u002Fimage-media-optimization\u002Fimage-decoding-and-placeholders\u002Flqip-vs-blurhash-placeholders\u002F","LQIP vs BlurHash placeholders"," — placeholder options while the poster loads.",[1231,1232,1234],"script",{"type":1233},"application\u002Fld+json","\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"HowTo\",\n  \"name\": \"Video Poster Images and LCP: How to Keep Video Heroes Fast\",\n  \"description\": \"How video posters and first frames become LCP candidates, and how to deliver them like hero images so video heroes stay fast.\",\n  \"step\": [\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 1,\n      \"name\": \"Produce a lightweight poster at display size\",\n      \"text\": \"Produce a lightweight poster at display size\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 2,\n      \"name\": \"Preload the poster with high priority\",\n      \"text\": \"Expected outcome: the poster paints early as the LCP element; the video takes over afterwards.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 3,\n      \"name\": \"Use an image overlay for full responsive control\",\n      \"text\": \"Render a real with srcset, sizes and fetchpriority=\\\"high\\\" absolutely positioned over (or instead of) the video until it starts playing, then fade the image out.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 4,\n      \"name\": \"Delay video start until after LCP when bandwidth is scarce\",\n      \"text\": \"On slow connections, attach the video sources after load (or after the poster's load event), so video bytes never compete with the poster.\"\n    }\n  ]\n}\n",[1231,1236,1237],{"type":1233},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"TechArticle\",\n  \"headline\": \"Video Poster Images and LCP: How to Keep Video Heroes Fast\",\n  \"description\": \"How video posters and first frames become LCP candidates, and how to deliver them like hero images so video heroes stay fast.\",\n  \"datePublished\": \"2026-10-06\",\n  \"dateModified\": \"2026-10-06\",\n  \"author\": {\n    \"@type\": \"Organization\",\n    \"name\": \"frontend-performance.com\"\n  },\n  \"publisher\": {\n    \"@type\": \"Organization\",\n    \"name\": \"frontend-performance.com\"\n  },\n  \"mainEntityOfPage\": {\n    \"@type\": \"WebPage\",\n    \"@id\": \"https:\u002F\u002Ffrontend-performance.com\u002Fimage-media-optimization\u002Fvideo-performance-optimization\u002Fvideo-poster-images-and-lcp\u002F\"\n  }\n}\n",[1231,1239,1240],{"type":1233},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"BreadcrumbList\",\n  \"itemListElement\": [\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 1,\n      \"name\": \"Home\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 2,\n      \"name\": \"Image & Media Optimization\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fimage-media-optimization\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 3,\n      \"name\": \"Video Performance Optimization\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fimage-media-optimization\u002Fvideo-performance-optimization\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 4,\n      \"name\": \"Video Poster Images and LCP\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fimage-media-optimization\u002Fvideo-performance-optimization\u002Fvideo-poster-images-and-lcp\u002F\"\n    }\n  ]\n}\n",[1242,1243,1244],"style",{},"html pre.shiki code .sQw3B, html code.shiki .sQw3B{--shiki-default:#702C00;--shiki-dark:#FFB757;--shiki-light:#702C00}html pre.shiki code .sPXB4, html code.shiki .sPXB4{--shiki-default:#023B95;--shiki-dark:#91CBFF;--shiki-light:#023B95}html pre.shiki code .sZ8jY, html code.shiki .sZ8jY{--shiki-default:#032563;--shiki-dark:#ADDCFF;--shiki-light:#032563}html pre.shiki code .sjfSM, html code.shiki .sjfSM{--shiki-default:#66707B;--shiki-dark:#BDC4CC;--shiki-light:#66707B}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html pre.shiki code .saISM, html code.shiki .saISM{--shiki-default:#0E1116;--shiki-dark:#F0F3F6;--shiki-light:#0E1116}html pre.shiki code .sZBmE, html code.shiki .sZBmE{--shiki-default:#024C1A;--shiki-dark:#72F088;--shiki-light:#024C1A}",{"title":413,"searchDepth":455,"depth":455,"links":1246},[1247,1248,1249,1255,1256,1257,1258,1259,1260,1261],{"id":215,"depth":455,"text":216},{"id":256,"depth":455,"text":257},{"id":400,"depth":455,"text":401,"children":1250},[1251,1252,1253,1254],{"id":405,"depth":487,"text":406},{"id":531,"depth":487,"text":532},{"id":737,"depth":487,"text":738},{"id":902,"depth":487,"text":903},{"id":1021,"depth":455,"text":1022},{"id":1039,"depth":455,"text":1040},{"id":1060,"depth":455,"text":1061},{"id":1067,"depth":455,"text":1068},{"id":1100,"depth":455,"text":1101},{"id":1132,"depth":455,"text":1133},{"id":1205,"depth":455,"text":1206},"How video posters and first frames become LCP candidates, and how to deliver them like hero images so video heroes stay fast.","md",{"slug":1265,"type":1266,"breadcrumb":1267,"datePublished":1275,"dateModified":1275},"video-poster-images-and-lcp","article",[1268,1271,1272,1273],{"name":1269,"url":1270},"Home","\u002F",{"name":27,"url":26},{"name":22,"url":21},{"name":5,"url":1274},"\u002Fimage-media-optimization\u002Fvideo-performance-optimization\u002Fvideo-poster-images-and-lcp\u002F","2026-10-06",true,"\u002Fimage-media-optimization\u002Fvideo-performance-optimization\u002Fvideo-poster-images-and-lcp",{"title":1279,"description":1280},"Video Poster Images and LCP: Making Heroes Fast","When a hero video is the largest element, its poster or first frame decides LCP. Size, format and preload the poster correctly to keep video heroes under 2.5s.","image-media-optimization\u002Fvideo-performance-optimization\u002Fvideo-poster-images-and-lcp\u002Findex","nY80pZfEz9Ztqx4sBXTx0ZeE4joEGAPf8xf-w7P72y0",[1284,1288],{"title":1285,"path":1286,"stem":1287},"Replacing Animated GIFs with Video","\u002Fimage-media-optimization\u002Fvideo-performance-optimization\u002Freplacing-animated-gifs-with-video","image-media-optimization\u002Fvideo-performance-optimization\u002Freplacing-animated-gifs-with-video\u002Findex",{"title":1289,"path":1290,"stem":1291},"JavaScript Bundle Optimization & Code Splitting","\u002Fjavascript-bundle-optimization-code-splitting","javascript-bundle-optimization-code-splitting\u002Findex",1791308077294]