---
layout: default
title: Guides
permalink: /guides/
nav_order: 15
has_children: true
expanded: false
description: >-
  Guides for the HTML/CSS to Image API. Social media screenshots, debugging, styling, transparent backgrounds, and workflow automation.
---
# Guides
{: .no_toc }
{: .fs-9 }

In-depth guides for common tasks and advanced features.
{: .fs-4 .fw-300 }

[Live demo](https://htmlcsstoimage.com/#demo){: .btn .btn-primary .fs-5 .mb-4 .mb-md-0 .mr-2 }
[Get an API Key](https://htmlcsstoimage.com){: .btn .fs-5 .mb-4 .mb-md-0 }

<hr>

## Account & organizations

Manage your account and team in the dashboard:

| Guide | Description |
|:------|:------------|
| [Account settings](/guides/account/account-settings/) | Your login, organizations, switching orgs, and accepting invites |
| [Organization settings](/guides/account/organization-settings/) | Members, invites, roles, and billing for an organization |

<hr>

## Social Media Screenshots

Capture content from popular social platforms:

| Guide | Description |
|:------|:------------|
| [Twitter/X Screenshot](/guides/social-media/twitter/) | Capture tweets and Twitter content |
| [Facebook Screenshot](/guides/social-media/facebook/) | Screenshot Facebook posts and pages |
| [Instagram Embed](/guides/social-media/instagram/) | Capture Instagram posts |
| [LinkedIn Screenshot](/guides/social-media/linkedin/) | Screenshot LinkedIn content |

<hr>

## Open Graph Images

Add automatic social cards to websites, stores, CMSs, and static sites:

| Guide | Description |
|:------|:------------|
| [OG Image Configs](/getting-started/og-images/) | Connect a website origin and create path-specific social cards |
| [Platform and CMS guides](/guides/og-images/) | Setup instructions for Shopify, Squarespace, Webflow, Wix, WordPress, Jekyll, Astro, and Sitepress |
| [OG Image caching](/guides/debugging/og-image-caching/) | Understand refresh intervals, content versions, and social-platform caches |

<hr>

## Debugging

Troubleshoot common image generation issues:

| Guide | Description |
|:------|:------------|
| [Debugging Cropping Issues](/guides/debugging/cropping-issues/) | Fix images that aren't cropping to the expected size |
| [Debugging Blurry Images](/guides/debugging/blurry-images/) | Fix image resolution and clarity issues |
| [Debugging White/Blank Images](/guides/debugging/white-images/) | Troubleshoot images that render blank |
| [Rendering Emoji](/guides/debugging/emoji/) | Ensure emoji display correctly |
| [Cloudflare Challenges](/guides/debugging/cloudflare-challenges/) | Allow authorized renders through Cloudflare on a site you control |

<hr>

## Styling & Fonts

Control the appearance of your images:

| Guide | Description |
|:------|:------------|
| [External CSS and Fonts](/guides/styling/external-css-fonts/) | Load external stylesheets and fonts |
| [Transparent Background](/guides/styling/transparent-background/) | Create images with transparency |
| [File Formats](/guides/styling/file-formats/) | Choose between PNG, JPG, and WebP |

<hr>

## Advanced Features

Get more from the API:

| Guide | Description |
|:------|:------------|
| [Blocking Cookie Banners](/guides/advanced/blocking-cookie-banners/) | Hide consent popups in screenshots |
| [Duplicate Image Detection](/guides/advanced/duplicate-detection/) | Reuse identical recent images without extra image credits |
| [Account Usage](/guides/advanced/account-usage/) | Track your API usage programmatically |
| [Base64 to Image](/guides/advanced/base64/) | Work with Base64-encoded images |
| [HTTP Proxies](/guides/advanced/proxies/) | Route renders through your own HTTP proxy |
| [Storage Destinations](/guides/advanced/storage-destinations/) | Save rendered images to your own storage bucket |

<hr>

## Workflows & Tools

Integrate with your development workflow:

| Guide | Description |
|:------|:------------|
| [Postman](/guides/workflows/postman/) | Test the API with Postman |
| [Insomnia](/guides/workflows/insomnia/) | Test the API with Insomnia |
| [Email to Images](/guides/workflows/email-to-images/) | Convert emails to images |
| [Email to Slack](/guides/workflows/email-to-slack/) | Forward emails as images to Slack |
| [Image Charts with Highcharts](/guides/workflows/highcharts/) | Generate chart images |