The 5 fields and concepts you'll meet in the response — defined in plain English, each with a real example value.
The preview image displayed when a URL is shared on social media platforms.
OG images are specified via og:image meta tags. Recommended size is 1200x630 pixels. Dynamic OG images increase engagement by showing relevant, personalized previews for each page or product.
Example1200x630 image showing blog post title and author
The preview box displayed when links are shared on social platforms, including image, title, and description.
Social cards combine OG images with title and description metadata. Twitter uses twitter:card tags with similar functionality. Well-designed social cards significantly increase click-through rates on shared links.
ExampleTwitter card showing article preview with custom image
Rendering HTML in a browser engine without displaying a visible window.
HTML to image APIs use headless browsers (like Chromium) to render HTML with full CSS support, then capture the result as an image. This enables accurate rendering of complex layouts, fonts, and modern CSS features.
ExampleChrome Headless rendering HTML to PNG
Portable Network Graphics—a lossless image format supporting transparency.
PNG is ideal for graphics with text, logos, and sharp edges. It preserves exact colors without compression artifacts. Supports transparent backgrounds. File sizes are larger than JPEG but quality is perfect.
ExampleCertificate with transparent background as PNG
Fonts loaded from the web rather than installed locally, enabling consistent typography.
Services like Google Fonts provide web fonts via CSS. Include fonts with @import or link tags in your HTML. Fonts must load before rendering for correct display. Use fallback fonts for reliability.
Example@import url("https://fonts.googleapis.com/css?family=Roboto");
