How to Convert HTML to Image with an API: Complete Guide

Why Convert HTML to Images?

Converting HTML to images is useful for many scenarios:

• Social Cards: Generate dynamic OG images for social media
• Invoices & Receipts: Create PDF-like documents from HTML templates
• Certificates: Generate personalized certificates
• Email Signatures: Create consistent email signature images
• Charts & Reports: Render HTML charts as images

Using the ShotAPI Render Endpoint

ShotAPI's /v1/render endpoint converts HTML+CSS to pixel-perfect images. Here's how to use it:

curl -X POST https://shotapi.net/v1/render \
  -H "X-API-Key: sk_your_key_here" \
  -H "Content-Type: application/json" \
  -d '{
    "html": "<div class='card'><h1>Hello World</h1></div>",
    "css": ".card { background: linear-gradient(135deg, #667eea, #764ba2); color: white; padding: 40px; border-radius: 16px; }",
    "width": 1200,
    "height": 630,
    "format": "png"
  }' --output card.png

Generating Dynamic OG Images

Open Graph images are crucial for social media sharing. Here's an example that generates a blog post OG image:

const generateOGImage = async (title, author) => {
  const html = \`
    <div style="display:flex; flex-direction:column; justify-content:center;
                width:1200px; height:630px; padding:60px;
                background: linear-gradient(135deg, #1a1a2e, #16213e);">
      <h1 style="color:white; font-size:56px; margin:0;">\${title}</h1>
      <p style="color:#888; font-size:24px; margin-top:20px;">By \${author}</p>
    </div>
  \`;

  const response = await fetch('https://shotapi.net/v1/render', {
    method: 'POST',
    headers: {
      'X-API-Key': 'sk_your_key',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ html, width: 1200, height: 630 })
  });

  return response.blob();
};

Best Practices

• Use inline styles or include CSS in the request for consistent rendering
• Set explicit dimensions to ensure consistent output size
• Use web-safe fonts or include font URLs in your HTML
• Test with different content lengths to handle edge cases

Next Steps

Ready to start generating images from HTML? Create a free ShotAPI account and get your API key to begin.