Technical deep-dives on screenshot APIs, web rendering, caching strategies, and building reliable developer tools.
+Dark mode isn't a trend anymore — it's the default. Learn how to capture both light and dark screenshots with a single API parameter, inject custom dark themes, and generate dual OG images for social media.
+ Read article → +Stop designing Open Graph images by hand. Learn how to use screenshot APIs to automatically generate beautiful, dynamic OG images for every page on your site.
+ Read article → +Self-hosting Puppeteer sounds easy until you're debugging zombie Chrome processes at 3 AM. Here's why dedicated screenshot APIs exist and when they make sense for your project.
+ Read article → +How we reduced p95 response times by 10x with intelligent caching, CDN integration, and browser pool management. A practical guide to making screenshot APIs fast.
+ Read article → +You've just published a new blog post. You share it on Twitter, LinkedIn, and Slack. But instead of a rich preview with a beautiful image, your link shows up as a sad little text snippet — or worse, a broken image placeholder. Sound familiar?
+ +Open Graph (OG) images are the social preview cards that appear when someone shares your URL. They're one of those things that seem trivial until you realize they directly impact click-through rates. Posts with compelling preview images get 2-3x more engagement than plain text links. Yet most developers either skip them entirely or spend hours manually designing them in Figma for each page.
+ +There's a better way: use a screenshot API to generate OG images automatically, on the fly, for every single page on your site.
+ +Let's start with why this is harder than it should be. The Open Graph protocol is simple — you add a few meta tags to your HTML, including og:image, and social platforms use that image as a preview. The challenge isn't the protocol. It's producing the images themselves.
The traditional approaches all have significant drawbacks:
+ +Each approach trades off between quality, scalability, and engineering effort. What if you could get all three?
+ +The idea is elegant in its simplicity: design your OG image as an HTML page, then use a screenshot API to render it as a PNG. You get the full power of CSS for layout and styling, web fonts for typography, and zero infrastructure to maintain.
+ +Here's the workflow:
+ +og:image meta tagYour OG image template is just HTML and CSS. This means you can use flexbox for layout, Google Fonts for typography, gradients, shadows — anything the browser can render. Here's a minimal example:
+ +<div style="width:1200px;height:630px;display:flex;
+ align-items:center;justify-content:center;
+ background:linear-gradient(135deg,#667eea,#764ba2);
+ font-family:'Inter',sans-serif;padding:60px">
+ <h1 style="color:#fff;font-size:56px;
+ text-align:center;line-height:1.2">
+ {{title}}
+ </h1>
+</div>Replace {{title}} with your page title dynamically — either server-side or via query parameters — and you have a unique OG image for every page.
With SnapAPI, generating the OG image is a single API call:
+ +curl "https://api.snapapi.eu/v1/screenshot?url=https://yoursite.com/og-template?title=My+Blog+Post&width=1200&height=630&format=png" \
+ -H "X-API-Key: your-api-key" \
+ --output og-image.pngThat's it. The API launches a browser, renders your template, captures it at exactly 1200×630, and returns a pixel-perfect PNG. No Chrome processes to manage, no memory leaks to debug, no zombie browsers consuming your server's RAM.
+ +There are two strategies for integrating OG images into your site, and the right choice depends on your content velocity and caching requirements.
+ +Generate all OG images during your build step and serve them as static files. This works well for blogs and documentation sites where content changes infrequently. Your CI pipeline calls the screenshot API for each page, saves the PNGs to your public directory, and deploys them alongside your HTML.
+ +The advantage is zero runtime dependencies — your OG images are just static files on a CDN. The downside is that adding or updating content requires a rebuild.
+ +Generate OG images on the fly when they're first requested, then cache them aggressively. This is ideal for sites with user-generated content, e-commerce product pages, or any scenario where you can't enumerate all pages at build time.
+ +A typical implementation uses a serverless function or edge worker as a proxy:
+ +// /api/og-image.ts (Edge Function)
+export default async function handler(req) {
+ const { title, subtitle } = new URL(req.url).searchParams;
+ const templateUrl = `https://yoursite.com/og?title=${title}`;
+
+ const response = await fetch(
+ `https://api.snapapi.eu/v1/screenshot?` +
+ `url=${encodeURIComponent(templateUrl)}` +
+ `&width=1200&height=630&format=png`,
+ { headers: { "X-API-Key": process.env.SNAPAPI_KEY } }
+ );
+
+ return new Response(response.body, {
+ headers: {
+ "Content-Type": "image/png",
+ "Cache-Control": "public, max-age=86400, s-maxage=604800",
+ },
+ });
+}With proper cache headers, each OG image is generated exactly once and then served from the CDN for subsequent requests. Your og:image tag simply points to /api/og-image?title=My+Page+Title.
Since you're designing with HTML and CSS, you have enormous creative freedom. But social preview images have specific constraints worth respecting:
+ +OG images don't need to be fast for end users — they're fetched by social platform crawlers, not by browsers loading your page. That said, there are performance aspects worth considering:
+ +Cache-Control headers. Social platforms cache OG images themselves, but your CDN should too. A week or more is typical.Once you've set up the infrastructure for OG images, you'll find other uses for dynamically generated images. The same template approach works for:
+ +The pattern is always the same: design it in HTML, screenshot it via API, serve the result. HTML becomes your universal image template language.
+ +OG images shouldn't be an afterthought, and they shouldn't require a design team to maintain. By combining HTML templates with a screenshot API, you get the visual quality of hand-designed images with the scalability of automation. Every page gets a unique, branded social preview — automatically.
+ +The best part? Your OG image templates are just code. They live in version control, they're easy to iterate on, and they update everywhere when you change your branding. No more stale Figma exports, no more missing preview images, no more sad text-only link shares.
+ +Start with a simple template, wire it up to a screenshot API, add caching, and you're done. Your links will never look naked again.
+ +100 free screenshots to get started. Pixel-perfect rendering, EU-hosted, and ready in under a minute. Perfect for automated OG image generation.
+ Try the Playground → +Dark mode isn't a trend anymore — it's the default for most developers and a growing majority of users. Studies show that over 80% of developers work in dark mode, and roughly 70% of smartphone users have enabled it system-wide. If your app or website supports dark mode, you need to test, monitor, and preview both themes.
+ +But capturing dark mode screenshots programmatically is surprisingly annoying. Until now.
+ +Websites implement dark mode in different ways. Some use the prefers-color-scheme CSS media query. Others toggle a class on the body element via JavaScript. Some use CSS custom properties that switch based on a data attribute. And some use all three simultaneously.
If you're running a headless browser to take screenshots, you need to handle all of these. With Puppeteer or Playwright, that means:
+ +prefers-color-scheme: dark media featureThat's a lot of boilerplate for what should be a simple toggle.
+ +SnapAPI's darkMode parameter handles all of this for you. Set it to true, and the browser emulates prefers-color-scheme: dark before loading the page. Any site that respects the system preference will render in dark mode automatically.
curl -X POST https://snapapi.eu/v1/screenshot \
+ -H "Authorization: Bearer YOUR_API_KEY" \
+ -H "Content-Type: application/json" \
+ -d '{"url": "https://github.com", "darkMode": true}' \
+ --output github-dark.pngimport SnapAPI from 'snapapi';
+
+const client = new SnapAPI('YOUR_API_KEY');
+
+// Light mode (default)
+const light = await client.screenshot({ url: 'https://github.com' });
+
+// Dark mode — just add darkMode: true
+const dark = await client.screenshot({
+ url: 'https://github.com',
+ darkMode: true,
+});
+
+fs.writeFileSync('github-light.png', light);
+fs.writeFileSync('github-dark.png', dark);from snapapi import SnapAPI
+
+client = SnapAPI("YOUR_API_KEY")
+
+# Capture both themes
+light = client.screenshot(url="https://github.com")
+dark = client.screenshot(url="https://github.com", dark_mode=True)
+
+with open("github-light.png", "wb") as f:
+ f.write(light)
+with open("github-dark.png", "wb") as f:
+ f.write(dark)Not every site has built-in dark mode support. For those cases, you can combine darkMode with SnapAPI's css parameter to inject your own dark theme:
curl -X POST https://snapapi.eu/v1/screenshot \
+ -H "Authorization: Bearer YOUR_API_KEY" \
+ -H "Content-Type: application/json" \
+ -d '{
+ "url": "https://example.com",
+ "darkMode": true,
+ "css": "body { background: #1a1a2e !important; color: #eee !important; } a { color: #6da3ff !important; }"
+ }' \
+ --output example-forced-dark.pngThis is useful for generating consistent dark-themed previews across sites that don't natively support it.
+ +Real-world screenshots often include cookie banners, notification popups, and chat widgets that clutter the image. Use hideSelectors to remove them before capture:
{
+ "url": "https://example.com",
+ "darkMode": true,
+ "hideSelectors": ["#cookie-banner", ".chat-widget", ".notification-popup"],
+ "css": "body { overflow: hidden !important; }"
+}Combined with dark mode, this gives you clean, professional screenshots every time.
+ +One compelling use case is generating both light and dark Open Graph images for your website. Some platforms and apps display previews differently based on the user's system theme. By generating both variants, you can serve the right one via og:image based on context.
// Generate OG images for all your pages in both themes
+const pages = ['/about', '/pricing', '/blog'];
+
+for (const page of pages) {
+ const url = `https://yoursite.com${page}`;
+
+ // Light variant
+ await client.screenshot({
+ url,
+ width: 1200,
+ height: 630,
+ format: 'jpeg',
+ quality: 85,
+ });
+
+ // Dark variant
+ await client.screenshot({
+ url,
+ width: 1200,
+ height: 630,
+ format: 'jpeg',
+ quality: 85,
+ darkMode: true,
+ });
+}Automate this with a cron job or CI pipeline, and your social previews are always up to date — in both themes.
+ +darkMode: true — for sites with native prefers-color-scheme support (GitHub, MDN, most modern sites)darkMode + css — for forcing a dark look on sites without dark mode supporthideSelectors — for removing UI clutter regardless of themejs parameter — for triggering JavaScript-based theme toggles before captureAll of these parameters work together. You can combine darkMode, css, hideSelectors, and js in a single request — no multiple API calls needed.
Check our API documentation for the complete parameter reference, or see how we compare to other screenshot APIs on feature coverage.
+ +Test it right now with our playground — no API key needed. When you're ready for clean, unwatermarked screenshots, pick a plan that fits your usage.
+ View Plans → +Screenshot generation is inherently expensive. Every request launches a browser context, navigates to a URL, waits for rendering, and captures pixels. Without optimization, you're looking at 3-8 seconds per screenshot — unacceptable for any production API. Here's how we brought our p95 response times down from 6 seconds to under 600 milliseconds.
+ +Effective caching for screenshot APIs operates at three distinct layers, each addressing a different performance bottleneck. Getting all three right is what separates a fast API from a sluggish one.
+ +The most impactful optimization is also the most straightforward: don't re-render screenshots you've already taken. We hash the request parameters — URL, viewport dimensions, format, device scale factor, and any custom options — into a cache key. If the same combination was requested recently, we serve the cached result directly.
+ +The tricky part is cache invalidation. Web pages change, and serving a stale screenshot is worse than serving a slow one. Our approach uses configurable TTLs with smart defaults: 1 hour for most pages, shorter for known-dynamic content, and instant invalidation via a cache: false parameter when freshness is critical.
GET /v1/screenshot?url=example.com&cache_ttl=3600
+# First request: ~3s (full render)
+# Subsequent requests: ~50ms (cache hit)This single layer eliminates 60-70% of all rendering work in a typical production workload, because many applications request the same URLs repeatedly — social preview generators, monitoring dashboards, and report builders all exhibit high cache hit ratios.
+ +For cache misses, the next bottleneck is browser startup time. Launching a fresh Chrome instance takes 1-2 seconds. Multiply that by concurrent requests and you have a performance disaster combined with memory pressure that triggers garbage collection storms.
+ +Browser pooling solves this by maintaining a warm pool of ready-to-use browser contexts. Instead of launching Chrome per request, we allocate a pre-warmed context from the pool, navigate to the target URL, capture the screenshot, and return the context to the pool for reuse.
+ +Key considerations for browser pool management:
+ +Once a screenshot is generated, delivering it fast is a standard CDN problem — but with nuances specific to dynamically generated images. We push rendered screenshots to edge locations, so subsequent requests for the same content are served from the nearest point of presence.
+ +For our EU-hosted infrastructure, this means edge nodes across European cities. A user in Berlin gets their screenshot from Frankfurt, not from the origin server in Nuremberg. The latency difference is 5-10ms versus 30-50ms — small in absolute terms, but it compounds when your API is called in a rendering pipeline.
+ +Caching handles repeated requests, but the cold-start path still needs to be fast. Several techniques reduce raw rendering time:
+ +Performance optimization without measurement is guesswork. The metrics that actually matter for a screenshot API are:
+ +We expose these metrics via a /health endpoint and internal dashboards, making it easy to spot performance regressions before they affect users.
With all three caching layers active plus render path optimizations, our production numbers look like this: cache-hit responses average 45ms at p50 and 120ms at p95. Cache-miss responses average 1.8s at p50 and 2.9s at p95. The overall cache hit ratio sits at 72% across all customers, meaning nearly three-quarters of all screenshot requests are served without touching a browser.
+ +For most API consumers, the performance feels instant — because for the majority of their requests, it is. That's the power of treating caching as a first-class architectural concern rather than an afterthought bolted on later.
+ +Try SnapAPI's playground and see sub-second screenshot delivery in action. No signup required for your first request.
+ Open Playground → +Every developer has the same thought at some point: "I just need a screenshot of a webpage. How hard can it be?" You spin up a quick Node.js script with Puppeteer, take a screenshot, and it works. Ship it. Done. Right?
+ +Not quite. What starts as a ten-line script inevitably grows into a sprawling system that consumes more engineering time than the feature it was supposed to support. Let's talk about why screenshot APIs exist, what makes them genuinely hard to build, and when it makes sense to use one instead of rolling your own.
+ +Puppeteer is an excellent tool. It gives you full control over a headless Chrome instance, and for local development or one-off scripts, it's perfect. The problem isn't Puppeteer itself — it's what happens when you try to run it in production at any meaningful scale.
+ +Here's what your "simple screenshot service" needs to handle in the real world:
+ +Each of these is a project in itself. Together, they represent weeks of engineering work that has nothing to do with your actual product.
+ +Beyond the initial implementation, self-hosted screenshot services have ongoing costs that are easy to underestimate:
+ +Chrome is resource-hungry. A production screenshot service needs dedicated compute resources — you can't just tack it onto your existing application server. You're looking at dedicated containers or VMs with enough CPU and RAM to handle concurrent rendering, plus autoscaling if your traffic is bursty.
+ +Chrome updates break things. Puppeteer version X works with Chrome version Y but not Z. Dependencies shift. Security patches need applying. Someone on your team needs to own this service, monitor it, and fix it when it breaks at 3 AM on a Saturday — because it will break at 3 AM on a Saturday.
+ +The long tail of web rendering is brutal. SPAs that need JavaScript execution. Pages with lazy-loaded content that require scroll simulation. Cookie consent banners that block the entire viewport. Dark mode detection. Viewport emulation for mobile screenshots. Each edge case is another conditional in your codebase, another test to maintain, another thing that can break.
+ +++ +"The first 80% of a screenshot service takes a weekend. The remaining 20% takes six months."
+
A dedicated screenshot API isn't always the right choice. Here's a framework for deciding:
+ +Use a screenshot API when:
+Build your own when:
+Not all screenshot APIs are created equal. Here are the things that actually matter when evaluating options:
+ +Let's do the math. A senior developer costs roughly €80-120/hour fully loaded. Building a production-ready screenshot service takes 2-4 weeks minimum. That's €6,400-€19,200 in development costs alone, before ongoing maintenance.
+ +A screenshot API at typical pricing (€9-79/month depending on volume) would need to run for years before matching the upfront development cost. And during those years, someone else handles the infrastructure, the Chrome updates, and the 3 AM incidents.
+ +The calculation becomes even clearer when you factor in opportunity cost. Those 2-4 weeks of engineering time could go toward features that actually differentiate your product.
+ +Screenshot APIs exist because taking screenshots of web pages at scale is a deceptively hard infrastructure problem. The initial implementation is easy; the production hardening is where the real work lives. For most teams, delegating this to a specialized service is the pragmatic choice — it lets you ship the feature your users actually care about instead of maintaining browser infrastructure.
+ +The best engineering decisions aren't about what you can build. They're about what you should build. Save your complexity budget for the things that make your product unique.
+ +Get your first 100 screenshots free. No credit card required. EU-hosted, GDPR compliant, and ready in under a minute.
+ Open Playground → +Every update, feature, and improvement to SnapAPI. Follow our progress as we build the best EU-hosted screenshot API.
+css parameter — inject custom CSS into the page before capture (max 5000 chars). Perfect for custom fonts, color overrides, or complex layout adjustmentsdarkMode parameter — emulate prefers-color-scheme: dark for dark mode screenshotshideSelectors parameter — hide elements by CSS selector before capture (max 10, 200 chars each)<img> tagsGet your API key in 60 seconds and start capturing screenshots.
+ View Pricing → +Choosing the right screenshot API depends on your requirements — pricing, data residency, features, and developer experience. Here's an honest look at how the major screenshot APIs compare so you can pick the best fit for your project.
+ +EU-hosted screenshot API with simple EUR pricing.
+Feature-rich API with global CDN.
+Established screenshot service with retina support.
+Chrome-based screenshot API with CDN caching.
+Modern API with generous free tier.
+Simple screenshot API for quick integrations.
+Every API on this list can take a screenshot. What sets SnapAPI apart is where and how it does it:
+ +<img> tags. No server-side code needed for simple use cases.No signup required. Test screenshots in the playground, then get an API key when you're ready.
+ Get Your API Key → +This guide walks you through everything you need to go from zero to capturing screenshots with SnapAPI. No prior experience required.
+ +Head to the pricing page and pick a plan. You'll receive your API key immediately after signing up. Plans start at €9/month.
+Want to try first? Use the free playground — no signup needed.
+Use curl to call the POST endpoint and capture a screenshot:
curl -X POST https://snapapi.eu/v1/screenshot \ + -H "Content-Type: application/json" \ + -H "X-API-Key: YOUR_API_KEY" \ + -d '{"url": "https://example.com", "format": "png"}' \ + --output screenshot.png
That's it — you'll have a screenshot.png file on your machine.
SnapAPI supports GET requests, which means you can embed screenshots directly in <img> tags — no server-side code needed:
<img src="https://snapapi.eu/v1/screenshot?url=https://example.com&format=png&apiKey=YOUR_API_KEY" + alt="Screenshot of example.com" />
This is perfect for dashboards, link previews, and documentation where you want live screenshots without any backend logic.
+SnapAPI includes built-in response caching. When you request the same URL multiple times, subsequent requests return the cached result instantly — saving you both time and credits.
+Cache behavior is automatic. The Cache-Control headers in the response tell you the cache status.
For deeper integrations, use the official SDKs:
+ +import { SnapAPI } from 'snapapi'; + +const client = new SnapAPI('YOUR_API_KEY'); +const screenshot = await client.take({ + url: 'https://example.com', + format: 'png', + width: 1280, + height: 720 +});
from snapapi import SnapAPI + +client = SnapAPI("YOUR_API_KEY") +screenshot = client.take( + url="https://example.com", + format="png", + width=1280, + height=720 +)
Take advantage of SnapAPI's newest features for cleaner, more professional screenshots:
+ +Capture websites in dark mode by setting darkMode: true:
curl -X POST https://snapapi.eu/v1/screenshot \ + -H "Content-Type: application/json" \ + -H "X-API-Key: YOUR_API_KEY" \ + -d '{"url": "https://example.com", "darkMode": true}'
Remove cookie banners, popups, and ads using CSS selectors:
+ +curl -X POST https://snapapi.eu/v1/screenshot \ + -H "Content-Type: application/json" \ + -H "X-API-Key: YOUR_API_KEY" \ + -d '{"url": "https://example.com", "hideSelectors": ["#cookie-banner", ".popup", ".ads"]}'
You can combine both features for clean dark mode screenshots without distractions.
+Get your API key and start capturing screenshots in production.
+ Get Your API Key → +