Open Graph Image Format: PNG vs JPG vs WebP

For most sites, JPG at 1200 × 630 px under 300 KB is the best Open Graph image format. It loads fast for crawlers, looks sharp in link cards, and works on every platform that reads og:image.

PNG and WebP have clear use cases too. This guide compares all three so you pick the right format once and stop guessing.

Quick comparison

JPG: the default choice

JPEG compression handles photographs and soft gradients well. Social crawlers fetch your image over the network during a scrape. A 150 KB JPG responds faster than a 900 KB PNG, which reduces timeout risk.

When to use JPG

• Blog post hero images
• Product photos
• Any OG image with photographic content
• When file size matters and you have no transparency

JPG settings that work

Export at quality 80-85 in Photoshop, Figma, or Squoosh. Dimensions: 1200 × 630 px. Target under 300 KB, hard cap 1 MB.

<meta property="og:image" content="https://example.com/og.jpg">
<meta property="og:image:type" content="image/jpeg">

JPG downsides

No transparency. Hard edges and small text can show compression artifacts if you push quality too low. For text-heavy graphics, PNG is safer.

PNG: when you need crisp text

PNG uses lossless compression. Logos, typography, and flat-color designs stay sharp. The cost is file size, especially on complex images.

When to use PNG

• OG templates with large headline text
• Brand graphics on solid backgrounds
• Screenshots with UI text
• Any design requiring transparency (rare for OG, but valid)

PNG settings that work

Export as PNG-24 at 1200 × 630 px. Run through TinyPNG or similar if the file exceeds 500 KB. Avoid PNG for full-bleed photos.

<meta property="og:image" content="https://example.com/og.png">
<meta property="og:image:type" content="image/png">

PNG downsides

Large files slow crawler fetches. Some platforms reject or skip images that take too long to download. If your PNG exceeds 1 MB, switch to JPG or optimize aggressively.

WebP: smaller files, wider support now

WebP offers better compression than JPG and PNG at similar visual quality. Most modern crawlers accept it, but "most" is not "all."

When to use WebP

• You control the full stack (Next.js, Vercel, custom CDN)
• File size is critical and you have fallback testing in place
• Your CDN serves WebP with correct Content-Type: image/webp

WebP settings that work

Export at quality 80-85, 1200 × 630 px. Verify the response header and that the image opens in an incognito tab.

<meta property="og:image" content="https://example.com/og.webp">
<meta property="og:image:type" content="image/webp">

WebP downsides

Older tools and some enterprise crawlers may not handle WebP. Always test with OpenGraph Check before relying on WebP in production. When in doubt, ship JPG.

What platforms actually accept

Facebook, LinkedIn, X, WhatsApp, Discord, and Slack all fetch og:image over HTTP. They accept JPG and PNG without issues in 2026. WebP works on most of them but is not documented as universally supported.

The Content-Type header must match the file. Serving a .jpg file with Content-Type: text/html breaks the preview. Same for wrong extensions on CDNs.

How to choose in 30 seconds

1. Photo or soft visual? → JPG
2. Bold text and flat colors? → PNG (optimize file size)
3. Modern app, tested on all targets? → WebP with JPG fallback optional
4. Unsure? → JPG at 1200 × 630, under 300 KB

Serving the wrong format by accident

CDN content negotiation

Some CDNs serve WebP to browsers but JPG to bots, or the reverse. Crawlers may get a different format than you expect. Check the actual response with curl -I https://yoursite.com/og.jpg.

Double extension confusion

og.jpg.webp or mislabeled files confuse validators. Keep a clean extension that matches the bytes inside the file.

SVG is not supported

Do not point og:image at an SVG. Social crawlers expect raster formats. Export to PNG or JPG.

Format and dimensions together

Format choice does not replace correct sizing. Pair your format with 1200 × 630 px from the platform size guide or the general size guide.

Optimization workflow

1. Design at 1200 × 630 px in Figma, Canva, or your OG image generator.
2. Export JPG (default) or PNG (text-heavy).
3. Compress with Squoosh, TinyPNG, or ImageOptim.
4. Upload to a CDN with long cache headers.
5. Set og:image to the absolute HTTPS URL.
6. Scan with OpenGraph Check and open the image URL in an incognito tab.

If the image fails to load despite correct format, the problem may be server or CDN configuration. See OG Image Not Loading, not How to Fix a Missing OG Image (that article covers missing tags).

FAQ

Should og:image be PNG or JPG?

JPG for most sites. Use PNG when the design has large text, logos, or flat graphics that JPG compression would muddy.

Does LinkedIn support WebP for og:image?

LinkedIn generally handles WebP, but JPG remains the safest choice for maximum compatibility across all networks you cannot test individually.

What is the maximum OG image file size?

Stay under 1 MB. Aim for 100-300 KB so crawlers fetch the image before timeout. Slow responses cause missing previews.

Can I use AVIF for Open Graph?

AVIF support among social crawlers is inconsistent. Do not use AVIF for og:image until you verify on every target platform.

Does file format affect image dimensions?

No. Dimensions are independent. Always export at 1200 × 630 regardless of JPG, PNG, or WebP.

Why does my PNG og:image look fine locally but fail when shared?

The file is too large or the CDN returns an error to bots. Check HTTP status, response time, and Content-Type. Test with OpenGraph Check.

Should I set og:image:type?

Optional but helpful. It tells crawlers the format before download. Match it to the actual file type.

Bottom line

Default to JPG at 1200 × 630 px, under 300 KB. Reach for PNG when text must stay razor-sharp. Try WebP only after you confirm previews on every platform you care about. Scan the live URL with OpenGraph Check before you share.