Workflows
How to Prepare Images for Open Graph Cards
Open Graph images are small pieces of content design, not just technical tags, so they need the right frame, file weight, and message clarity.
What you are really solving
How to Prepare Images for Open Graph Cards sounds simple, but the real task is producing a share image that looks deliberate in social previews while staying efficient and readable — so the first move is to identify the destination (blog post, online form, CMS, email, ad platform, or messaging app) before touching any settings.
Step by step
Keep the guesses low: inspect the file, decide what the destination actually needs, then resize or compress in small, deliberate steps instead of re-exporting at random until it finally fits.
- Decide what message or visual should be readable in a shared card preview.
- Crop and resize the image to the share-card frame your site uses consistently.
- Choose a format and compression level that keep the card lightweight but trustworthy.
- Review the image on desktop and mobile preview contexts before publishing.
Settings that usually work
Moderate dimensions and a format that preserves the visual style are usually enough. Text-heavy cards may need a sharper export than ordinary photos.
Example scenarios
A blog post with a quote-led cover image. A product launch page that needs a strong branded share card. A documentation page where the preview image should remain readable in a crowded feed.
How it affects SEO and page speed
Strong Open Graph images support click-through and shared-preview trust, which helps distribution even if they do not directly change rankings.
Developer and workflow notes
Teams should standardize share-card ratios and fallback behavior so content editors do not improvise every image.
Common mistakes to avoid
- Using the article hero image blindly when the share frame is different.
- Putting text too close to edges or interface-safe areas.
- Uploading oversized share cards that add unnecessary weight.
- Ignoring how the card looks on mobile-sized previews.
Exact dimensions and how each platform re-crops the frame
The baseline Open Graph image is 1200x630 px at a 1.91:1 ratio, declared with og:image:width and og:image:height so scrapers reserve the slot before the file loads. Facebook needs at least 600x315 to render a large card and will fall back to a small thumbnail below that; X needs at least 300x157 for summary_large_image and tops out useful resolution around 1200x628. Ship a single 1200x630 master and most platforms downscale it cleanly, but they do not all honor the 1.91:1 frame, so anything within ~120 px of the top or bottom edge can be cut.
Build to the widest target and verify the tighter crops against this list:
- Open Graph default (Facebook, LinkedIn, Pinterest link shares): 1200x630 px, 1.91:1, the safe master to author first.
- X / Twitter summary_large_image: serves ~1.91:1 but trims the 1200x630 to roughly 1200x600 in-feed; keep the logo and headline off the bottom 30 px.
- LinkedIn link preview: 1200x627 px (1.91:1); below 600 px wide it drops to a left-aligned square thumbnail with the text beside it.
- Slack and Discord unfurls: render the full 1200x630 with no crop, so this is your true worst case for clutter.
- WhatsApp and iMessage: crop the 1200x630 toward a centered ~1:1 square; center the subject and keep nothing critical in the outer 20%.
- Absolute floor: 600x315 px (Facebook) and 300x157 px (X) — below these you lose the large card entirely.
File-weight and format targets that survive re-encoding
Every platform re-encodes your OG image, so the goal is a file small enough to scrape fast and clean enough to survive that second pass. Keep a 1200x630 card between 100 KB and 300 KB. Facebook accepts up to 8 MB but recommends staying under 1 MB, and X hard-caps link-card images near 5 MB; nothing past ~500 KB buys visible quality at this resolution. Aim for under 300 KB so the scraper, which often times out around 5-10 seconds on first fetch, grabs the file before the deadline.
Match format to content. Photographic or gradient-heavy cards belong in JPG at quality 80-85, which lands a typical 1200x630 photo around 120-200 KB. Cards built from flat color, logos, or sharp text belong in PNG-8 or PNG-24 to keep type crisp; a mostly-flat PNG card usually compresses to 60-150 KB. WebP at quality 80 cuts another 25-35% and is fully supported as og:image now, but keep a JPG or PNG fallback for the few legacy scrapers that still skip it. Run the final card through Compress Image to hit the target without re-exporting blind, and never upscale a small source to 1200x630 — that just bloats bytes and softens edges.
Keeping text legible after the feed shrinks the card
A 1200x630 card rarely renders at full size. In a phone feed it displays roughly 360-400 px wide, so every dimension is scaled down to about a third. Set headline type at 60-72 px in the 1200-wide artboard so it reads near 20-24 px on a phone; body or supporting text should not drop below 36 px, which is the practical floor for legibility once the card is reduced. Limit a headline to about 6-8 words — more than that turns to noise at feed scale.
Hold a margin of at least 60 px (roughly 10%) on all four sides so the WhatsApp square crop and X's bottom trim do not clip your words, and never place text in the outer 120 px top or bottom band. Contrast carries the card more than size: keep text and background at a contrast ratio of at least 4.5:1, and when you set type over a photo, add a solid bar or a dark overlay at 40-60% opacity behind it rather than trusting the image alone. Use Crop Image to fix the composition before you add text, and Resize Image to lock the 1200x630 frame, so the type is placed once at final scale instead of being rescaled and blurred afterward.
Related tools
Use the tools below to apply this workflow directly in your browser and finish the job without leaving the page.
