URL to Image vs HTML to Image: When to Use Each

PeekShot offers two primary modes for creating screenshots: URL to Image and HTML to Image. Understanding when to use each mode helps you choose the right approach for your specific needs.

URL to Image Mode

URL to Image mode captures screenshots of live, publicly accessible web pages by providing a URL. PeekShot loads the page in a headless browser, renders it, and returns a screenshot.

How It Works

1. You provide a URL (e.g., https://example.com)

2. PeekShot loads the page in a headless browser

3. The page renders with all its resources (CSS, images, fonts, JavaScript)

4. A screenshot is captured and returned

When to Use URL Mode

• Live website screenshots: Capturing pages that are already published and accessible

• Monitoring changes: Tracking how live websites change over time

• Competitor analysis: Screenshotting competitor websites

• Link previews: Generating thumbnails for shared links

• Website audits: Capturing multiple pages from a live site

• Testing production sites: Verifying how published pages look

Requirements

• URL must be publicly accessible (not behind authentication, unless you provide credentials)

• URL must include protocol (http:// or https://)

• Page must be reachable from PeekShot's servers

Limitations

• Cannot capture localhost or private networks

• May be blocked by bot protection (Cloudflare, CAPTCHAs)

• Requires the page to be publicly accessible

• Dependent on external resources loading correctly

HTML to Image Mode

HTML to Image mode renders raw HTML code directly into an image. You provide the HTML, and PeekShot renders it as if it were a webpage, then captures a screenshot.

How It Works

1. You paste or provide HTML code in the Playground

2. PeekShot renders the HTML in a headless browser

3. CSS (inline or in <style> tags) is applied

4. A screenshot is captured and returned

When to Use HTML Mode

• Dynamic Open Graph images: Generating OG images with variable content (titles, dates, etc.)

• Email templates: Converting HTML email designs to images

• Social share cards: Creating custom social media preview images

• Reports and documents: Rendering HTML templates that aren't publicly hosted

• Design mockups: Converting HTML/CSS designs to images

• Custom graphics: Creating images from HTML/CSS when you have full control over the markup

Requirements

• Complete, valid HTML structure

• CSS should be inline or in <style> tags (external stylesheets may not load)

• Web fonts should be loaded via @font-face or Google Fonts

• Images should use data URIs or publicly accessible URLs

Best Practices for HTML Mode

• Self-contained HTML: Include all CSS inline or in style tags

• Use web fonts: Load fonts from Google Fonts or include @font-face declarations

• Data URIs for images: Embed small images as data URIs for reliability

• Test locally first: Verify your HTML renders correctly in a browser before using PeekShot

• Avoid external dependencies: Minimize reliance on external resources that may not load

Key Differences

Use Case Examples

URL Mode Examples

• Website monitoring: https://competitor.com/pricing - Track competitor pricing changes

• Link previews: https://blog.example.com/post - Generate thumbnail for social sharing

• Quality assurance: https://staging.example.com/feature - Verify staging environment looks correct

HTML Mode Examples

• Dynamic OG images: HTML template with blog post title, author, and date variables

• Email to image: Convert HTML email design to image for preview or documentation

• Custom reports: Render HTML report template with data-filled variables

Switching Between Modes

In the Playground

1. Open the Playground

2. Look for the mode selector (URL or HTML)

3. Switch to your desired mode

4. Enter your URL or paste HTML code accordingly

Via API

Use different endpoints or parameters:

• URL mode: Provide url parameter

• HTML mode: Provide html parameter instead of url

Common Scenarios

Scenario 1: I want to capture my live blog post

→ Use URL mode. Provide the published URL of your blog post.

Scenario 2: I want to generate OG images with dynamic content for each blog post

→ Use HTML mode. Create an HTML template with variables, then render it with different data for each post.

Scenario 3: I want to monitor a competitor's homepage

→ Use URL mode. Provide the competitor's homepage URL and set up a scheduled job.

Scenario 4: I have an HTML email template I want to convert to an image

→ Use HTML mode. Paste your HTML email code and render it directly.

Best Practices

• Choose based on content source: Live URLs → URL mode, HTML templates → HTML mode

• For dynamic content: HTML mode gives you full control over variables and content

• For existing pages: URL mode is simpler when the page already exists

• Test HTML locally first: Verify your HTML renders correctly before using PeekShot

• Consider hosting: If you need to capture a page frequently, hosting it and using URL mode may be more efficient