标签：#screenshot

You set up Puppeteer, navigate to a page, call page.screenshot() , and the bottom half of your image is blank placeholder boxes. Welcome to lazy loading. Most modern sites defer images and heavy content until the user scrolls. Your headless browser never scrolls. So those elements never load. Here's how to deal with it. The scroll trick The most common fix is to programmatically scroll down the page before taking the screenshot: async function scrollToBottom ( page ) { await page . evaluate ( async () => { const delay = ms => new Promise ( r => setTimeout ( r , ms )); const distance = 300 ; while ( window . scrollY + window . innerHeight < document . body . scrollHeight ) { window . scrollBy ( 0 , distance ); await delay ( 150 ); } window . scrollTo ( 0 , 0 ); }); } await page . goto ( " https://example.com " , { waitUntil : " networkidle2 " }); await scrollToBottom ( page ); await page . waitForTimeout ( 1000 ); await page . screenshot ({ fullPage : true }); The 150ms delay between scrolls gives IntersectionObserver -based lazy loaders time to trigger. Too fast and you'll scroll past elements before they start loading. That final waitForTimeout after scrolling back to top lets any remaining images finish rendering. Not elegant, but necessary. Why networkidle2 isn't enough You'd think waitUntil: "networkidle2" would handle this. It waits until there are no more than 2 network connections for 500ms. But lazy-loaded images haven't even been requested yet at that point — they're waiting for a scroll event that never happens. networkidle2 only helps with content that loads on page init. For scroll-triggered content, you need the scroll. The loading="eager" override Some sites use the native loading="lazy" attribute. You can override it before images load: await page . evaluateOnNewDocument (() => { Object . defineProperty ( HTMLImageElement . prototype , " loading " , { set : function ( val ) { this . setAttribute ( " loading " , " eager " ); }, get : function () { retu

Every blog post needs an OG image. Without one, your links look blank on Twitter, LinkedIn, and Slack — just a plain URL that nobody clicks. Most developers solve this by spinning up a headless browser, loading an HTML template, taking a screenshot, and uploading it somewhere. It works, but now you're maintaining a Puppeteer instance, dealing with font rendering quirks, and burning server resources on something that should be simple. There's a faster approach: design your OG images as HTML templates and let a screenshot API handle the rendering. The Idea: HTML Templates as OG Images Think of your OG image as a tiny webpage. You already know HTML and CSS. Build a 1200×630 template with your blog title, author name, maybe a gradient background — whatever fits your brand. Host it or pass it as raw HTML. Then call an API to screenshot it. Done. A basic template might look like this: <div style= "width:1200px;height:630px;display:flex;align-items:center; justify-content:center;background:linear-gradient(135deg,#1a1a2e,#16213e); font-family:Inter,sans-serif;padding:60px" > <div style= "color:#fff;text-align:center" > <h1 style= "font-size:48px;margin:0" > {{title}} </h1> <p style= "font-size:24px;color:#8892b0;margin-top:20px" > {{author}} · {{date}} </p> </div> </div> Replace the placeholders on your server, then send the resulting HTML (or a URL pointing to it) to the API. Calling the API With ScreenshotRun , a single curl request captures the rendered template as a PNG: curl -X POST "https://api.screenshotrun.com/v1/screenshot" \ -H "Authorization: Bearer YOUR_API_KEY" \ -H "Content-Type: application/json" \ -d '{ "url": "https://yourblog.com/og-template?title=My+Post+Title", "viewport_width": 1200, "viewport_height": 630, "format": "png" }' The response gives you the image file. Save it to your CDN, set the og:image meta tag, and you're done. No browser to manage, no Chrome binary eating RAM on your CI server. Wiring It Into Your Build If you publish with a static sit