You have the size right, the tag is absolute, the design is clean, and then you save the file. PNG or JPG? What about WebP, which is smaller than both? The format you pick decides whether the card renders on every platform or blanks out on one, and whether it loads fast or trips a file size cap. This is the short, opinionated guide to which format to use for an Open Graph image and why.
If you want the one-line answer: use JPG for a photo-heavy card, PNG for flat colour and text, and avoid WebP for the OG tag itself. The rest of this post is why.
The three formats, quickly
- PNG. Lossless. Every pixel is preserved exactly, which makes text crisp and flat colour clean. Files are larger. Supports transparency, which an OG image does not need.
- JPG. Lossy. It throws away detail the eye barely notices to make a much smaller file. Excellent for photographs and gradients, less good for sharp text edges, where it can leave faint fringing.
- WebP. Modern, smaller than both at similar quality. The catch is support, which is the whole problem for OG images and the reason it comes last here.
Why WebP is the wrong choice here
WebP is a genuinely better format, and your browser loves it. The problem is that a browser is not what reads an OG image. Social crawlers do, and their support for WebP is uneven. Some render it, some show a blank card, and you cannot tell which from your own machine, where the file looks perfect.
An OG image is worth almost nothing if it fails on even one platform, because a blank card is worse than a plain link. The safe, boring choice wins. PNG and JPG are understood by every crawler that has ever existed, so the tiny size WebP saves is not worth the platforms it silently loses.
Choosing between PNG and JPG
With WebP out, the real decision is PNG or JPG, and it comes down to what is on the card.
| Card content | Use | Why |
|---|---|---|
| Large text on flat colour | PNG | Sharp edges, no compression fringing |
| A logo or simple shapes | PNG | Clean lines, small file anyway |
| A photograph background | JPG | Far smaller with no visible loss |
| A rich gradient | JPG | Smooth, and PNG would be huge |
| Text over a photo | JPG at high quality | Photo dominates the file size |
Most designed OG cards are text on a solid or lightly patterned background, which puts the common case squarely in PNG. Reach for JPG when a photograph is doing the heavy lifting.
Keep it under the file size cap
Every platform caps the file it will fetch, and a card over the cap is a card that does not show. The caps vary, but a practical ceiling that keeps you safe everywhere is comfortably under a few hundred kilobytes. At 1200 by 630, that is easy to hit if you are careful and easy to blow past if you are not.
- A PNG of flat colour and text is naturally small. No action needed.
- A PNG of a photograph is the trap. It can balloon into the megabytes. This is exactly the case where you switch to JPG.
- A JPG at quality 80 to 85 is usually indistinguishable from the original at a fraction of the size. Dropping from 100 to 85 often halves the file for no visible loss.
If your card is heavy, the fix is almost always the wrong format for the content, not a quality slider set too high. Match the format to the content first, then tune quality.
Resolution and the retina question
Should you render at 1200 by 630, or double it to 2400 by 1260 for sharp screens? For an OG image, render at 1200 by 630 and stop. Platforms downscale a card to a few hundred pixels wide in the feed, so the extra resolution is thrown away while the file size doubles and edges you toward the cap. The OG image size guide covers the one size that works everywhere, and doubling it is effort spent on pixels no one sees.
What the tag does not care about
The og:image tag names a URL, not a format. It does not read the file extension to decide how to render, so a .jpg and a .png are treated the same as long as the bytes behind the URL are a real image a crawler can decode. What matters is the file itself, not what you called it. For completeness you can add og:image:type, but no major platform requires it, and a correct file at an absolute URL is what actually renders.
<!-- The format lives in the file, not the tag. This is all the tag needs. -->
<meta property="og:image" content="https://example.com/card.png" />Putting it together
Pick the format from the content, not habit. Text and flat colour is PNG, photographs are JPG, and WebP stays out of the OG tag no matter how tempting its file size is. Render at 1200 by 630, keep the file well under a few hundred kilobytes, and point the tag at an absolute URL. Then confirm it before it goes out with the routine in how to test your OG image before you share it, and if the card ever refuses to update, the cause is caching, covered in why your OG image is not updating.